Loading video...

Video Failed to Load

Go Home

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

BalintFerenczy's profile picture

balint

2,844 subscribers

1,579,562 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 views • 1 year ago

I made a design tool. 95% of it was coded by Claude AI. You can design, animate SVG patterns and export to vectors, png, video or GIF. Use presets, save designs and share urls. Works great on mobile and web. 10k lines of code. The future is insanely fun.
0:59

I made a design tool. 95% of it was coded by Claude AI. You can design, animate SVG patterns and export to vectors, png, video or GIF. Use presets, save designs and share urls. Works great on mobile and web. 10k lines of code. The future is insanely fun.

Meng To

237,263 views • 2 years ago

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇
0:24

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,485 views • 2 years ago

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇
0:55

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

215,359 views • 3 years ago

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇
0:32

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

348,480 views • 3 years ago

i removed the tail on my character a while ago cause it was causing some issues.... and was kinda annoying to animate but i always wanted it to come back so now its physics based !! still needs a bunch of tweakin but yeeeee
0:20

i removed the tail on my character a while ago cause it was causing some issues.... and was kinda annoying to animate but i always wanted it to come back so now its physics based !! still needs a bunch of tweakin but yeeeee

naniel

45,820 views • 8 months ago

A large stag trapped in a well was pulled to safety by two men, pausing on the ground to look back at its rescuers before getting up and running off.
1:18

A large stag trapped in a well was pulled to safety by two men, pausing on the ground to look back at its rescuers before getting up and running off.

AccuWeather

53,878 views • 22 days ago

I was given the chance to animate and model for Hakos Baelz's trip to NinjaTokyo! 🎲🐀 #BaelzBrush Here's a little segment of it! You can watch the full version on her youtube channel! (link below)
1:01

I was given the chance to animate and model for Hakos Baelz's trip to NinjaTokyo! 🎲🐀 #BaelzBrush Here's a little segment of it! You can watch the full version on her youtube channel! (link below)

Yoolie

25,549 views • 1 year ago

i accidentally made the best openapi client generator (again) and now it supports any TS schema validation lib, has an Effect based client, has a first-class Tanstack Query adapter, allows filtering to only some endpoints.. without plugins, just a few flags
0:35

i accidentally made the best openapi client generator (again) and now it supports any TS schema validation lib, has an Effect based client, has a first-class Tanstack Query adapter, allows filtering to only some endpoints.. without plugins, just a few flags

alex

17,537 views • 2 months ago

RFK Jr: “They recommended putting masks on babies.” “The CDC told us it was science-based.” “It wasn't, it was a political decision.” “They allowed all of our schools to be closed and that order was written by the teachers union and it hurt working people all across this country.” “They said it was science-based, but it was a political decision.” “We're getting the politics out of the CDC and returning it to a science-based agency.”
0:34

RFK Jr: “They recommended putting masks on babies.” “The CDC told us it was science-based.” “It wasn't, it was a political decision.” “They allowed all of our schools to be closed and that order was written by the teachers union and it hurt working people all across this country.” “They said it was science-based, but it was a political decision.” “We're getting the politics out of the CDC and returning it to a science-based agency.”

End Tribalism in Politics

360,978 views • 1 year ago

Found a method to see inside some chips, without having to unmount or destroy the chips. Best part - the method only relies on lightly modded off-the-shelf cameras and lenses. Read more at
0:35

Found a method to see inside some chips, without having to unmount or destroy the chips. Best part - the method only relies on lightly modded off-the-shelf cameras and lenses. Read more at

bunnie

192,969 views • 3 years ago

He sent it. I was in complete shock when he flew by on the inside, knew he was going to hit the wall, and still almost pulled it off. That moment definitely inspired some wild moves like Chastain at Martinsville.
0:53

He sent it. I was in complete shock when he flew by on the inside, knew he was going to hit the wall, and still almost pulled it off. That moment definitely inspired some wild moves like Chastain at Martinsville.

Jimmie Johnson

181,222 views • 2 years ago

Two women ran the length of Paddington with their suitcases, made it to the train door while people were still getting on, and were stopped right there. The train pulled off without them. Have you got your UB1UB2 discount card yet? Discounts at 160+ local spots for only £3 a month 👉 link in our bio 📍 Paddington 🎥 Sent in by @locomotions_ #ub1ub2 #london #paddington
0:51

Two women ran the length of Paddington with their suitcases, made it to the train door while people were still getting on, and were stopped right there. The train pulled off without them. Have you got your UB1UB2 discount card yet? Discounts at 160+ local spots for only £3 a month 👉 link in our bio 📍 Paddington 🎥 Sent in by @locomotions_ #ub1ub2 #london #paddington

UB1UB2 West London (Southall)

37,594 views • 1 month ago

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇
0:36

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,830 views • 2 years ago

We’d gone 12 matches without getting one over France. In ’94, everything changed. The Arms Park was alive, the energy was electric, and every pass felt like it carried a nation with it. Proud to have played my part in a win that meant more than most. #NeverGiveUp #WALvFRA
2:51

We’d gone 12 matches without getting one over France. In ’94, everything changed. The Arms Park was alive, the energy was electric, and every pass felt like it carried a nation with it. Proud to have played my part in a win that meant more than most. #NeverGiveUp #WALvFRA

Rupert Moon

21,382 views • 7 months ago

A Switzerland-based startup Flexion has created a robotic brain that helps the Unitree G1 move smoothly and work on its own. It uses reinforcement learning, where the robot trains in simulations to learn walking, balancing, and picking objects. In tests, it cleaned a space by finding and placing items in a basket without human help.
0:47

A Switzerland-based startup Flexion has created a robotic brain that helps the Unitree G1 move smoothly and work on its own. It uses reinforcement learning, where the robot trains in simulations to learn walking, balancing, and picking objects. In tests, it cleaned a space by finding and placing items in a basket without human help.

Space and Technology

17,557 views • 5 months ago

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇
1:23

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 views • 2 years ago

I've been working on this thing on and off for a little over 2 years now, and I think I'm finally going to call it done. Everything was done by myself, except a couple of materials & the song. Link below #TheAmazingDigitalCircus
0:35

Sensitive content

I've been working on this thing on and off for a little over 2 years now, and I think I'm finally going to call it done. Everything was done by myself, except a couple of materials & the song. Link below #TheAmazingDigitalCircus

Poole

44,578 views • 3 months ago