How to Animate SVG Strokes

Показать описание

SVGs are light-weight code drawings, which means you can animate their different paths or segments. In this short video, I’ll show you how to animate SVG strokes with CSS Keyframes and how to find and update the stroke-dasharray and stroke-dashoffset with JavaScript.

---------------------------------------

🔗 Key Links 🔗

---------------------------------------

🔗 Other Links 🔗

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Introduction
1:09 Animating an SVG stroke with CSS
4:30 Updating SVG stroke animation with JavaScript
11:17 Drawing an SVG arrow with CSS

---------------------------------------

🌐 Connect With Me 🌐

Coding in Public

Рекомендации по теме

Комментарии

Glad I found this video. Very well explained.

musthavechannel

If someone is having problems in Safari: at the moment Safari doesn't accept negative values for stroke-dashoffset.
Thanks for the nice tutorial!

ArchitectLocatelli

Thanks you're awesome not even the ia can tell me how this exactly work in a way that I could understand god bless you man

OrlandoLopez-dk

i'm just getting into working with svg's making myself some logos, i am using the circle a lot, and was earlier thinking about how to cut the top off without using line or bezier curve, trying to animate a rotation is hard enough, this will help, thanks

sovereignlivingsoul

Just in case it helps anyone else:
In some cases you can use the pathLength attribute on any <path> element in order to use less abstract numbers for your path animations.
E.g.
<path class="anim-drawPath" pathLength="100" >
And then you can think of your CSS animation properties in terms of 0-100٪
Alternatively, you could use 360 for circles in order to animate using ° degrees

ryder

So happy to see this video, I'm participating in the same challenge and was exactly stuck at animating the svg. Thanks for the tut

_vikramhegde_

Great video. I didn't know the $0 trick to get the total length of the circle.

federicoraulmaciasaparicio

Hello! I have a question regarding first seconds of the video, where you showed your js timer project. Before the timer began to count your circle had black stroke, after the timer started the stroke became red and started to decrease its length, but the black stroke remained. How did you do this??? Did you draw addition circles?

evgeniypopenko

How to Animate SVG Strokes

How to Animate SVG Strokes

Make Awesome SVG Animations with CSS // 7 Useful Techniques

I Learned How to Animate SVGs In UNDER 1 HOUR: SVGator Tutorial

SVG Stroke-Path Animation Tutorial | SVGator

Create Any Animated Stroke Icon in After Effects

Easy Hand-Drawn SVG Animation #Shorts

Animate Any SVG icons with CSS Only | SVG Stroke Animation With Html CSS

Learn How to Animate Text Strokes with SVG and CSS in Just 5 Minutes

SVG Explained in 100 Seconds

Animate Stroke Loaders in Minutes | SVGator

How to Animate Stroke Loaders | SVGator

#9 SVG “Drawing On” Animation - CSS Experiments

The Power of SVG Animations

2020 SVG Animation | Using pathLength=1 with stroke-dashoffset Tutorial | @keyframers 2.29.0

How to animate your picture into animation | html css svg #coding

Create SVG Animations with CSS Keyframes | Animate SVG Icons | CSS Keyframes!

Automatic Motion-path | SVGator

Animating SVG with CSS

Learn How to Animate Text Strokes with SVG and CSS in Just 5 Minutes #programming #coding #css

Pure CSS Pencil Stroke Loader Animation - No SVG - CSS Loader Animation - Online Tutorials

Animate Anything Along Custom Path in After Effects #tutorial

jQuery DrawSVG Plugin Used To Animate Strokes

SVG Stroke Animation | HTML & CSS

Apple Hello word animation + export in Lottie