The darker translucent ring should be the same thickness as the brighter one but for some reason isn't The issue starts when I take off the opacity form the 'foregroung' circle. I'm not sure why and would appreciate any input!…
I have a div: it has width, but it is not known ahead of time it might or might not have height set when height is not set, it should expand vertically to match content. I want to overlay that…
<svg xmlns="http://www.w3.org/2000/svg" width="282" height="122" viewBox="0 0 282 122" fill="none"> <!-- Signature Path --> <path id="signature" d="M59.1294 91.0229C59.2018 87.6683 57.6122 84.619 56.5486 81.5202C54.828 76.5073 53.9153 71.3684 52.7901 66.1947C48.7362 47.5558 44.4087 28.9291 39.3774 10.5267C37.5692 3.91298 36.1171 8.64639 34.837 12.4986C32.4899 19.5623 30.9263 27.1572…
In JavaScript, I'm creating an image element that shows an SVG icon that includes transparent parts: const iconImg = document.createElement("img"); iconImg.className = "host-icon"; iconImg.src = `img/host-icons/rehost.svg`; iconImg.style.width = "24px"; iconImg.style.height = "24px"; iconImg.title = "My tooltip"; The problem is that…
I have four SVG shapes that I am using as text boxes containing a description of courses people can book. At the bottom of the text boxes I want two buttons that have the option to see more information on…
Is there a syntax that will allow me to reference an inline svg by id in an img tag's src attribute? Or is it possible to echo the svg code directly into the src attribute? I'd prefer to avoid creating…
I have the following svg of a hexagon and a rotation animation in for it that only goes 1 direction at the moment. How would I adjust this so it rotates the other direction after each animation cycle? @keyframes rotation…
I wanted to animate a svg graphic. I wanted to animate the bar diagram so the bars start at 0 and reach their height at 4seconds, I can't seem to figure it out. Imagine it like a loading bar but…
I have a fabricjs canvas, and I'm trying to add an SVG to it. But whatever I do, I get problems. It keeps saying: "Uncaught (in promise) TypeError: t is not iterable". let svg = `<svg viewBox="-8 -8 136 136">…
I'm trying to spin/rotate the inner path of this SVG so that it spins clockwise. Are there any good resources that show the different types of animation approaches available with CSS? Right now the path is spinning as if it…