SVG Line Animation Tutorial with CSS & Other Fun Stuff

Подписаться 1,1 млн

Просмотров 311 тыс.

50% 1

goo.gl/BBse40 - Design + Code a Professional Android App from Scratch
Project Files: www.designcourse.com/videos/sv... - Learn how to do an SVG line animation using SVG paths with CSS.
Follow us:
Facebook: / designcourses
Twitter: / designcoursecom
Google+: plus.google.com/+DesignCourse
Dribbble: dribbble.com/designcourse
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

26 апр 2014

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 148

@GuillermoValleCosmos 8 лет назад

I liked how you actually fail so many times in the video, but then fix it. It really shows the actual process.

@basalduat 8 лет назад

AI user since 1988. Dear DesignCourse, a fundamental concept in AI is to use the minimum number of control points for all curves. It's common practice to use lots of control points when you are "creating." However, when the creative process is done, go back and remove as many control points as you can aesthetically justify. The problem you are having has nothing to do with the "linewidth." Good luck to you.

@Kuwandi 7 лет назад

Go to : Path and simplify, yup

@Oscar-mp6hw 8 лет назад

Thank you so much. This will truly come in handy. You got a good sense of humor as well. Keep it up. Subscribed.

@andromedae-maxima 8 лет назад

You just got me into this whole svg stuff, super cool tutorial :)

@benhait2265 8 лет назад

This video is very well done! Genuine skill here! Thank you Design Course!

@LeandroLima81 5 лет назад

Man! You guys cover everything! ♥️

@Kuwandi 7 лет назад

This , for me was the first time an eye opener, the fact that you worked through a lot of kinks, was the BEST tutorial I can watch, that was great, goes to prove that trial and error is a great form of learning...up to this point I would have never grasped the SVG animations... Awwwrrrrrzzome**** < >

@ScottyFlansburg 9 лет назад

Nice tute B, easy to follow too; and fun.

@darshandev1754 3 года назад

Its great to see your 7 year old videos, thats how long you gotta keep at it :)

@mangasprai 9 лет назад

looks so easy! Gotta learn svg as fast as possible.

@aritchanda205 7 лет назад

soooo... did u learn it?

@vyachc 6 лет назад

he too cool for answer)

@FluidFlyer 8 лет назад

Great lesson! Super easy to follow.

@thehemmat 8 лет назад

you are awesome, i have been looking for an easy tut for using SVG in action .. thanks

@boyfanfootballcj 10 лет назад

Really appreciate your helpful tutorial videos! Keep it up!

@EPurpl3 7 лет назад

well, this is the right moment to learn some SVG tricks, even jQuery 4 is increasing the SVG support. very good tutorial, thanks.

@EstebanBarrientos 8 лет назад

Great tutorial, very helpful, thanks a lot!

@slimhamdi 7 лет назад

Thanks a lot Mate for this great tutorial !

@Dornaden 9 лет назад

It worked, so im liking it!

@aci25tv 9 лет назад

Great video! learned a lot. Thank you very much!

@scienceblossom6197 4 года назад

I don't believe I learned so much from this!! :D THANKS!

@MGBCTV 8 лет назад

Very cool! Nice way to go! I do love it..! Congrats.

@krunal6988 10 лет назад

Awesome Tutorial.. Thanks!!

@franktielemans6624 7 лет назад

to scale up the artboard much faster and more precise you could first select the artwork, go to the object menu > artboards > fit to selected art

@McGavel1 8 лет назад

Very cool. Thanks for the info. I want to learn how to use this skill.

@fabstudioz2329 7 лет назад

Great job guy!! Love it!!

@verbindung 10 лет назад

wow it was really a good decision to go down the javascript path :) thx for that

@jesuscmd 9 лет назад

Awesome video, thank you!!!

@artistjohnwoolley 9 лет назад

Finally been looking for this all day!

@artistjohnwoolley 9 лет назад

artistjohnwoolley I don't know how coding works though so this just got a lot harder

@artistjohnwoolley 9 лет назад

artistjohnwoolley Is there a way to do all this in adobe programs without code?

@KHAN-dg3np 7 лет назад

please make a full tutorial for beginners about SVG with all of basics

@ManMadeToons 9 лет назад

Woahhhh this is awesome, thanks man! This is why i am not going to university, pure knowledge right here.

@jdoubla 6 лет назад

Great course. Learned a lot. :)

@jarikexe 7 лет назад

Cool tutorial thanks !!!!

@Umairkhan-ib1ws 8 лет назад

thanks alot! Design Course thumps up for you.

@jurjenyoutub 10 лет назад

Damm your a hero! realy love your videos and im sure you will be bigg if you continue this way

@t-h787 7 лет назад

excellent tutorial

@arturluisoliveira 6 лет назад

Thanks for the video. If you change the layer name in illustrator it gives you an ID with that name in SVG.

@afrosoul4eva 3 года назад

wow that was epic. Great video

@IllusionSector 8 лет назад

8:58 You don't have to fit the art board manually; just go *Object -> Artboards -> Fit to Artwork Bounds*

@user-bx9pj9lc4x 3 года назад

Nice!

@IsaacAsante17 9 лет назад

You're the man! This is awesome! Great video... I "Liked" it... Anyone who dislikes this is funny.

@emmamamedova5374 7 лет назад

Good Tutorial Thanks

@techgamer1333 5 лет назад

Hi.. love this channel❤❤

@oderupaperu8964 10 лет назад

Very helpful tutorial! Thanks... Could you also teach us how to put shadow on that?

@b.m.rafiulalam2020 8 лет назад

Just awesome!

@ar_buraq 7 лет назад

Thanks really helpful. I have one doubt, how to make the color fill automatically after the svg animation is completed? ( no hover, just the color appears after the lines are drawn) Please do reply, I'm stuck with my project.

@mrVandecko 8 лет назад

Improbably, thankYou

@christianilluzzi 9 лет назад

hey man great tutorial is there a way you can do the transition for the stroke?

@herrera29 10 лет назад

Hello, thanks for this video, I've been doing this as an exercise but on firefox doesn't work properly

@abderance 9 лет назад

bless you mate ... ☺︎

@arinawr5418 8 лет назад

ur amazing!!

@rssoo9487 7 лет назад

Thanx a lot

@seolong3326 9 лет назад

Awesome!

@Shahzaib.r 7 лет назад

LOL Man you are so Fun and awesome :D

@colettepitamba8623 10 лет назад

Thanks. Any way to make the background of the image transparent to match the background color or pattern of the page?

@davidbd 9 лет назад

Damn this is great thank you for this one :-)

@OdoomBrothers 9 лет назад

after watching this definitely going to be using svg in my web designs. on another note, Spent hours trying to work SVG file with blender : but after hours upon hours i realised it was was imported but as a tiny size.

@gregrosier6482 9 лет назад

Great video

@TheVikingmythology 9 лет назад

thanks

@pripun1457 8 лет назад

Awesome.

@ThanosKalegias 9 лет назад

Very nice Tutorial..! Thanks.

@AnatolyKhalizev 9 лет назад

It was cool!

@garrettnorvell 9 лет назад

great tutorial! Is it possible to do that in Edge Animate? Thanks!

@gracemonday1642 7 лет назад

Nice one

@romicaaaaaaaa 8 лет назад

bless you!

@nikhilmn 8 лет назад

Bro thanQu Grate

@vishnususeel 8 лет назад

grate TUT

@shuhratmahkamov6648 6 лет назад

Thanks for teaching sir. Can I use Photoshop instead of AI?

@plab48 6 лет назад

I can't get the logo stroke to change color (instead of the fill color changing) with a hover, after the dash-array renders. Any suggestions?

@user-ju4pp2oo2n 9 лет назад

Great! but i hope have a software can do this effect? did you know??

@ChangeYourLifeForever 9 лет назад

merci

@DBLCreations 7 лет назад

This is sooo cool indeed :-D i subbed and liked! :-D

@pixelbasedlifeforms 7 лет назад

what if I have a complex line (path) animation that I already prepared in After Effects? Is it possible do svg animation with that? Can you make another tutorial for that.

@meharmeek 8 лет назад

I have created logo in illustrator I follow every steps as shows in video but it doesn't work . Please give your suggestion ...

@varunemani 9 лет назад

Thanks, sweet logo animation. By the way what code editor are u using?

@zephyrus.9 8 лет назад

+Varun Mani sublime

@samdeacon7910 8 лет назад

amazing :)

@crankplay 8 лет назад

Nice Tutorial! Can you please tell me how a super simple fade-in from none to #color works? I just don't get it right lol

@SchnoArts 9 лет назад

I might be late! but can you turn the sag into a working link? or can that not happen since its embedded ?

@sramosquiz 8 лет назад

I love ❤

@boskoivic 8 лет назад

Not Found The requested URL /vid_src/src_project_.zip was not found on this server.

@matthewhenderson4100 8 лет назад

Great tutorial, but this isn't working for in in IE 11 or Edge. Is there a way to make this work?

@juanete2402 8 лет назад

nice video, how can i do to make this functional in Internet Explorer, it just show the image but not the animation... thanks

@abo2lhish 8 лет назад

Hello Dear, Could you please tell how can i do this on a word like "Creative" let's say the alphabets are attached to each others no space between the alphabets ? Best Regards, Hisham

@dianasmarandache7849 8 лет назад

Hi. I want to make my logo fade to a fill colour after the animation ends. How can I do that? Many thanks. :)

@mananshah5375 7 лет назад

I am not able to find the file in this website...can someone help me in finding it !!! Thanks in Advance :)

@mbtiscience5206 8 лет назад

Thank you! I got it! But how can i animate SVG with Scrolling Activated??????????????????

@TheJhonycertz 5 лет назад

how i can animate the fill background as a stroke lines?

@VR_Layno 3 года назад

Would love to add a few tips, less nodes/points the more the vector will turn out smooth.

@Fclvlm 9 лет назад

If i want start animation only on viewport?

@jojomendez2377 8 лет назад

for some reason the other webkits, such as animation: isnt working for internet explorer 11, and edge either.

@Amer1cann1nja 8 лет назад

+jojo mendez both those browsers r trash

@SuzukiMx184 7 лет назад

Hi guys - I'm trying to take my logo I have turned into an SVG using this tutorial and put it on my wordpress site to become interactive (a thin vertical line would lead away from the logo and drop down the page which would act as a border for my menu). I'm not a web designer (I study architecture) but know illustrator pretty well and have been messing about in wordpress and gradually getting the grips with it. Could somebody send me in the right tutorial wise in terms of how I can take my animated logo and put it onto my website please?

@WhoDatBoy0345 9 лет назад

Does anyone know how to make timers and such? I have more lines but i want some of em delayed but i dont know how to do it. Could someone please help me?

@Makwayne 5 лет назад

how can i do this to a line drawing? coz im unable to add stroke to it.

@simonpetersen388 8 лет назад

What about autoprefixer for this tutorial?

@ForeverBestPlaylist 9 лет назад

does this work in IE10+

@juicypopcookie 7 лет назад

I can't view the SVG code. Evey time I click SVG code it keeps saying my "file name", "directory name" or "disk area tag syntax error" is wrong :(

@shop51de64 7 лет назад

Thank You Very Much, God Bless You. The Link To Your Project Files are only linking to Design Course, if you clould update this to a downloadable *.zip File, it would be so "God Bless You" :) Yours Sincerely ET

@IllusionSector 8 лет назад

3:50 Gesundheit.

@dausanstewart2933 9 лет назад

Can some one link me the basic structure html code he used in this video?

@stephaniesleiman6732 9 лет назад

How do I get this to work in Firefox and IE?! Someone please help me

@nightwish_haj8668 7 лет назад

Can u make it, so it will fill out itself after it's done? :P

@RinatYouldashbaev 9 лет назад

Useful tutorial! But how to make an image appear after animation ends? I mean the following scenario: SVG-line ended shape of a house and after that an image of that house fades in.

@goatsie83 9 лет назад

I just had the same idea. What you need to do is make a new animation, to fill the logo @-webkit-keyframes filling{ from{whatevs} to{whatevs} } and you add this animation to the class/id desired. Be sure to add a delay = duration of your stroke animation :)

@P8860 9 лет назад

Is there a way to get this working on firefox?

@birkhansonkan4236 9 лет назад

***** P8860 For mozilla you have to add the prefix "-moz-" (without the quotes) before the keyframes dash! Example: @-moz-keyframes dash { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } } I dont know the prefix for IE but if you know that you could make it work with its own prefix!

@IsaacAsante17 9 лет назад

Birkhan Sonkan This is still not working for me for Firefox... Any solution?