SVG wave animation - Two different ways

No CodePen for this ?

Thank you Sir !

sweet zelda shirt. triforce hype 😊

Really enjoyed the whole popdog card animation !!! Learnt about the keyframes, pulse animation and what not. GR8 work man.

Anyone have performance issues in Safari with this approach of animating clipPath?

Great skill sharing, Kevin :)

How are you copying the SVG into Visual Studio Code from Adobe Illustrator?

I mean there is a reason you are known as the king of css

Thank you Kevin for this amazing tutorial. Do you know where can I find the resources used in this video?

I accidentally made the SVG with 3 waves, so I had to redo the math, which helped me understand things better if making it responsive: the width of the SVG is 200% of the .card width, so it's 600px wide. Translating -50% makes it move half of that (-300px) which is wrong with 3 waves. Moving it a third (-200px or -33%) made it work. Change the card width to a responsive unit (percent, viewport unit etc) and you've got a responsive effect. Also, SVG is pronounced Sh-VIG. (Or at least should be.)

I prefer a slightly different solution wigDOTpl ;)

Nice shirt Bro

really enjoy this video. May I ask where I can download the source file? thanks.

What is the content of the original svg file that got copy into the wave.html? It's hard to follow when we don't have that file.

Hello Kevin, ty for the video. Can you please tell us what's your vscode theme?

Hi guys, does anyone have links to resources on how to create a web app, add plugin functionality and ability for devs to develop plugins for it? Like how wordpress has it's plugins OR shopify & it's plugin. Thanks

Thank you Kevin you make it so clear. It's a pleasure to learn from you.

can you share your vscode settings

Thank youuuu

Hey Kevin, please make a tutorial in InstaFeed.js or something similar to make an Instagram feed widget on HTML websites. There are tons of videos on how to do it in Wordpress. Please teach me how to do it in HTML.

This channel is special to me. Nobody else is exploring these super-interesting, obscure web corners.

Could you make a tutorial about the canva home page does

Keep up the good work my dude. Love your vids.

Where are you from?

I love the content you cover on this channel! SVG animations are something I am trying to level up on at the moment, thx for sharing. 🔥

Amazing Tutorial! You are so awesome Kevin!!!!!

I've got that shirt! What did you think of the hyrule warriors announcement?

You always come up with good tutorials.

finally

Pretty good content, but please try to record in a single shot, even if it takes multiple attempts to get right, rather than multiple shots, and then edit in a way that will break the overall coherency

Thursday is tomorrow and I can't wait :D Great work btw! :D

actualy what I did is that I maked the background div of the card have a background-image and a background-color at the same time and then adjusting the position of the background-image without needing to use the img tag ?

Great, but it all doesn’t work on mobile devices!?

Great video.

This is the best channel for CSS hands down. Great work!

SVG is so under rated.

Great 👌... Awesome 👍