Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

nanda profil fotoğrafı
nanda1 yıl önce

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 profil fotoğrafı
nanda1 yıl önce

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 profil fotoğrafı
nanda1 yıl önce

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 profil fotoğrafı
Anima1 yıl önce

📢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 profil fotoğrafı
T. Costa1 yıl önce

Unreal! Congrats on the launch 🖤

nusu profil fotoğrafı
nusu1 yıl önce

Amazing stuff, insta-buy!

Brotzky profil fotoğrafı
Brotzky1 yıl önce

Amazing <3

James Clements profil fotoğrafı
James Clements1 yıl önce

🥂

Gustav Ekerot profil fotoğrafı
Gustav Ekerot1 yıl önce

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

Jimmy Lee profil fotoğrafı
Jimmy Lee1 yıl önce

Excellent stuff!!

Andrew Schmelyun profil fotoğrafı
Andrew Schmelyun1 yıl önce

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

Benzer Videolar

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,866,252 görüntüleme • 2 ay önce

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,351,262 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 3 ay önce

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

39,191 görüntüleme • 22 gün önce

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 görüntüleme • 8 ay önce

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,766 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 9 ay önce

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 görüntüleme • 5 ay önce

Everyone keeps asking me the same question… "Will you ever retire?" The truth is, I don't know. Someone once told me, "If you want to make God laugh, make plans." So instead of worrying about five years from now, I'm choosing to live one day at a time. Right now, I still love what I do. I still love creating. I still love expressing myself. And for today, I'm not going anywhere. ❤️ 👇🏾 Do you believe in planning everything, or living one day at a time? 🎙️ The Full Ask Me Anything is LIVE now on YouTube! Watch Here:
0:29

Everyone keeps asking me the same question… "Will you ever retire?" The truth is, I don't know. Someone once told me, "If you want to make God laugh, make plans." So instead of worrying about five years from now, I'm choosing to live one day at a time. Right now, I still love what I do. I still love creating. I still love expressing myself. And for today, I'm not going anywhere. ❤️ 👇🏾 Do you believe in planning everything, or living one day at a time? 🎙️ The Full Ask Me Anything is LIVE now on YouTube! Watch Here:

Ava Devines Bad Advice

14,443 görüntüleme • 15 gün önce

$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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

How is it possible to negotiate with the US right now? You know things are bad, when even professor Marandi can't say what is going on. Everything can change literally in five minutes after a social media post and all the agreements you've had are gone Watch FULL here:
1:10

How is it possible to negotiate with the US right now? You know things are bad, when even professor Marandi can't say what is going on. Everything can change literally in five minutes after a social media post and all the agreements you've had are gone Watch FULL here:

Rick Sanchez

55,375 görüntüleme • 12 gün önce

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 görüntüleme • 1 yıl önce