SVG line drawing animation | SVG Stroke Animation With Html and CSS

[@fedeveloper1086]

To know what length of your svg line you could add this script and check the console. But you should add id for this svg and paste it in script below var path = document.getElementById('add-here-id-of-your-svg'); var length = path.getTotalLength(); console.log(length)

[@OnlineTutorialsYT]

thanks bro

[@umaryusuf2525]

Another way is to measure the path's length from Adobe Illustrator or whatever GUI used to draw the path.

[@GuitarsRgood7]

This is so awesome! I'm going to use it for a cartoon image of myself for my portfolio page.

[@zakwanmasud2406]

Salute bro..nice

[@DerAleksey]

Крутой эффект движения теней на начальной заставке!

[@temuulenone]

you are genius MORE VIDEOS I LIKE IT

[@DeepakSingh-n2g]

What about the white space at the end of animation?

[@aryadi3382]

This is awesome

[@sayedakbarali5650]

Thankyou Irshad very good tut

[@cztery7]

Thanks a lot! It works great :)

[@cesarcarranza81]

Super rad!!

[@hermawanajaa]

Wow...so amazing

[@joshuati2858]

Awesome!

[@AdarshSingh-hm8ss]

Amazing.

[@naimurhasanrwd]

great

[@Daw588]

My head, it's possible 🤓 to create this without JavaScript? lol, Good Job, More Videos From Design 😀

[@huyenle4961]

Nice

[@bhupengadtia]

What software do you use for recording and editing

[@huyenle4961]

Bhupen Gadtia AI (Adobe illustrator )

[@osmon-11]

😱😱😱👍

[@vaibhavkumarpatel6863]

Suggest the link for learning svg. From where you learn svg. Suggest that also

[@codingonphoneadnan]

How i use in (to draw structure and find its svg )

[@singlebw4065]

smooth transition effect @keyframes animate{ to{ stroke-dashoffset: -3200; } }

[@ideologist616]

Thank you :)

[@Asif-nr4xk]

👏👏👏👏

[@arturocoronel]

👍😉👍

[@wahabuiux]

Not Working ... same steps

[@shamimreza5463]

greet

[@Shibansh]

what that's it?!!

[@csf4442]

great vid, horrible song. :)