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: 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
Пікірлер: 5
Very nice work ! ☺
@PikoCanFly
7 ай бұрын
Thank you so much! I am glad you like it.
Good job! Hey! You know, if you set up Vite, and the official Vite extension in VS Code (that also uses another extension called Browse Lite), whenever you open VS code in a Vite environment, it will automatically open in VS Code an implemented browser on the side with your project, and every time you save a file it will automatically reload that page. I'm saying this because it might help you to do more interactive tutorials. In my case, setting up Browse Lite required a bit of setup, but it wasn't too hard. If you need any help just say it.
@PikoCanFly
7 ай бұрын
Thank you so much for the tip, Rodrigo. That sounds awesome! I will give that a try. 😊
.