SVG Tutorial - Draw Any Path Animation

[@0xAndy]

I love this tutorial so much. You're a great teacher.

[@RobertoMusicHelp]

Happy to be of service! I'm glad you can use this.

[@niclasstengel6781]

3 years later - still a very good video and easy to understand. thanks!

[@RobertoMusicHelp]

Glad it helped!

[@JanetNevins]

Thanks for the great video!! This is exactly what I have been searching for. I would love for you to do more complicated animations like filling in the colors, etc.

[@RobertoMusicHelp]

Happy to be of service. Please explain what you are looking for and I will do what I can to make that video.

[@joyrecca]

@@RobertoMusicHelp hey thanks for this video. I am trying to learn how to animate doodles in svg and this helps a lot. Would really love if you do a video on more complex animations like filling in colours or shading the edges etc

[@basalduat]

You are a very good teacher. You get to the point. You keep it simple. Please recommend books or documents we should read. Thank You!

[@RobertoMusicHelp]

I'm glad you learned something!

[@madblazer8401]

Excellent video, Roberto. Exactly whart I was looking for!

[@RobertoMusicHelp]

Happy to be of service!

[@artxpressionsshorts]

This is want I really wanted. Thanks big bro

[@RobertoMusicHelp]

Happy to be of service.

[@franciscomagalhaes7457]

God damn thanks man, I simply could not get these animations to work with vanilla javascript, and I can't use libraries nor mess around too much with the logo itself. This did the trick just fine!

[@RobertoMusicHelp]

Glad I could be of Service!You're welcome, Francisco Magalhães!

[@sonsimp3468]

Hey I know it's two years too late but great work here man Thanks for sharing your knowledge man

[@RobertoMusicHelp]

You're welcome!

[@ott5392]

nice video, it helped me a lot. thanks :)

[@RobertoMusicHelp]

Happy to be of service.

[@kaansouth8789]

Omg, this video is gold!!! Good job sir!

[@RobertoMusicHelp]

Thanks! 😃

[@ogrigarrath701]

Awesome thanks for your tutorial!

[@RobertoMusicHelp]

You're very welcome!

[@Abolnaga]

i loved this tut. so much, thank you.

[@RobertoMusicHelp]

Happy to be of service!

[@MarkWilder68]

Yes, I want to learn how to do all of that from you thanks...

[@solonyetski]

Ur a genius man. Cheers.

[@RobertoMusicHelp]

Ha! Hardly, but thanks for the compliment! Happy to be of service!

[@abdullahalsulami8440]

Thank you . How can make hand image drawing this svg paths?

[@RobertoMusicHelp]

Thank you for watching. I will investigate and I will create a video as soon as I find out.

[@andreysivak6404]

Awesome! Thanks a lot!

[@RobertoMusicHelp]

You're welcome, Andrey Sivak!

[@ghithtabbaa]

So helpful thanks!

[@RobertoMusicHelp]

You're very welcome! Happy to be of service!

[@azzuazzuazzuazzu]

Awesome video, just wanted to ask, how can we do this in scroll, like I have an svg path vertically and I want to show it on scroll

[@RobertoMusicHelp]

I'd be more than happy to help... Please be more specific. Vertical SVG path? What exactly are you trying to create on scroll? A simple path? An SVG text?

[@chileanywayss7268]

Hi Roberto, thanks for the tutorial, is there anyway i can loop the animation?

[@RohitVerma-dq8ri]

I also want to add hand while writing can you help me please?

[@antonioguiotto529]

amazing man!! = )

[@RobertoMusicHelp]

Thank you, Antonio Guiotto! Glad to be of service.

[@HectorTaboada-py]

Thanks Roberto, great tuto... Can you share your pen? So we can play arround with it

[@RobertoMusicHelp]

Sure, when I get to 4000 subs! 😉

[@misfitthinker6620]

@@RobertoMusicHelp share it now

[@RobertoMusicHelp]

Here you go! codepen.io/rsmatth/pen/oNgJyvW

[@mansukhkaur9494]

Is there a way to stop animation for a path (using a click, maybe?) then resume it?

[@RobertoMusicHelp]

Yes, I would add a piece of javascript that added that ability.

[@mansukhkaur9494]

@@RobertoMusicHelp I would be really thankful if you could tell me what it is?

[@RobertoMusicHelp]

@@mansukhkaur9494 - Ok, I'll start working on something and let you know. Please email me [e-mail] with your specific question so I can write exactly what you need.

[@bundafatim2569]

I draw a path in illustrator then copy and paste the code to html document. I use your javascript code to make line drawing. But I need some adjustment to add delay (in second) before the html document play in the browser. Could you tell me how to do that?

[@MarkWilder68]

Where can I get this code so I can study it?

[@RobertoMusicHelp]

Here you go! codepen.io/rsmatth/pen/oNgJyvW

[@MarkWilder68]

What's SVG Edit? Where can I find it? Thank you for sharing...

[@RobertoMusicHelp]

Here you go! www.clker.com/inc/svgedit/svg-editor.html

[@jellycoding]

I think most people turned off windows sounds for over 20 years ago. LOL... but nice video.

[@RobertoMusicHelp]

That clicking sound comes from the recording program. Ha! But thanks for noticing!

[@Pspisripoff]

Ok, but how to create an element like this in React tho

[@ciwoekcobain1097]

Thanks You OM...

[@RobertoMusicHelp]

You're welcome, Ciwoek Cobain!

[@ciwoekcobain1097]

@@RobertoMusicHelp how to delay between lines in the image

[@gouravchouhan1790]

who are you, who are so wise in way of science?

[@RobertoMusicHelp]

Ha, ha! Thank you!

[@shri.s9188]

In my college our lecturers want us to write SVG Points (drawing lion and scenarios) on a paper and type those in vs code and execute without using these type of softwares 💀

[@oasinwolf]

BLACK MAGIC.

[@RobertoMusicHelp]

Ha! Nah, just code.

[@abidrahim7607]

Sir, you are awesome for sharing this 🫡 Subb'd

[@RobertoMusicHelp]

Thanks for the sub!