Flexible Repeating SVG Masks

Author

Chris Coyier

Published

Mar 22, 2020

mask mask-image

MailChimp: Grow sales with Customer Journey Smarts

Tyler Gaw reminds us that mask-image can repeat, resize, and move just like background-image does, which is fun to combine and play with. I could see it being a fun option for an <hr>, like Sara is doing.

Direct Link →

Our Learning Partner

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

This comment thread is closed. If you have important information to share, please contact us.

The related posts above were algorithmically generated and displayed here without any load on my server at all, thanks to Jetpack.

📫 The Newsletter

Email Address

Facebook @CSSTricks Twitter @CSS YouTube @realcsstricks Instagram @real_css_tricks RSS Feed

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.

*May or may not contain any actual "CSS" or "Tricks".