SVG animation: animate an SVG icon with CSS and JavaScript

In this SVG animation tutorial with CSS and JavaScript we will animate an SVG heart when the user clicks on it. We will achieve this using various CSS animations and properties such as stroke-dasharray and stroke-dashoffset. To view the final SVG animation and to get the source code visit: https://codepen.io/patriciamolnar/pen/vYZNzxQ An example of how the SVG animation could look when added to a social media site: https://codepen.io/patriciamolnar/full/NWgPZJq Icons and further information: heroicons: https://heroicons.com/ stroke-dasharray: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset stroke-dashoffset: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-linejoin: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin stroke-linecap: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap Found this tutorial useful? Buy me a coffee: https://www.buymeacoffee.com/patriciamolnar 😊 For more CSS animations tutorials, check out my other videos: 1) CSS Animations: Neon Glow with SVG text: https://youtu.be/A9_sGB2FLRA 2) Interactive CSS background animation: https://youtu.be/Ws5GFMeRye4 3) CSS Text animation: https://youtu.be/WnoZAPj_yhQ Connect with me on social media: Twitter: https://twitter.com/pmcoding Instagram: https://instagram.com/pmcoding CodePen: https://codepen.io/patriciamolnar My website: https://pmcoding.co.uk Any questions, email me at [email protected]