Was tricky getting a video, with corner radii that change on over, on top of a blurry version of the same video. CSS filters, masking, and combos of both are inconsistent between browsers and often don't resize well

Ended up stacking two video elements w/ a script to keep them in sync

Maybe there’s a combination of SVG filters that could make it work?

Very curious to see what CSS you tried!

Couple messy codepens. Please be gentle I am a scrub

This one was sooo close; ✔️Chrome ✔️FF ✖️Safari (can't remember why I used a library to draw the svg): https://codepen.io/alexbruno/pen/OJrzgpL

This worked great in FF, but nothing else:

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

Couple messy codepens. Please be gentle I am a scrub

This one was sooo close; ✔️Chrome ✔️FF ✖️Safari (can't remember why I used a library to draw the svg): https://codepen.io/alexbruno/pen/OJrzgpL

This worked great in FF, but nothing else: https://codepen.io/alexbruno/pen/poqWzMr