CODEWITHSUNDEEP
javascriptcsssvgtransformsvg-animate
deathandtaxes
deathandtaxes

Reputation: 5

SVG transform circle into simple line

I'm trying to animate a simple SVG circle (white background or any other color) so that when you hover over it it becomes a simple vertical line (in other words, it sort of flattens into a line) and on mouse out, well, then it animates into a circle again.

Yet I can't find much information on how to approach it... Any and every help will be greatly appreciated!

Upvotes: 0

Views: 939

Answers (1)

vals
vals

Reputation: 64164

An example of the animation using scale

<svg width="500" height="150">
    <circle cx="60" cy="60" r="40" style="stroke:#006600; fill:#00cc00" >
            <animateTransform 
            attributeName="transform"
            begin="0s"
            dur="2s"
            type="scale"
            from="1 1"
            to="1 0.01"
    repeatCount="indefinite"
        />
</circle>
</svg>

Upvotes: 1

Related Questions