Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

💥Web Animation Challenge 💥 99% of web developers will not be able to build Level 1. #SVG #JavaScript #CSS #GSAP #Lottie anything goes.

74,675 Aufrufe • vor 2 Jahren •via X (Twitter)

10 Kommentare

Profilbild von Carl 💥 Creative Coding Club
Carl 💥 Creative Coding Clubvor 2 Jahren

Starter file if you want to use SVG Hand-coded with ❤️

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

Where did you get your stats from? 🧐😅

Profilbild von Carl 💥 Creative Coding Club
Carl 💥 Creative Coding Clubvor 2 Jahren

Had a hunch it was 85%. I'm usually wrong so I added 10%. Then an additional 5% for pure shock value 🙂

Profilbild von Álvaro Montoro
Álvaro Montorovor 2 Jahren

I created a CSS version but, because of the things I used (at-property, mask composites), it only works on Chrome... so I'll leave this challenge to the pros :)

Profilbild von Carl 💥 Creative Coding Club
Carl 💥 Creative Coding Clubvor 2 Jahren

That's absolutely incredible. Wow. Not even close to understanding where all the magic is happening. Thanks for sharing!

Profilbild von Amit Sheen
Amit Sheenvor 2 Jahren

I think SVG is the best for this, with a simple path as a mask, and you can use a foreignobject for the gradient.

Profilbild von Carl 💥 Creative Coding Club
Carl 💥 Creative Coding Clubvor 2 Jahren

Very nice!

Profilbild von Álvaro Montoro
Álvaro Montorovor 2 Jahren

A single div version using CSS. It will work on Chrome and Safari, but not on Firefox (because it doesn't support at-property 😓) Step 1: Step 2: Step 3:

Profilbild von dennys dionigi
dennys dionigivor 2 Jahren

Gonna clean this version

Profilbild von Carl 💥 Creative Coding Club
Carl 💥 Creative Coding Clubvor 2 Jahren

Cool. Thx for giving it a shot. 👏

Ähnliche Videos