Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

144,226 subscribers

85,634 views • 1 year ago •via X (Twitter)

Education Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

trav1 year ago

dude fucking a

Juan1 year ago

Wooooooooooooow. Dude... how do you come with this ideas =O!!

Λbstract1 year ago

RT @InstaMAT_io: 👀 Are you looking for an alternative to Adobe Substance tools? Do not miss out on InstaMAT from killer node-based material…

Narek1 year ago

You're doing a fantastic job!

Shine Dark1 year ago

Are you using a grid or calculating the placement ? This is sick gives me so many ideas

jhey ▲🐻🎈1 year ago

the animated part is all SVG leveraging the fact that SVG is overflow: hidden by default and using transform-box: fill-box to animate the groups within using CSS 🤙

Lethabo Sekoto1 year ago

one of the animations i've seen in a while, nice!!

@drip1 year ago

thanks for showing behind the scenes.

Tyler Pashigian1 year ago

This is awesome. Kinda reminds me of been very curious how that works

Paschal1 year ago

Wizardry

Related Videos

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

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

jhey ʕ•ᴥ•ʔ

160,723 views • 1 year ago

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 views • 1 year ago

Liquid Glass with CSS and SVG

Liquid Glass with CSS and SVG

Andreas Storm

71,027 views • 6 months ago

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,591 views • 1 year ago

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

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

ravarcheon

24,707 views • 6 months ago

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.

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 views • 1 month ago

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!

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

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

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

jhey ʕ•ᴥ•ʔ

103,624 views • 1 year ago

"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 views • 1 year ago

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

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

jhey ʕ•ᴥ•ʔ

27,241 views • 1 year 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! 👇$

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,255 views • 2 years ago

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

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

jhey ʕ•ᴥ•ʔ

229,714 views • 1 year ago

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

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

jhey ʕ•ᴥ•ʔ

66,297 views • 1 year ago

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,124 views • 1 year ago

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

jhey ʕ•ᴥ•ʔ

382,988 views • 1 year ago

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

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

jhey ʕ•ᴥ•ʔ

97,263 views • 1 year ago

text-wrap - CSS

text-wrap - CSS

Ali Reza

38,294 views • 1 year ago

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

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!

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,832 views • 1 year ago

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Una 🇺🇦

34,980 views • 2 months ago