I'm trying to make the element shown in the image below: It is based on the Apple Watch widget for Air quality. The circle is not fully round and the gradient changes across the line. Besides that, there is a…
I'm trying to create a circular progress bar where the variables can be controlled with an inline style. The progress bar will have two different bars that should be added together but are still different colors. These variables work on…
It looks like when I use the “insert” function, the new element is always inserted as a child – Not as a sibling. I still don't understand why this is, since the insert function should actually insert a new element…
I am trying to add a svg gradient background image to my website, however, When adding the SVG as a background it just seems to duplicate it multiple times randomly. I have never had this issue before when adding background…
I have two images, a JPG and an SVG, that must be overlaid, the JPG on top of the SVG. They both must resize exactly proportionally as the viewport dimensions change, and not just at specific breakpoints, but continually. The…
How can I change the coordinate system of a SVG, in particular scale the y-axis, without also scaling the circles (which would make them ellipses), texts (which would distort them) and other elements? Here is an example: <svg viewBox="0 0…
I manage a WordPress website (updates not development). We have an area on-site that shows rooms features. These are made up of individual SVG files for each feature. The site is set up for the files and all have been…
I need to animate this so that it'll look like a running conveyor belt, is there are any way to achieve it? const cx = 50; const cy = 50; const width = 40; const radius = 100; // CV…
I have created a line chart using d3.js, now I want to add the gap and text between the path. live demo What I have so far. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Stacked Bar and Line Chart</title>…
I have a svg hamburger that animates into a X when hovered on but I would like it to animate to a X when clicked on and then when clicked again it will animate back into its original hamburger form.…