How to Animate SVG Strokes

Рет қаралды 14,208

Күн бұрын

Пікірлер: 23

@ArchitectLocatelli 11 ай бұрын

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

@CodinginPublic 11 ай бұрын

Ah, yes. I believe that's still the case. I haven't ever found a solution for this. I'm assuming there are some libraries or something that can work cross-browser, but negative stroke-dashoffset do not work properly in Safari. If I remember correctly, they claim to be implementing the speck correctly, but it's still frustrating to have different experiences.

@ryder2356 8 ай бұрын

Just in case it helps anyone else: In some cases you can use the pathLength attribute on any element in order to use less abstract numbers for your path animations. E.g. 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

@sovereignlivingsoul 10 ай бұрын

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

@_vikramhegde_ 3 жыл бұрын

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_ 3 жыл бұрын

This might be a dumb question but I'm gonna ask it anyway. What would happen if set the animation duration(in this case animation-duration: 10s) of stroke dash offset as much the time we want it to animate, wouldn't that cut down some JS?

@CodinginPublic 3 жыл бұрын

Not a dumb question. Yes! That would work; but it would not allow you to make it look like ticking seconds. It would just move in one motion around in 10 seconds. So just up to you what you prefer.

@_vikramhegde_ 3 жыл бұрын

@@CodinginPublic ah, yes that is true. Ticking part of the animation looks much cooler

@OrlandoLopez-d8k Жыл бұрын

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

@CodinginPublic Жыл бұрын

💪 take that, Artificial Intelligence! lol

@evgeniypopenko8705 5 ай бұрын

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?