Video wird geladen...
Video konnte nicht geladen werden
💥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

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

Where did you get your stats from? 🧐😅

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

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

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

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

Very nice!

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:

Gonna clean this version

Cool. Thx for giving it a shot. 👏

