Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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,686 subscribers

1,577,503 Aufrufe • vor 10 Monaten •via X (Twitter)

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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,512 Aufrufe • vor 11 Monaten

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.
0:37

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.

Carl 💥 Creative Coding Club

103,280 Aufrufe • vor 9 Monaten

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!
3:17

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

Wes Bos

231,840 Aufrufe • vor 1 Jahr

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇
0:33

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,849 Aufrufe • vor 2 Jahren

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇
0:48

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇

Techartist

13,955 Aufrufe • vor 1 Jahr

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.
0:34

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,155 Aufrufe • vor 2 Monaten

figured out how to do motion blurs in the browser using svg filters and css
0:35

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 Aufrufe • vor 6 Monaten

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇
0:31

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,511 Aufrufe • vor 1 Jahr

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap
0:40

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,714 Aufrufe • vor 1 Jahr

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇
0:29

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇

Viki ✨

908,828 Aufrufe • vor 2 Jahren

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇
0:20

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 Aufrufe • vor 2 Jahren

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

236,651 Aufrufe • vor 1 Jahr

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding
0:48

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding

Hans Chiu

11,302 Aufrufe • vor 23 Tagen

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇
0:36

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

13,326 Aufrufe • vor 1 Jahr

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴
0:35

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

jhey ʕ•ᴥ•ʔ

103,624 Aufrufe • vor 1 Jahr

Interactive particle system built with p5.js. Shapes smoothly morph between circle, square, and triangle on click. Made with javascript. Source code/CodePen link in the comment below. 👇
0:20

Interactive particle system built with p5.js. Shapes smoothly morph between circle, square, and triangle on click. Made with javascript. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

12,164 Aufrufe • vor 1 Jahr

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev
0:26

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,277 Aufrufe • vor 3 Jahren

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:
1:23

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:

Wes Bos

188,112 Aufrufe • vor 3 Jahren

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

984,971 Aufrufe • vor 1 Jahr