SVG stroke-dasharray experiment
Setting your stroke dash length to 0 and the linecap to round produces some interesting results.
As the name implies, it's about motion. Specifically, web animation to get your pixels movin'. It's a collection of tutorials, tips and tricks that will hopefully help with your daily animation work.
My main focus will be real world projects. All lessons assume a basic working knowledge of HTML, CSS and JavaScript. Knowledge of SVGs and the GreenSock Animation Platform will also be super helpful.
Finally, I hope the site is a source of ideas and inspiration for you.
This isn't a place to learn basic coding. There are many wonderful sites to learn the basics. I also won't be using React, Vue, Angular or any other frameworks. All code will be written with vanilla JavaScript and I won't be animating anything with CSS keyframes.
It's also not about perfection. This website isn't perfect. I'm not perfect. You're not perfect. Well, maybe you are. I don't know you. I'm just trying to share knowledge, make some pixels move around the screen and have a bit of fun.
Setting your stroke dash length to 0 and the linecap to round produces some interesting results.
Dynamically build a SVG wavy gauge with jumping numbers and link the time to a draggable element.
SVG calligraphy can be tricky with varying width strokes and text overlapping itself. Learn how to do it with multiple masks.
Eliminate SVG coordinate surprises by using a background rectangle when exporting your SVGs for animation.
End the frustration of figuring out Adobe Illustrator path direction with this quick tip.
We'll make a gooey shape smoothly glide to a new target via a custom SVG curve for a gooey navigation.
In this quick tutorial, you'll learn how to create a neat inverted text effect using a mask or clip-path in your SVG.
You'll learn how to move your target from one item to the next with an organic feeling, stretchy-style animation.