Loading video...

Video Failed to Load

Go Home

Interactive SVG Animations is now live! Everything I know about SVGs, distilled into five modules covering everything from syntax, advanced SVG features, peformance characteristics and more! You can preview the first lesson right here (desktop-only atm!)

177,334 views • 1 year ago •via X (Twitter)

11 Comments

nanda's profile picture
nanda1 year ago

The course is built on a bespoke learning platform that has visuals and interactivity at its core. Each lesson comes with various visuals that change with the text and animations that respond to your input:

nanda's profile picture
nanda1 year ago

Each lesson also comes with interactive sandboxes that let you apply the topic we just covered in code. In one exercise, we animate a chart from (h/t to @tcosta_co and @brotzky_ here):

nanda's profile picture
nanda1 year ago

You can get the course for $119 today and get full access to all the modules right away! The price will jump to $199 USD come the new year.

Anima's profile picture
Anima1 year ago

📢It is live! @figma design to @MUI_hq or @AntDesignUI "Whether your design is well organized or a bit chaotic, using standard components or none, Anima takes it all and translates it into high-quality #MUI or #AntDesign code."-->

T. Costa's profile picture
T. Costa1 year ago

Unreal! Congrats on the launch 🖤

nusu's profile picture
nusu1 year ago

Amazing stuff, insta-buy!

Brotzky's profile picture
Brotzky1 year ago

Amazing <3

James Clements's profile picture
James Clements1 year ago

🥂

Gustav Ekerot's profile picture
Gustav Ekerot1 year ago

great stuff! can't wait to dig into the animation part

Jimmy Lee's profile picture
Jimmy Lee1 year ago

Excellent stuff!!

Andrew Schmelyun's profile picture
Andrew Schmelyun1 year ago

Working with svgs has always been like black magic, this is going to be an instant buy

Related Videos

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,348 views • 3 months ago