SVG Animation With Text Tutorial

SVG Animation With Text Tutorial | HTML CSS

Рет қаралды 577,655

5 жыл бұрын

Check out my courses and become more creative!
developedbyed.com
Today we are going to create an SVG animation using stroke dash array and stroke dash offset to create some really cool effects.
We only need HTML and CSS for this effect. You can create the shapes and texts with Figma, Adobe XD or Adobe Illustrator.
Let me know if you want to see more complex SVG animations with tools like bodymoving/lottie.
Try to get creative and apply the path animations to different kinds of texts, shapes,etc.
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
~-~~-~~~-~~-~
Follow my Twitter:
/ deved94
Please watch: "Should You Become A Software Engineer?"
• Video
~-~~-~~~-~~-~

Пікірлер: 818

@tomcatbuzz 5 жыл бұрын

It is appearing that using the methods in Figma from the video may have changed some for the output that is pasted into the html. I had a double set of values beginning with to with values inside. I commented the first set for testing and it works. So for anyone having an issue just examine your svg code and comment out the first set of code surrounded by . The second set beginning in path contains all letter paths. Good luck. And great video.

@developedbyed 5 жыл бұрын

Thanks for the update! Figma is constantly changing so I appreciate you writing the fix!

@austinlynum7112 5 жыл бұрын

You are a lifesaver!! I was just about to give up thinking @DevEd doesnt know what he is talking about lol. Glad I looked at the comments first!!

@jaygreg6329 5 жыл бұрын

I am absolutely loving your channel. I am a new subscriber by the way. But I feel the need to recommend that you look at what is happening with exporting SVGs from Figma now. For me it is giving me a single which means that I can not select individual child paths. I tried to work around this by exporting the letters one by one after getting the whole size and placing the paths on top of each other. I know that Figma changing this is not your fault but your video unfortunately does not address this. I am still working on a fix but I have other things that I need to do for now. If you can update this it would be great. Thanks! Great idea though and got me inspired. Keep up the great content.

@FrankWauters 5 жыл бұрын

Hi, if you choose "Center" instead of "Inside" or "Outside" in the stroke options, there is no issue with the mask.

@ekechkeidze745 5 жыл бұрын

Thank you

@chrismauerer 4 жыл бұрын

Love this guy - so humble and excited about what he shares - so dope!

@djsargex7777 4 жыл бұрын

definitely!

@andytataw5466 4 жыл бұрын

Ikr!

@renatokardos5953 4 ай бұрын

Hello, I don’t see much chance, but could you upload the good files somewhere? Whatever i do is no good… Thank you!

@AkashsinghSisodiya 4 жыл бұрын

Hey man, your enthusiasm / smile / excitement on the start of the video is contagious! I came here tensed but left with a smile!

@rajivonarx5958 4 жыл бұрын

For those of you who get a single path after following this video, here is a solution I've found (I'm a complete noob at this, took me a full day to solve and wanted to share my workaround). Do not remove the fill color like he did, removing fill and adding strokes then outlining then copying as svg always gave me a single path. Something like this happens: Instead, 1. keep the fill color 2. don't add strokes (we will do it manually) 3. get outline stroke of filled text (no strokes!) 4. copy as svg you should get remove the fill property and add stroke="white" & stroke-width="5" to the path tags. The paths should look like It is important that you remove the fill property or else the fill animation at the end won't work. I hope this helps.

@VIKASSAINI007 4 жыл бұрын

Thanks for saving my time, yes methods in figma changed

@virginietrubiano3062 4 жыл бұрын

Thank you so much for sharing!!! That's exactly what I was looking for.

@umitatak5396 4 жыл бұрын

thanks

@Raspace 4 жыл бұрын

i was losing my brain dude thanks

@sriramrepaka7003 4 жыл бұрын

THANKS A LOT DUDE YOU SAVED MY DAY

@ammarahmed84 4 жыл бұрын

I love how you explain this stuff. I’ve been watching so many web dev videos and this is by far the best. This is the first video of yours that I watched and instant subscribe. You deserve success.

@josantiago109 5 жыл бұрын

I loved the simplicity of your explanations. Will check out more of your videos for sure!

@asdf09er 4 жыл бұрын

I like that I learn things you aren’t even trying to teach, like how to perfectly center the text (especially for times you don’t know the text width). Really enjoying your videos.

@developedbyed 5 жыл бұрын

This took a while to process sorry about that! But this was really fun to make!

@jaygreg6329 5 жыл бұрын

I am really struggling with using Figma. I left a comment earlier in the pinned comment at the top of this video. It is the first time that I ever tried it and I am honestly less than impressed with it. That is not your fault I understand that and I also recognize that it is currently an industry standard but the fact is the more I try to figure out how to reproduce this tutorial using it I have seen strange choices that Figma made. When looking more closely at the way that Figma compiles it SVGs it seems that when dealing with text elements the stokes are not actually strokes but instead are fills. If you change the HTML from stroke to fill in what is supposed to be a stroke a strange grid-like pattern appears. I am new to a lot of these things but am learning very quickly from constant focus on JS and React. So, forgive my lack of knowledge in this particular instance. What I am wondering is, is there a way to cause the fill to render like you did with the stroke. I am trying to find a solution because I would love to use this effect in my current project but Figma's compiling of its SVGs has caused me to waste a day. But it is not a total loss because I have learned quite a lot about SVGs so thanks for the tutorial anyways. Anyone that wants to point me in the right direction I offer a thanks in advance. Thanks!

@mustafaaur4019 4 жыл бұрын

Iam having trouble with the fill property.its not filling the svg as you did in the video pls help.

@kovevideo 4 жыл бұрын

@@mustafaaur4019 same problem here

@suzamuidesign 4 жыл бұрын

3d image hover css kzfaq.info/get/bejne/r990mNxirs_IYJc.html

@DebasishDas-vp5dg 4 жыл бұрын

I write every single code and it didn't work can you help me sir ??

@zygimantasjasiunas5240 5 жыл бұрын

I love your enthusiasm. Keep doing a great job! Thanks for the tutorial

@jonahbutler9079 4 жыл бұрын

Hey dave ed. Thanks for this tutorial! I've often come across these and have often wondered how this little piece of magic works. I never really took the time to do the research, until one day this appeared in my feed. Thanks for unraveling the mystery in such a great format. Your enthusiasm for teaching and programming is really second to none. (:

@4MXW 2 жыл бұрын

so much inspiration and excitement! I'm not only inspired but I also lost my fear to these svg types of animations. Tysm! Keep it up. Much love

@wpbites6722 5 жыл бұрын

That was amazing! Loved it.

@stn3042 4 жыл бұрын

little effort, big result - like watching your videos

@joyahmed1269 3 жыл бұрын

Appreciate it a lot. And changing the stroke linecap and linejoine worked perfect for me... stroke-linecap="round" stroke-linejoin="round"

@kendalljones99 4 жыл бұрын

I've been binging on your videos the last couple of days and have learned a ton! Thanks!

@Drzfinest929 4 жыл бұрын

Loved this video, your excitement alone throughout the video made me enjoy it even more. Thank you for this wonderful video! Going to use it for my landing page group project !

@vanjacvetkovic3788 5 жыл бұрын

Keep making videos! And smiling too 😁 Great work, thank you!

@RC-bl2pm 4 жыл бұрын

This is a fantastic introduction to SVG manipulation. I really appreciated this lesson, thanks so much for sharing.

@m75172 4 жыл бұрын

I love your energy! And the video was really helpful - imagine all the possibilities!

@maresolaris 4 жыл бұрын

I really love your enthousiasm and humor. Very useful video with lots of information. Thank you very much for posting this!

@abhishek_k7 5 жыл бұрын

Awesome animation effect! Thank you!

@pauloabraga2 Жыл бұрын

What you do and what you did, for us, is just a miracle ! Thank you very very much ! Best regards from Paris

@japsimransingh9933 4 жыл бұрын

Your tuts are always worth watching

@karmahchannel 5 жыл бұрын

Its'cool, that's exactly i've been looking for

@23Miniatures 4 жыл бұрын

Wow, your tutorial is really smooth and your reaction is so friendly,

@shahbokhari 5 жыл бұрын

Beautiful work man! Thank You

@tom5890 4 жыл бұрын

I've been confused about SVG animation forever, using hacks here and there. This is a very nice tutorial!

@pranavchandra1662 5 жыл бұрын

That is really amazing, thanks for bringing such great content, love your creativity :)

@stylesg7818 5 жыл бұрын

Finally!! This is how it's made. Thank you so much!

@unknown_channel_name 4 жыл бұрын

That was really cool. As I am new to web designing, I really enjoy your content. It helps a lot to me in different aspects. Thanks for making such awesome tutorials.

@DanielRodriguez-iv5rw 2 ай бұрын

I love the way you explain and make everything look so easy, excellent video!

@heavenprado2538 3 жыл бұрын

i've been trying so hard to learn svg and this amazing dude just made it so easy omg thank you so much

@trustjamin3023 4 жыл бұрын

I really enjoyed how you made everything fun, thanks for making this tutorial been looking for something like this

@Sausty 3 жыл бұрын

Thanks Ed, this is really great. So many posibilities!

@dragosdesign4563 4 жыл бұрын

more css and js effects please. Great work on this tutorial. I just subbed to your channel.

@nicksparks3543 4 жыл бұрын

Amazing, I didn't quite get the 'no-fill' white outline right in figma, but I followed your code straight through....and it worked I am amazed that something that simple can look so classy! Thankyou my lovely friend on the internet. :)

@marianagrnk 4 жыл бұрын

10:55 "I was garbage ok" hahahah the best, loved the tutorial btw! :)

@agk2011 4 жыл бұрын

The first video to watch on your channel. Great one. Keep it up.

@TestAccount-uu9vp 4 жыл бұрын

AAAAAAAAAAAAAAAAAAACKmed

@resty1672 3 жыл бұрын

Its amazing you made such complex skill feels understandable, thank you so much !

@isaacdaniel9180 3 жыл бұрын

Quality content. Really enjoying your videos.

@AndresRodriguez-wu6nj 4 жыл бұрын

Great video! I've been looking to learn how to do this for quite a bit but never found a resource as good as this one. Also, another way to center the content of the body using flexbox: body { width: 100%; height: 100vh; background-color: rgb(32, 35, 48); display: flex; justify-content: center; align-items: center; } This way you wouldn't need to style the SVG's position :)

@lachnr0ll 2 жыл бұрын

Awesome tuturial. Simple, effective, creative, and useful.

@evakuator8118 5 жыл бұрын

Jesus Christ, that's what I've been looking for like years. I just stumbled upon this video, and finally here it is. It's super cool, subscribed. Waiting for more videos to come, really hyped up. Your channel must blow up, this is some quality content. Now, need to watch your other videos, which I'm about to do. Sorry for my english, I am not a native speaker, not even a good speaker. Again, thanks for the video

@developedbyed 5 жыл бұрын

thanks for the lovely comment! Will do my best to post alot of videos! Feel free to share the video!

@yaseenshaik2682 4 жыл бұрын

@@developedbyed how to make it responsive

@vladfreishmidt2707 4 жыл бұрын

Yaseen Shaik set width for svg in media-queries but I’m not sure will the amount of dots will stay the same

@wolfgangr.3268 4 жыл бұрын

@@vladfreishmidt2707 & Yaseen Shaik : Setting width to a percentage (50%) makes it responsive without changing anything else.

@paulsonstechpoint773 4 жыл бұрын

@@wolfgangr.3268 That works!

@tam2000k2 4 жыл бұрын

Beautiful, absolutely beautiful

@gazzzou 5 жыл бұрын

Love your tutorials! keep it up please!

@johnyacoub2290 4 жыл бұрын

I really enjoyed it . keep it going man! thumbs-up!!

@welingtonwel8799 3 жыл бұрын

Hello, I'm from Brazil and I'm addicted to your videos, I'm already a new subscriber. Thank you.

@avashurov 2 жыл бұрын

That looks so awesome! That’s for sharing!

@chans9055 4 жыл бұрын

Always thank you for your great tutorials.

@sparrowestes962 2 жыл бұрын

Excellent. So fun!

@DDoesT 4 жыл бұрын

I’m so glad I found your channel!

@cintron3d 4 жыл бұрын

Excellent tutorial, and very creative idea. Thanks!

@jugaltiwari5908 4 жыл бұрын

I Love your videos Dev Ed. Thank You so much.. Really appreciate your creativity.

@mohammedmuizz4825 4 жыл бұрын

Love your videos .. its super helpful being a starter into web designing and development.. superb bro loads of love .. ❤️

@allagligora5534 9 ай бұрын

Thanks Ed, you're the best!

@silverdaymon8786 5 жыл бұрын

If you have problem applying the stroke-dasharray, just put the code at the bottom of the paths in the into the html file. It becomes: 1 2 to 8 And edit: #logo path to: #logo > path To not select paths into mask node. (If not you will get 16 path instead of 8). Into js and css file. Hope it helps!

@Banditik55 4 жыл бұрын

@bayufajariyanto 4 жыл бұрын

Wow how you can find it? Btw thank you very much!

@kimmiekim8783 4 жыл бұрын

THANKS!!!! finally it works!!!

@machsunssr2257 4 жыл бұрын

Great, i have same problem too

@Art_and_Flavour 4 жыл бұрын

Thanks!

@anasyunus3389 4 жыл бұрын

Hey Yo....Yours Is the most perfect understandable video i have seen. Please continue making such videos

@mahdiazizi6342 4 жыл бұрын

Bro u are sick 🔥🔥🔥

@d3v431 2 жыл бұрын

bro. I love you so much. After struggling with Gsap draw svg plugin, i was trying to find easy way out.. then i found you .. damn this is cool.

@user-qj1wu4jt3r 4 жыл бұрын

You can use stroke-dasharray and stroke-dashoffset properties with percentages to avoid javascript. Also you can use stroke-linecap with different values to remove gaps from edges of characters.

@opeyemialatishe1944 Жыл бұрын

you just saved me 🥲🥲🥲

@breckiam 2 жыл бұрын

Aweomse tutorial, thank you!

@kermitthefrog5885 4 жыл бұрын

It was a very simple way yet cool result to animate a text. thumbs up :)

@alexlegoG 2 жыл бұрын

Amazing video! Really elegant and easy to implement design idea!

@Ponk_80 5 ай бұрын

It’s very nice of these guys to create videos for the viewer.

@alistaw1866 2 жыл бұрын

I really can't get enough if your tutorials

@dslas4ever 4 жыл бұрын

Great tutorial! keep it up your good work! Thank you

@jaysenb 2 жыл бұрын

my man, always on point

@atiqurrahman3887 4 жыл бұрын

Take love from heart. It's really amaging and finally I can do it thanks a lot bro

@soulaimane3729 4 жыл бұрын

What a great thing i just learned , thank you so much :)

@pabloenina 9 ай бұрын

Thank you, works perfectly

@soultouchingsongs 4 жыл бұрын

Hey, You are just awesome. Cool tutorial. Thanks a ton! Be Blessed! I used Inkscape for creating the svg.

@oleersoy6547 2 жыл бұрын

Such a cool video!!

@AymanLkhawa 4 жыл бұрын

YOU'RE THE BEST WEB DEV IN THE WORLDDDDDDD !!

@Al_Gonzo 4 жыл бұрын

Interesting video. Your collab with web dev simplified got you a new viewer

@TPc0 4 жыл бұрын

Well sir you’ve just won a subscriber for life!

@saumyashukla5013 4 жыл бұрын

Thank you Dev Ed... You are amazing💥

@luis96xd 3 жыл бұрын

Wow, this was an amazing video, I loved the effect! 🤩 It worked for me, Thank you so much! 😄👏 On the other hand, Figma is an Amazing tool for Web design 😱

@alanchen4257 11 ай бұрын

I just love it😍

@Chocokaylarobin 4 жыл бұрын

You are the absolute BEST!!!

@khaledoghli1894 5 жыл бұрын

Man i love the way you talk with video .. 💙

@necrobahamut 3 жыл бұрын

This was awesome!

@nocturno7887 3 жыл бұрын

Thank you Ed!

@TashriqueAhmed 4 жыл бұрын

You are freaking awesome maaannn!!!

@nicksparks3543 4 жыл бұрын

Thankyou so much, did the figma bit slightly different(newbie), absolutely amazing tho! did the code and boom! it worked. thankyou

@DavidElstob73 4 жыл бұрын

My fav happy KZfaq coder ;)

@arvandit3280 5 жыл бұрын

great tutorial

@andrewmcwilliam1764 4 жыл бұрын

You, sir, are a legend.

@CreativeSequence 4 жыл бұрын

That was awesome i really like that

@nihaltiwari2479 4 жыл бұрын

you are so cool i just love your videos keep going.

@extremespartan117 4 жыл бұрын

Very informative. Thank you!

@fabiof4946 5 жыл бұрын

I want to see more complex animations! =D

@shikhershukla7650 2 жыл бұрын

Hey very nice tutorial, just wanted to add that we can add those styles directly form javascript after DOM loads with for loop so it works for any text you add.