Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

SVG path animation is child’s play when you’re using a no-code tool 🎈 See for yourself 👇

SVGator

3,211 subscribers

204,690 views • 3 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 Comments

Mark Davis3 years ago

@round

PowerBeatsVR3 years ago

Get ready for a full-body VR workout that’s fun, fast, and intuitive — Play PowerBeatsVR (Now on Meta Quest) 🔥

Sakumi3 years ago

This is awesome

SVGator3 years ago

Thank you! 🙌

Romdhoni Sani | UIUX Designer3 years ago

Awesome

SVGator3 years ago

Ty!! 🙌

Luz De León3 years ago

OMG

Roger Higuerey3 years ago

👍

Tunde | UI/UX & Webflow3 years ago

@Somzy010

Favour Chukwuedo⚡️3 years ago

Would it be possible to create a Template Library where members of the community can share resources and templates? This could help provide a smoother onboarding experience for new users and drive adoption.

Graham Tucker2 years ago

*wipes drool off chin

Related Videos

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

213,366 views • 8 months ago

Rive’s code editor is a full IDE inside a design and animation tool

Rive’s code editor is a full IDE inside a design and animation tool

Guido Rosso

18,678 views • 5 months ago

Texturing a knife using substance Painter Wrap tool (paint along path) #gamedesign #Texturing #Material #Substancepainter #3d #Substance #gameart #Digital3D #digitalart #Animation #digitalart #art

Texturing a knife using substance Painter Wrap tool (paint along path) #gamedesign #Texturing #Material #Substancepainter #3d #Substance #gameart #Digital3D #digitalart #Animation #digitalart #art

Javad Rajabzade

48,725 views • 1 year ago

Lottie Creator is here! A powerful web-based Lottie animation tool. 🚀 🌟 Timeline & keyframes 🌟 SVG import 🌟 Animation presets 🌟 100,000+ Lottie animations & more Get started at today!

Lottie Creator is here! A powerful web-based Lottie animation tool. 🚀 🌟 Timeline & keyframes 🌟 SVG import 🌟 Animation presets 🌟 100,000+ Lottie animations & more Get started at today!

LottieFiles

85,920 views • 2 years ago

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,653 views • 1 year ago

😱 I just realized I never shared the svg tool I spent so much time on! I wanted to create a playground to help learn and discover how to write SVG code, which can be so funky! Remember when we learned physics in the sandbox? Yeah, like that.

😱 I just realized I never shared the svg tool I spent so much time on! I wanted to create a playground to help learn and discover how to write SVG code, which can be so funky! Remember when we learned physics in the sandbox? Yeah, like that.

Amelia Wattenberger 🪷

80,658 views • 2 years ago

See when you are relevant, unproblematic and true to yourself? Maris Racal is taking the Marian Rivera career path TRUST!!!

Sensitive content

See when you are relevant, unproblematic and true to yourself? Maris Racal is taking the Marian Rivera career path TRUST!!!

stephen ❤️‍🔥

652,663 views • 1 year ago

🎧 ChatGPT for music is here. I created a full song — lyrics, vocals, beat, edits — using just one tool. No studio. No gear. Just prompts. Step by step guide:👇

🎧 ChatGPT for music is here. I created a full song — lyrics, vocals, beat, edits — using just one tool. No studio. No gear. Just prompts. Step by step guide:👇

Rishabh

39,223 views • 11 months ago

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,139 views • 2 months ago

See for yourself how easy it is to create a couple of services using Laravel Herd 1.5.0 ❤️

See for yourself how easy it is to create a couple of services using Laravel Herd 1.5.0 ❤️

Marcel Pociot 🧪

58,065 views • 2 years ago

Public shaming is an effective tool for preventing children from walking down a dangerous path.

Public shaming is an effective tool for preventing children from walking down a dangerous path.

Joshua Haymes

174,835 views • 6 months ago

Hand-drawn signature, built with Motion ⊙ SVG paths w/ sequential timing + custom easing ⊙ Each stroke drawn using 𝚙𝚊𝚝𝚑𝙻𝚎𝚗𝚐𝚝𝚑 animation ⊙ Ghost layer underneath gives an ink-indent effect A personal touch that elevates your portfolio. Source code below. ⤵️

Hand-drawn signature, built with Motion ⊙ SVG paths w/ sequential timing + custom easing ⊙ Each stroke drawn using 𝚙𝚊𝚝𝚑𝙻𝚎𝚗𝚐𝚝𝚑 animation ⊙ Ghost layer underneath gives an ink-indent effect A personal touch that elevates your portfolio. Source code below. ⤵️

kian bazza

244,733 views • 4 months ago

Our PrizePicks for tonight 🏈 Sign up for PrizePicks using code OPTIC, and when you play $5, get $50 in free lineups 🙏

Our PrizePicks for tonight 🏈 Sign up for PrizePicks using code OPTIC, and when you play $5, get $50 in free lineups 🙏

OpTic

23,465 views • 7 months ago

Nuclear Throne is bringing that Big Dog energy. Play today and see for yourself:

Nuclear Throne is bringing that Big Dog energy. Play today and see for yourself:

Vlambeer

32,623 views • 3 months ago

All footage captured using a controller. Play it for yourself at Steam Next Fest on June 15.

All footage captured using a controller. Play it for yourself at Steam Next Fest on June 15.

Embers of the Uncrowned

12,026 views • 1 month ago

Feelin' good about PrizePicks for the weekend. Sign up for PrizePicks using code OPTIC, and when you play $5, get $50 in free lineups. PrizePicksGG

Feelin' good about PrizePicks for the weekend. Sign up for PrizePicks using code OPTIC, and when you play $5, get $50 in free lineups. PrizePicksGG

OpTic

22,525 views • 2 months ago

Watch Google’s new tool for trying on clothes, which can put what you’re considering right onto a photo of yourself, revealed at #GoogleIO:

Watch Google’s new tool for trying on clothes, which can put what you’re considering right onto a photo of yourself, revealed at #GoogleIO:

TechCrunch

45,459 views • 1 year ago

Country roads - when you play this song for someone w WVA DNA you’re gonna see tears #gobirds

Country roads - when you play this song for someone w WVA DNA you’re gonna see tears #gobirds

Whitney Cummings

161,731 views • 1 year ago

I built an app with Claude Opus 4.5, then animated it with this new tool I found... This new iOS design workflow let me animate a character for my onboarding. Here it is: 1. build the app using Claude Code within 2. entered image of my mascot into 3. copied animation code from there back into vibecode

I built an app with Claude Opus 4.5, then animated it with this new tool I found... This new iOS design workflow let me animate a character for my onboarding. Here it is: 1. build the app using Claude Code within 2. entered image of my mascot into 3. copied animation code from there back into vibecode

Emily Lambert

290,886 views • 6 months ago