Kevin Powell - Community•2mo ago

Animate SVG

Hi Guys. I am trying to animate an svg on hover/mouseover and reverse the animation on mouseleave. I am not achieving exactly what i want to. The first video show what I am trying to do and the second one is what I have done. Please help out.

4 Replies

clevermissfox•2mo ago

Please provide a codepen or another live environment with your existing code

CodePen

Create a New Pen

...

AbulkalamOP•2mo ago

https://codepen.io/abulkalam-asif/pen/gOVXRaM

Abulkalam-Asif

CodePen

SVG Animation

...

Rowe2ry•2mo ago

I'm having trouble determining how the "correct" behavior differs from what you've done My instinct would be to use the SVG as a mask and then use something like this https://codepen.io/t_afif/pen/dyOdNvW To animate a gradient masked by the SVG Best I could come up with. It looks even farther from the effect you want, but you might be able to fine-tune it and its a LOOOOOT easier to maintain. 23 lines of HTML vs 87 57 lines of CSS vs 337 0 lines of Javascript vs 98 https://codepen.io/Chris-Rowe/pen/JjgOvJb In my head, the green-to-white radial gradient would start in the bottom left corner, and as it reaches the center of the shape it "flattens" out to a linear gradient with a 45% angle, then is immediately replaced with a white-to-green gradient thats the equal and opposite of the starting point and it "reverse" animates the same way the first half of the animation formed. But this would require lots of playing with key frames and turning the circle gradient into an ellipse, etc. my reference material: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

dys 🐙•2mo ago

If I were doing this, I'd put your shape in the <defs> section then <use/> it twice, once in white, and once in blue. Then, I'd create a <clipPath> using a <circle> with the r attribute animated on hover with a SMIL <animate/> tag and filter one of the <use/>s with it like:

<circle cx="0" cy="100%" r="0">
  <animate
    attributeName="r"
    from="0"
    to="100%"
    dur="3s"
    fill="freeze"
    begin="mouseover"
    end="mouseout"
    repeatCount="1"
  />
</circle>

<circle cx="0" cy="100%" r="0">
  <animate
    attributeName="r"
    from="0"
    to="100%"
    dur="3s"
    fill="freeze"
    begin="mouseover"
    end="mouseout"
    repeatCount="1"
  />
</circle>

Bear in mind that mouse interactions only work when the <svg> is inline or included using the <object/> tag. When <img/> is used, no mouse interactions are processed.

Gaming

Programming

Animate SVG