Animating SVG with CSS

In this video, we are going to learn how to animate our SVGs using only CSS.

0:00 Introduction
2:04 Getting started with SVG animation
2:58 What is stroke-dasharray?
4:30 Creating your animation

 

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

[AliveDeejay]

Thank you! 4 years later i found this and actually got to use it straight away. I can't believe how simple this is :D i used this with filter: drop-shadow to give it a nice neon effect, looks awesome :D

[TraceyNjeriK]

This just gave me new syk to code.
Thank you!! <3

[felipe]

I have a SVG file that has 10 elements. for some elements my animation is ok, but others, the animation goes totally wrong. Even if I use the same animation on different element. Any idea? I'm having trouble to find solutions. At first I thought it would be the stroke-width, but it even when changed. As i'm fairly new at programing i'm having really trouble to find out hehe