Loading video...

Video Failed to Load

Go Home

A student asked me to "nerd snipe" this gradient effect. At first I was quite puzzled 🤔 CSS? SVG? Shaders? A quick inspection revealed the secret! Basic demo and full lesson video in thread.

snorklTV's profile picture

Carl 💥 Creative Coding Club

6,078 subscribers

103,280 views • 11 months ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

tried to recreate the effect in just css/svg (far from perfect but pretty nice for a first try i think)
0:27

tried to recreate the effect in just css/svg (far from perfect but pretty nice for a first try i think)

Rebane

985,206 views • 1 year ago

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below
0:38

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below

balint

1,579,103 views • 1 year ago

Initially, I wanted to make a thread about how to create a simple parallax effect in Unity UI without using custom shaders, but I felt that making a video would be better this time. Let me know if you like this format. #VRChat
0:35

Initially, I wanted to make a thread about how to create a simple parallax effect in Unity UI without using custom shaders, but I felt that making a video would be better this time. Let me know if you like this format. #VRChat

MyroP

15,092 views • 1 month ago

Google Gemini 2.0 Realtime just helped me edit a video in Adobe Premiere Pro. Using the live screen feature it was able to see what I was doing and guide me within seconds for how to add a basic blur effect. This is a game changer. Absolutely incredble.
1:28

Google Gemini 2.0 Realtime just helped me edit a video in Adobe Premiere Pro. Using the live screen feature it was able to see what I was doing and guide me within seconds for how to add a basic blur effect. This is a game changer. Absolutely incredble.

Jerrod Lew

323,337 views • 1 year ago

I asked jason (DevEx at OpenAI): “What’s the craziest thing Codex did for you?” Here’s his answer: “I was on a bike ride when a coworker asked me to fix a launch video. So I connected remotely from my phone and asked Codex to use computer use to edit the video, export it, and post it back to Slack. Twenty minutes later, there was a new video in the Slack thread. Then I told Codex: ‘Every 30 minutes, check the thread for feedback and export V2, V3, V4.’ By the time I got home, the launch video was greenlit.” Codex had handled the revisions by repeatedly checking Slack for feedback. 📌 Watch the full episode here:
0:36

I asked jason (DevEx at OpenAI): “What’s the craziest thing Codex did for you?” Here’s his answer: “I was on a bike ride when a coworker asked me to fix a launch video. So I connected remotely from my phone and asked Codex to use computer use to edit the video, export it, and post it back to Slack. Twenty minutes later, there was a new video in the Slack thread. Then I told Codex: ‘Every 30 minutes, check the thread for feedback and export V2, V3, V4.’ By the time I got home, the launch video was greenlit.” Codex had handled the revisions by repeatedly checking Slack for feedback. 📌 Watch the full episode here:

Peter Yang

79,504 views • 25 days ago

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

⛔️ I asked people at the demonstrations why they came out to support #Sudan and what they wanted to say about the AlFashir massacres. What was their message? These were their answers (Thread). First, a student from Newcastle university shared RSF crimes and violence against women
0:34

⛔️ I asked people at the demonstrations why they came out to support #Sudan and what they wanted to say about the AlFashir massacres. What was their message? These were their answers (Thread). First, a student from Newcastle university shared RSF crimes and violence against women

Roaa Elhag

21,616 views • 9 months ago

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅
0:21

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅

Alexey Ardov

40,819 views • 8 months ago

taegunv customize behind! 🧸 this is just a story but before i went to record the demo for customize, i actually asked taerae hyung to come with me. i felt like we needed taerae hyung for this demo to really bring out the right vibe. and the song is quite high too. so i asked him "i'm going to record a demo now can you come and do it with me?" and when taerae hyung asked "what will you give me?" i said "i'll buy you a meal" and he said "okay i'll be in touch," but he didn't contact me. so i went and did it by myself. that's why i ended up doing it alone.
1:08

taegunv customize behind! 🧸 this is just a story but before i went to record the demo for customize, i actually asked taerae hyung to come with me. i felt like we needed taerae hyung for this demo to really bring out the right vibe. and the song is quite high too. so i asked him "i'm going to record a demo now can you come and do it with me?" and when taerae hyung asked "what will you give me?" i said "i'll buy you a meal" and he said "okay i'll be in touch," but he didn't contact me. so i went and did it by myself. that's why i ended up doing it alone.

꾸 🍎

40,328 views • 3 months ago

1/ This is the coolest product built with zk that I have seen ever. You can turn any physical objects into private keys! I asked for a repeat demo, because I had to take a video. Rough technical explanation in the thread
1:52

1/ This is the coolest product built with zk that I have seen ever. You can turn any physical objects into private keys! I asked for a repeat demo, because I had to take a video. Rough technical explanation in the thread

Dr. Z

21,696 views • 1 year ago

The rhythm system in Scratchin' Melodii has changed quite a bit since the 2022 demo. I definitely would like to improve the in-game tutorial in the full game, but for now I thought I'd take some time to explain some of it in a thread!
0:36

The rhythm system in Scratchin' Melodii has changed quite a bit since the 2022 demo. I definitely would like to improve the in-game tutorial in the full game, but for now I thought I'd take some time to explain some of it in a thread!

LJ - (Scratchin' Melodii Dev)

85,984 views • 2 years ago

#devtober day 22 - magma ball visual arrangement This was one of the trickier ones to date, and was the first to require 2 unique shaders -- a wobbly lava one and a decal to let me partially "reveal" a lava texture in the travel path.
0:25

#devtober day 22 - magma ball visual arrangement This was one of the trickier ones to date, and was the first to require 2 unique shaders -- a wobbly lava one and a decal to let me partially "reveal" a lava texture in the travel path.

TreyH

12,614 views • 10 months ago

There's a Secret Extraterrestrial Portal Hidden in the Grand Canyon? Take a look at this extraordinary story...🧐🤔 Hank Krastman was a student in the 1960s, when he befriended another student named Kopavi, a member of the Hopi. According to Krastman’s accounts, Kopavi once led him deep into the wilderness, to reveal the spectacular truth.
2:36

There's a Secret Extraterrestrial Portal Hidden in the Grand Canyon? Take a look at this extraordinary story...🧐🤔 Hank Krastman was a student in the 1960s, when he befriended another student named Kopavi, a member of the Hopi. According to Krastman’s accounts, Kopavi once led him deep into the wilderness, to reveal the spectacular truth.

UFO mania

79,480 views • 8 months ago

This antisemite thought he was going to give me a history lesson and even brought popcorn to the debate... In the end, he got a lesson himself and I was the one eating popcorn. Watch, and prepare a vomit bag because this is a disgusting neo-Nazi!
2:48

This antisemite thought he was going to give me a history lesson and even brought popcorn to the debate... In the end, he got a lesson himself and I was the one eating popcorn. Watch, and prepare a vomit bag because this is a disgusting neo-Nazi!

יוסף חדאד - Yoseph Haddad

54,728 views • 4 days ago

I Flew to Iceland and Filmed a Dragon! Check out the full video in the thread!
0:23

I Flew to Iceland and Filmed a Dragon! Check out the full video in the thread!

(Alex) Compositing Academy

11,099 views • 1 year ago

This is a demo showing basic effects applied to plain text using Lyrica. Although most of these examples feature only a single effect, I believe you can achieve a wide variety of visual effects by combining them and adjusting the parameters of each effect.👍
0:30

This is a demo showing basic effects applied to plain text using Lyrica. Although most of these examples feature only a single effect, I believe you can achieve a wide variety of visual effects by combining them and adjusting the parameters of each effect.👍

OUTLOUD

11,735 views • 1 month ago

Thomas Corvée made this airbending effect in UE5 for a realtime VFX challenge. Here's a quick look at how the tornado was made! 🌪️ Full breakdown: #VFX #realtimevfx #ue5 #gamedev
0:38

Thomas Corvée made this airbending effect in UE5 for a realtime VFX challenge. Here's a quick look at how the tornado was made! 🌪️ Full breakdown: #VFX #realtimevfx #ue5 #gamedev

Jettelly Inc.

10,883 views • 1 month ago

Oh sorry, I forgot to show you how the teleprompter works. This was my first draft. And the video that helped get me booked, I shared on this thread.
0:22

Oh sorry, I forgot to show you how the teleprompter works. This was my first draft. And the video that helped get me booked, I shared on this thread.

Gugu Dlamini

95,937 views • 1 year ago