SVG Animation With Text Tutorial | HTML CSS
ฝัง
- เผยแพร่เมื่อ 4 ธ.ค. 2018
- 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
~-~~-~~~-~~-~ - แนวปฏิบัติและการใช้ชีวิต
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.
Thanks for the update! Figma is constantly changing so I appreciate you writing the fix!
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!!
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.
Hi, if you choose "Center" instead of "Inside" or "Outside" in the stroke options, there is no issue with the mask.
Thank you
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.
Thanks for saving my time, yes methods in figma changed
Thank you so much for sharing!!! That's exactly what I was looking for.
thanks
i was losing my brain dude thanks
THANKS A LOT DUDE YOU SAVED MY DAY
Love this guy - so humble and excited about what he shares - so dope!
definitely!
Ikr!
Hello, I don’t see much chance, but could you upload the good files somewhere?
Whatever i do is no good…
Thank you!
Hey man, your enthusiasm / smile / excitement on the start of the video is contagious! I came here tensed but left with a smile!
I loved the simplicity of your explanations. Will check out more of your videos for sure!
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.
This took a while to process sorry about that! But this was really fun to make!
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!
Iam having trouble with the fill property.its not filling the svg as you did in the video pls help.
@@mustafaaur4019 same problem here
3d image hover css
th-cam.com/video/yyDey1Iid0c/w-d-xo.html
I write every single code and it didn't work can you help me sir ??
I love your enthusiasm. Keep doing a great job! Thanks for the tutorial
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.
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. (:
I've been binging on your videos the last couple of days and have learned a ton! Thanks!
That was amazing! Loved it.
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
little effort, big result - like watching your videos
Keep making videos! And smiling too 😁 Great work, thank you!
Its'cool, that's exactly i've been looking for
I love your energy! And the video was really helpful - imagine all the possibilities!
This is a fantastic introduction to SVG manipulation. I really appreciated this lesson, thanks so much for sharing.
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 !
I love the way you explain and make everything look so easy, excellent video!
I really love your enthousiasm and humor. Very useful video with lots of information. Thank you very much for posting this!
That is really amazing, thanks for bringing such great content, love your creativity :)
Finally!! This is how it's made.
Thank you so much!
Wow, your tutorial is really smooth and your reaction is so friendly,
Awesome animation effect! Thank you!
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
thanks for the lovely comment! Will do my best to post alot of videos! Feel free to share the video!
@@developedbyed how to make it responsive
Yaseen Shaik set width for svg in media-queries but I’m not sure will the amount of dots will stay the same
@@vladfreishmidt2707 & Yaseen Shaik : Setting width to a percentage (50%) makes it responsive without changing anything else.
@@wolfgangr.3268 That works!
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.
Beautiful work man! Thank You
Thanks Ed, this is really great. So many posibilities!
The first video to watch on your channel. Great one. Keep it up.
AAAAAAAAAAAAAAAAAAACKmed
What you do and what you did, for us, is just a miracle ! Thank you very very much ! Best regards from Paris
Your tuts are always worth watching
Appreciate it a lot. And changing the stroke linecap and linejoine worked perfect for me...
stroke-linecap="round"
stroke-linejoin="round"
I really enjoyed how you made everything fun, thanks for making this tutorial been looking for something like this
Its amazing you made such complex skill feels understandable, thank you so much !
Excellent. So fun!
Thanks Ed, you're the best!
Awesome tuturial. Simple, effective, creative, and useful.
I really enjoyed it . keep it going man! thumbs-up!!
Quality content. Really enjoying your videos.
more css and js effects please. Great work on this tutorial. I just subbed to your channel.
Thank you, works perfectly
Aweomse tutorial, thank you!
Always thank you for your great tutorials.
Love your tutorials! keep it up please!
Beautiful, absolutely beautiful
That looks so awesome! That’s for sharing!
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.
you just saved me 🥲🥲🥲
i've been trying so hard to learn svg and this amazing dude just made it so easy omg thank you so much
Excellent tutorial, and very creative idea. Thanks!
I Love your videos Dev Ed. Thank You so much.. Really appreciate your creativity.
Such a cool video!!
Thank you Ed!
I just love it😍
What a great thing i just learned , thank you so much :)
Hey, You are just awesome. Cool tutorial. Thanks a ton! Be Blessed! I used Inkscape for creating the svg.
Thank you Dev Ed... You are amazing💥
Great tutorial! keep it up your good work! Thank you
I've been confused about SVG animation forever, using hacks here and there. This is a very nice tutorial!
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!
ty
Wow how you can find it? Btw thank you very much!
THANKS!!!! finally it works!!!
Great, i have same problem too
Thanks!
Hello, I'm from Brazil and I'm addicted to your videos, I'm already a new subscriber. Thank you.
my man, always on point
It’s very nice of these guys to create videos for the viewer.
Amazing video! Really elegant and easy to implement design idea!
Hey Yo....Yours Is the most perfect understandable video i have seen. Please continue making such videos
Very informative. Thank you!
Brilliant DevEd
Love your videos .. its super helpful being a starter into web designing and development.. superb bro loads of love .. ❤️
This was awesome!
You are the absolute BEST!!!
Take love from heart. It's really amaging and finally I can do it thanks a lot bro
Bro u are sick 🔥🔥🔥
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. :)
I really can't get enough if your tutorials
Great video. Thank you 👍
I’m so glad I found your channel!
Thank you so much, you're help me a lot, because I wanna this animation for my own page, and you give this tutorial
Amazing video, thank you so much! :)
Thanks for this awesome video!
It was a very simple way yet cool result to animate a text. thumbs up :)
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 :)
You are my programming motivation 👨💻
Very helpful video! Thank you
For those who are having problems with figma and have only a single path. For me worked this:
1) Write the text, WITHOUT adding the stroke.
2)Right click and select Outline Stroke
3)Copy as SVG
You should have the right numbers of paths in this way :)
Yes but whats the point of doing that if we dont get stroke for animation.?..is there another way to get stroke?
Appreciate the vids, learning a ton!
You are freaking awesome maaannn!!!
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.
great tutorial
awesome video!
Thankyou so much, did the figma bit slightly different(newbie), absolutely amazing tho! did the code and boom! it worked. thankyou
This is great . Thank you
Well sir you’ve just won a subscriber for life!
this is awesome thanks very much
Interesting video. Your collab with web dev simplified got you a new viewer
Awesome video! 😍🔝
you are so cool i just love your videos keep going.
That was awesome i really like that
Thanks Ed
Great work. Thanks bro
Thx a lot, man. Youre amazing!!!