The Right Way to Animate SVG in React

[@Cypekeh]

SVGs being from 2001 is old? I thought they were from the early 90s or 80s like most things in CS :D (HTML, Python, vim, Haskell)
As for the animations however, amazing explanation. I did use framer motion in a project recently, but I didn't thought of applying it to SVGs. It looks sick

[@shahbazahmadsiddiqui]

Great explanation video... I use Framer Motion to animate SVGs too...

[@nano_org]

Nice video, thanks

[@Schmexy]

Awesome video! What do you use to preview SVG in VSCode?

[@Smeali]

5:59 SVG Preview

[@Diego_Cabrera]

Nice explanation. I used framer motion in many of my projects as well. Keep it up!

[@tangflx]

oh my this video saved my life. i was using chatgpt to animate each polygon. it was nightmare. didnt know framer motion exits!

[@laptopuser5198]

Great video, the best part is mapping the the power field.

[@ЦзинКэ-ы5х]

Thanks! You are very straightforward and clear, unlike Framer Motion documentation.

[@loupa6128]

Nice video. Is there a way to animate SVG or change current animation using something like onClick/onTap in framer-motion? I can't find anything.

[@ЦзинКэ-ы5х]

You can animate something by using a deconstructed object with animation parameters and modify that object on demand in hook, I believe.

[@thyaghito]

Always wanted to do this simple animations without use lottie! thank you!

[@tamerahmed9860]

Great efforts! Thank you

[@athuljonnie]

Hey, is it possible to make this component as a background for a div?
edit: typo

[@ЦзинКэ-ы5х]

You can do background: url(%svg%) in CSS, if I understood your question right.

[@aymenbachiri-yh2hd]

Thank you

[@alem182]

Buenisimo, gracias!!

[@ashik_dev]

Nice video...

[@grubbsgaben4461]

Typical programmer guide: cut out the part where he actually writes the stuff, that we came to see how to do.