I’m looking to create a simple pulsing animation on a
circle svg element. I’m using a
transform: scale(..,..) animation but for some reason it’s moving the entire circle within its container rather than simply scaling the element itself.
Here’s the animation:
animation: pulsate 2s infinite linear;
And here’s an example (including the same animation applied to a
div which produces the desired result):
Any ideas on how to create this effect? The circle may be positioned anywhere within the
svg and it needs to maintain this position.
You need to change the
transform-origin property value.
In this case, you would use the value
By default, the value is
0 0 on
svg elements. Reference:
The default value for SVG elements without associated CSS layout box is