Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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!)

nandafyi's profile picture

nanda

25,234 subscribers

177,334 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von nanda
nandavor 1 Jahr

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:

Profilbild von nanda
nandavor 1 Jahr

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):

Profilbild von nanda
nandavor 1 Jahr

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.

Profilbild von Anima
Animavor 1 Jahr

📢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."-->

Profilbild von T. Costa
T. Costavor 1 Jahr

Unreal! Congrats on the launch 🖤

Profilbild von nusu
nusuvor 1 Jahr

Amazing stuff, insta-buy!

Profilbild von Brotzky
Brotzkyvor 1 Jahr

Amazing <3

Profilbild von James Clements
James Clementsvor 1 Jahr

🥂

Profilbild von Gustav Ekerot
Gustav Ekerotvor 1 Jahr

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

Profilbild von Jimmy Lee
Jimmy Leevor 1 Jahr

Excellent stuff!!

Profilbild von Andrew Schmelyun
Andrew Schmelyunvor 1 Jahr

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

Ähnliche Videos

The next evolution of Hermes Agent is here! Introducing Hermes Desktop: everything you love about Hermes, now native on your machine. First demoed in Jensen's GTC keynote, it's now in public preview.
1:18

The next evolution of Hermes Agent is here! Introducing Hermes Desktop: everything you love about Hermes, now native on your machine. First demoed in Jensen's GTC keynote, it's now in public preview.

Nous Research

5,862,659 Aufrufe • vor 2 Monaten

MiroMiro is live! 🥳 I built a Chrome extension that extracts everything from any website in one click. • Colors and full palettes • Fonts • Images, icons, SVGs • Lottie animations • CSS styles No more opening DevTools. No more saving assets one by one. Just click, see everything, download what you need. Try it free →
0:49

MiroMiro is live! 🥳 I built a Chrome extension that extracts everything from any website in one click. • Colors and full palettes • Fonts • Images, icons, SVGs • Lottie animations • CSS styles No more opening DevTools. No more saving assets one by one. Just click, see everything, download what you need. Try it free →

Soraia

2,350,292 Aufrufe • vor 7 Monaten

How much do you know about Ledger Live? Did you know that you can buy, sell, stake, and swap your assets via Ledger Live, easily & securely? Not sure? Or maybe you already know but want to learn more? Either way, you’re in the right place. Let's walk through everything you can do through Ledger Live, and how to get started with these features.
6:00

How much do you know about Ledger Live? Did you know that you can buy, sell, stake, and swap your assets via Ledger Live, easily & securely? Not sure? Or maybe you already know but want to learn more? Either way, you’re in the right place. Let's walk through everything you can do through Ledger Live, and how to get started with these features.

Ledger

20,689 Aufrufe • vor 1 Jahr

Everything you NEED to know about the #FIFAClubWorldCup2025 is right here. ⚽ 📲 Catch the action weekly with #KaWeekie from UGX 14K. Dial *206# now to activate. #FootbALLOnDStv
1:30

Everything you NEED to know about the #FIFAClubWorldCup2025 is right here. ⚽ 📲 Catch the action weekly with #KaWeekie from UGX 14K. Dial *206# now to activate. #FootbALLOnDStv

DStv Uganda

209,830 Aufrufe • vor 1 Jahr

You can simply ask Grok “What’s the weather?” and it will use your current location to fetch detailed conditions and future forecasts, telling you everything you need to know about right now and the hours ahead Grok Voice mode is the most advanced option available right now, paired with real-time web search to help you handle live, real-world situations as they happen
0:23

You can simply ask Grok “What’s the weather?” and it will use your current location to fetch detailed conditions and future forecasts, telling you everything you need to know about right now and the hours ahead Grok Voice mode is the most advanced option available right now, paired with real-time web search to help you handle live, real-world situations as they happen

X Freeze

14,231 Aufrufe • vor 6 Monaten

Jail call of Lil Durk speaking with DoeBoy about NBA YoungBoy and everything going on in the rap game and streets right now. Also talks about what he been doing to pass time "You know I can't do nothing from in here. They watching everything." "He not even slime."
0:55

Jail call of Lil Durk speaking with DoeBoy about NBA YoungBoy and everything going on in the rap game and streets right now. Also talks about what he been doing to pass time "You know I can't do nothing from in here. They watching everything." "He not even slime."

Ducked🦅

51,916 Aufrufe • vor 19 Tagen

Yet another Democrat who doesn't know the first thing about trade and economic policy is now claiming that the GDP numbers show just how "bad" everything is. Dumbest people in government right here ladies and gentlemen.
1:29

Yet another Democrat who doesn't know the first thing about trade and economic policy is now claiming that the GDP numbers show just how "bad" everything is. Dumbest people in government right here ladies and gentlemen.

Gunther Eagleman™

32,265 Aufrufe • vor 1 Jahr

We are just hours away from the first-ever #AEWRedemption! Here is Everything You Need to Know About tonight's epic show, courtesy of Renee Paquette and Tony Schiavone! #AEWRedemption is LIVE at 7e/4p on @HBOMax PPV TONIGHT!
11:15

We are just hours away from the first-ever #AEWRedemption! Here is Everything You Need to Know About tonight's epic show, courtesy of Renee Paquette and Tony Schiavone! #AEWRedemption is LIVE at 7e/4p on @HBOMax PPV TONIGHT!

All Elite Wrestling

38,938 Aufrufe • vor 9 Tagen

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
0:35

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 Aufrufe • vor 2 Monaten

Our new home is live. Everything we’ve built, learned, and created over the years now lives in one place, from our products and partner stories to reports, and more we are working on behind the scenes. Learn everything about The AI Colony here 👇
0:47

Our new home is live. Everything we’ve built, learned, and created over the years now lives in one place, from our products and partner stories to reports, and more we are working on behind the scenes. Learn everything about The AI Colony here 👇

The AI Colony R&D

87,873 Aufrufe • vor 8 Monaten

Here's a quick video to show a bit more of what's been created. I think this only covers 25%-30% of the features I've implemented. Everything you can see is clickable and working.
2:19

Here's a quick video to show a bit more of what's been created. I think this only covers 25%-30% of the features I've implemented. Everything you can see is clickable and working.

Gilgamesh

40,714 Aufrufe • vor 3 Monaten

what is love according to mark? 🐯: i think it’s the reason humans live. like, the reason we can live and the reason we keep going. lately i’ve really been so drawn to love. i want to know more about what real love is. if you sum up everything God wants in the Bible and everything Jesus wants into one sentence, it would be “love the Lord your God with all your heart and all your strength.” so in the end, i realized i really need to truly know that love of Jesus. and from there i thought, yeah, the reason we can live and the reason we live is love. MARK LEE 😭😭
1:04

what is love according to mark? 🐯: i think it’s the reason humans live. like, the reason we can live and the reason we keep going. lately i’ve really been so drawn to love. i want to know more about what real love is. if you sum up everything God wants in the Bible and everything Jesus wants into one sentence, it would be “love the Lord your God with all your heart and all your strength.” so in the end, i realized i really need to truly know that love of Jesus. and from there i thought, yeah, the reason we can live and the reason we live is love. MARK LEE 😭😭

yuppi

215,681 Aufrufe • vor 11 Monaten

People are forgetting this is a spiritual war. Stay focused on Christ- that’s how we fight this. Everything happening right now is spiritual and the enemy is doing everything he can to keep you from seeing that- Because then you will know how to fight it.
2:02

People are forgetting this is a spiritual war. Stay focused on Christ- that’s how we fight this. Everything happening right now is spiritual and the enemy is doing everything he can to keep you from seeing that- Because then you will know how to fight it.

Ashley Hays

36,209 Aufrufe • vor 9 Monaten

Movsar Evloev says he doesn’t focus on his undefeated record "I never care about this because I know victory or loss is from the Almighty. What I can do is push myself and do everything in the right way so at the end I make sure I did everything correct." (Via InTheCage.pl )
0:49

Movsar Evloev says he doesn’t focus on his undefeated record "I never care about this because I know victory or loss is from the Almighty. What I can do is push myself and do everything in the right way so at the end I make sure I did everything correct." (Via InTheCage.pl )

Red Corner MMA

42,131 Aufrufe • vor 4 Monaten

$BFTOKEN is about to go live — and this video has everything you need to know before it explodes. Miss this? Regret it forever💥 🎥 Watch now 👇 📘 Learn more about the token 👉
1:02

$BFTOKEN is about to go live — and this video has everything you need to know before it explodes. Miss this? Regret it forever💥 🎥 Watch now 👇 📘 Learn more about the token 👉

BOSS FIGHTERS ⚡️ $BFTOKEN

76,721 Aufrufe • vor 1 Jahr

Danny Goler: “DMT Entities said essentially, just live your life. Don’t worry about it.” After demanding the ultimate truth from a DMT entity, he was transported into an orb of light to the source. What he discovered was infinite loneliness not understanding why and infinite potential where none of it means anything because you can do anything. The profound advice: “If you wanna know everything you can, but what does that do for you right here?” What lesson has made you realize it’s time to stop overthinking and just live? Share yours below.
0:43

Danny Goler: “DMT Entities said essentially, just live your life. Don’t worry about it.” After demanding the ultimate truth from a DMT entity, he was transported into an orb of light to the source. What he discovered was infinite loneliness not understanding why and infinite potential where none of it means anything because you can do anything. The profound advice: “If you wanna know everything you can, but what does that do for you right here?” What lesson has made you realize it’s time to stop overthinking and just live? Share yours below.

Interstellar

38,399 Aufrufe • vor 3 Monaten

2018 🐻: “the score is 5:4. as you can see, i know everything about mark but…. i will try to be less interested in mark” 2025 🐯: “you guessed all wrong and only found out at the end! i knew it was you from the start”
0:30

2018 🐻: “the score is 5:4. as you can see, i know everything about mark but…. i will try to be less interested in mark” 2025 🐯: “you guessed all wrong and only found out at the end! i knew it was you from the start”

⁺⁸² risa ꫂ ၴႅၴ #𝑻𝑨𝑺𝑻𝑬. 🎟️

107,918 Aufrufe • vor 1 Jahr

The ERC-20i mini app is now live on Farcaster This isn’t just a viewer - it’s a portal into the future of tokens. For the first time, you can explore living, dynamic tokens: art that evolves, reacts, and renders onchain, right inside your social feed. No more static assets. No more offchain wrappers. ERC-20i turns tokens into interactive, expressive digital organisms. And now, they’re right in your feed. 🍄 A new era for art, identity and token UX is here.
0:37

The ERC-20i mini app is now live on Farcaster This isn’t just a viewer - it’s a portal into the future of tokens. For the first time, you can explore living, dynamic tokens: art that evolves, reacts, and renders onchain, right inside your social feed. No more static assets. No more offchain wrappers. ERC-20i turns tokens into interactive, expressive digital organisms. And now, they’re right in your feed. 🍄 A new era for art, identity and token UX is here.

Fungi (🍄,🛡️)

20,790 Aufrufe • vor 1 Jahr

I talked with Andrew Wilkinson about burnout, inversion, agencies and what is a good business. It's a great interview and you can listen to that right now. Here's the preview, the full interview is here:
0:31

I talked with Andrew Wilkinson about burnout, inversion, agencies and what is a good business. It's a great interview and you can listen to that right now. Here's the preview, the full interview is here:

Giulio Michelon

21,355 Aufrufe • vor 1 Jahr

What if everything we know about human history is wrong? Ancient history expert Ben van Kerkwyk says there's growing evidence civilisation is far older – and far more advanced – than we've been taught. Full episode with Ben now live. Tune in at the link in our bio.
0:40

What if everything we know about human history is wrong? Ancient history expert Ben van Kerkwyk says there's growing evidence civilisation is far older – and far more advanced – than we've been taught. Full episode with Ben now live. Tune in at the link in our bio.

Karl Stefanovic

77,944 Aufrufe • vor 2 Monaten