r/webdev - How to achieve a "glitch" effect on a border by controlling certain segments of said border?

Segmented Border

Hey there. I’ve been working on a project all weekend for fun, and I’ve read a lot about how one might go about this, but it appears like it’s going to be a lot of work and I’d just like to see if someone here could point me in the right direction before I dive in too deep.

What I am trying to achieve

A “border” (or some kind of line) where I would have the ability to animate (using keyframes[?]) individual segments of said border/line. I am going for some kind of “glitch” effect. Don’t worry I won’t be using this on any live site or anything, it’s more of just a “nice-to-have” sort of thing.

I am pretty sure this won’t be able to be achieved with the border property.

The two things I am curious about are possibly using an svg[s] or maybe even box shadow?

Anyone have any experience with this before? Can you point me in the right direction with stuff I could read about or what you might be looking for?

Thank you.

Source link

Write A Comment