Загрузка видео...

Не удалось загрузить видео

На главную

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,209 subscribers

160,723 просмотров • 1 год назад •via X (Twitter)

Наука и технологииОбразованиеИскусство
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

never realized how easy it was to do this until sitting down to read about SVG filters last week 🤦‍♂️ for the sticker outline: 1. dilate the input with feMorphology 2. flood the color with feFlood 3. combine them with feComposite 4. overlay the input onto the outline with feMerge

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

Artur is a bit of a wizard with SVG filters and did these some time ago 👏

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

but honestly, until sitting down and reading all the MDN pages, I didn't know what was possible 😮 had only ever looked at displacement and goo 💀 like, why does SVG have a full on lighting system available with fePointLight & co.? very cool!

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

anyways - here's the @CodePen if you wanna play with it 🤙 the last thing i'd love to see is if you can like color-burn the holographic turbulence somehow 🫣 feel like you need to bake that into the SVG or do something outside on the element

Фото профиля Tiger Abrodi
Tiger Abrodi1 год назад

Nice! Pardon if I missed, do you've a course or anything? I'd love more hardcore premium design engineering resources, hence asking.

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

this is the dream 💯☁️ I want to make a platform that includes all the things I make with breakdowns and videos 🙏 haven't even had time to sit down and do the newsletter in recent weeks 🥲

Фото профиля @drip
@drip1 год назад

awesome man

Фото профиля Aleksa Mitić
Aleksa Mitić1 год назад

Gotta love the SVG’s they are so good. Amount of things that can be done with it is astounding.

Фото профиля Aboubakar Jay
Aboubakar Jay1 год назад

Amazing 🤯

Фото профиля Enrique Soto
Enrique Soto1 год назад

Great!!! SVG Effects is magic! I´m experimenting with some basic SVG effects lately, any good source or book to learn more about?

Похожие видео

messin' with SVG filter burn effects 🔥
0:27

messin' with SVG filter burn effects 🔥

jhey ʕ•ᴥ•ʔ

30,164 просмотров • 1 год назад

messin' with text using CSS + SVG 🤌
0:26

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 просмотров • 1 год назад

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

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

jhey ʕ•ᴥ•ʔ

204,870 просмотров • 8 месяцев назад

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

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

jhey ʕ•ᴥ•ʔ

222,102 просмотров • 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 👇
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 просмотров • 1 год назад

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 ✅
0:46

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 год назад

Liquid Glass with CSS and SVG
0:36

Liquid Glass with CSS and SVG

Andreas Storm

71,079 просмотров • 6 месяцев назад

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

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

jhey ʕ•ᴥ•ʔ

43,682 просмотров • 1 год назад

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 просмотров • 11 месяцев назад

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

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

jhey ʕ•ᴥ•ʔ

95,479 просмотров • 7 месяцев назад

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 ʕ•ᴥ•ʔ

186,673 просмотров • 2 лет назад

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

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

jhey ʕ•ᴥ•ʔ

103,624 просмотров • 1 год назад

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll
0:32

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

44,674 просмотров • 1 год назад

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 просмотров • 1 год назад

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙
0:27

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙

jhey ʕ•ᴥ•ʔ

104,078 просмотров • 2 лет назад

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 просмотров • 1 год назад

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞
0:39

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

jhey ʕ•ᴥ•ʔ

66,297 просмотров • 1 год назад

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG
0:40

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,915 просмотров • 1 год назад

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }
0:27

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

jhey ʕ•ᴥ•ʔ

214,653 просмотров • 11 месяцев назад

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 просмотров • 2 месяцев назад