CSS Brush Stroke Mask or clip path

I’m trying to think what the best way to create a broke stroke effect to mask the top or bottom of an image or section. Not sure if a clip path could be used, or maybe an SVG? I know I could do this with an image mask, but I was trying to find a cleaner way.

here is a codepen I created using an image positioned absolute over the hero image. I’m looking for a way to make this a class I can apply to any similar sections that has either a background color, image or even able to apply over full with images like the section below.

Maybe this is of some help.

You could create two background svgs and place them over the top and bottom of an image using :before and :after instead of actual elements.

Here’s a rough example.

Of course the background color has to match the background to wipe the image out.

There may be a better way using masks but haven’t really played with them enough to test :slight_smile: