正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

messin' with SVG filter burn effects 🔥

jhey ʕ•ᴥ•ʔ

146,325 subscribers

30,164 次观看 • 1 年前 •via X (Twitter)

艺术科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

Alfon* 的头像

Alfon*1 年前

balatro-css coming soon? 😳

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 年前

goals 😅 have a bunch of half finished demos like this one for exploring effects from that game

bomaang 的头像

bomaang1 年前

What is this tool you are using?

Florian 的头像

Florian1 年前

does this work on safari as well?

cubiq 的头像

cubiq1 年前

gosh that reminds me of the awesome Artur's demo

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 年前

difference lies in the noise manipulation - don't need it to make flames, can use blend mode and translate with a static filter strip

Christian 的头像

Christian1 年前

you are indeed burning away

only1Kennery ♑ 的头像

only1Kennery ♑1 年前

Nice work boss. Would there be a codepen snippet for this though? 😃

8BIT_ 的头像

8BIT_1 年前

yes, i was looking for this dissolving effect

pavi2410 的头像

pavi24101 年前

add flame animation 🔥

相关视频

messin' with CSS + SVG filter sticker effects 🧑‍🍳

messin' with CSS + SVG filter sticker effects 🧑‍🍳

jhey ʕ•ᴥ•ʔ

160,723 次观看 • 1 年前

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 👇

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 次观看 • 1 年前

Burn 'em down, SVG.

Burn 'em down, SVG.

FOX: NASCAR

15,416 次观看 • 1 年前

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

222,102 次观看 • 1 年前

SVG experiencing very hazardous effects of #HurricaneBeryl

SVG experiencing very hazardous effects of #HurricaneBeryl

Lavern

411,558 次观看 • 2 年前

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#knockout); } section h1 { animation: shrink; } @keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#knockout); } section h1 { animation: shrink; } @keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,075 次观看 • 1 年前

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! 👇

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 次观看 • 2 年前

Funny filter effects challenge

Funny filter effects challenge

lavanya anasera

628,075 次观看 • 18 天前

SVG with a heater! 🔥

SVG with a heater! 🔥

NASCAR

30,873 次观看 • 10 个月前

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,682 次观看 • 1 年前

MYSTER MODEL - ORIONMIST RICK AND MORTY EPISODE FULLY ZERO SHOT CODED BY IT WITH DIALOGUES , MUSIC , SOUND EFFECTS IN SVG HOLY SHIIIIIIITTTTTTTT.......

MYSTER MODEL - ORIONMIST RICK AND MORTY EPISODE FULLY ZERO SHOT CODED BY IT WITH DIALOGUES , MUSIC , SOUND EFFECTS IN SVG HOLY SHIIIIIIITTTTTTTT.......

Chetaslua

17,800 次观看 • 8 个月前

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

jhey ʕ•ᴥ•ʔ

204,870 次观看 • 8 个月前

A little breakdown of "filter effects" !

A little breakdown of "filter effects" !

Jiri

129,948 次观看 • 3 年前

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨

jhey ʕ•ᴥ•ʔ

782,559 次观看 • 1 年前

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

jhey ʕ•ᴥ•ʔ

95,698 次观看 • 8 个月前

me n delta messin about with fnf covers again

me n delta messin about with fnf covers again

SilentManJoe

78,986 次观看 • 2 年前

Low cut Klay ain’t messin around this summer 🔥

Low cut Klay ain’t messin around this summer 🔥

NBA Pass

485,150 次观看 • 1 年前

skibidi riddim 🧻 retweet if you messin with it 🪠

skibidi riddim 🧻 retweet if you messin with it 🪠

Kozmoz

12,790 次观看 • 2 年前

5 tools for web developers - Open-source Figma alternative - Full-stack hosting for modern web apps - Hand-drawn style diagram - Smooth scrolling with parallax effects - Animate SVG drawings in real-time

5 tools for web developers - Open-source Figma alternative - Full-stack hosting for modern web apps - Hand-drawn style diagram - Smooth scrolling with parallax effects - Animate SVG drawings in real-time

Csaba Kissi

31,037 次观看 • 8 个月前

Buddy Guy & Junior Wells '84. 🎶'Messin' With The Kid'

Buddy Guy & Junior Wells '84. 🎶'Messin' With The Kid'

bluesharp

38,646 次观看 • 3 年前