Create drawing style animation for any SVG logo with javaScript and CSS in less than 20 minutes
In this quick tutorial we will learn how to create drawing style animations for SVG images using pure CSS and javaScript. We will create a function that would work on any simple SVG image like a logo or a small artwork.
Github: https://github.com/PikoCanFly/Logonim...
Chapters:
00:00 - demo
00:20 - gather some logos to experiment on
00:42 - create project scaffolding
01:16 - select logo, and get SVG code
01:55 - add logo to HTML file and create div container
02:23 - add CSS styling to center div
03:00 - define animate SVG function
03:38 - iterate over paths using forEach method
04:12 - stroke dasharray
05:04 - stroke dashoffset
06:36 - define draw animation
08:31 - setTimeOut
10:49 - speed up the animation
11:23 - animate renault logo
12:34 - animate Ferrari logo