SVG clip-path and CSS Mix-Blend

I was working on my portfolio page, wanting to give it a little extra punk rock attitude, and I started to look around for inspiration. I settled on the cover of Bad Religion’s 1989 album ‘No Control’ because it looks cool, is one of my favorite albums to listen to, and I thought it would be somewhat easy to reproduce.

All you really have is that colorful backdrop, and then text that cuts through a black background. There are some nice details, too, like the rough edges and black noise, but in essence it’s colors, black, and clipping text. ez pz.

Attempt 0: clip-path

Since the text, in my mind, clips its background, I first searched for a CSS property that would allow me to do that. You might thinking it would be the ‘clip’ property, but it’s deprecated and this use case is not what it was intended for anyway. The new hotness is ‘clip-path’. This property can handle basic polygons. If you want your clip path to be text, though, you are going to have to introduce some… SVG.

I had a cursory understanding of SVG as a format, and knew that using it would be similar to my work with the canvas API. It did work! I started with a div with a gradient background, place a smaller concentric black div inside, and on top of that put a div with the same gradient background clipped to the text.

The results were not very pretty. It leaves me wondering one big thing about SVG that I am eager to explore: can I style SVG text with the same level of precision that I can style text using CSS?

Attempt 1: CSS mix-blend

What if instead of clipping the background, we just make the text transparent?

My first attempts going this route were to try to place an outline around transparent text. I have some experience with Photoshop, so I hoped that CSS includes properties for stroke and fill. You can definitely do this with SVG, and webkit is working on it, but right now it’s just not practical. Chris Coyier has an article showing how to accomplish the same effect but if you attempt to apply this to transparent text, it doesn’t work because the text-shadow acts as a background.

But! Speaking of Photoshop! There’s this nice property called mix-blend-mode which allows you to define how an element should blend with what’s behind it. One of these blend modes is ‘multiply’, and it pretty much does exactly what it says: it takes the color values of the top layer, multiplies it by what’s underneath, and divides by 255.

Some basic math shows why this is useful here. ‘My Gradient’ x White(255, 255, 255) / White(255, 255, 255) = ‘My Gradient’. If I put white text in an element above my gradient background, all I will see is the gradient behind it.

Result on Codepen.

Admittedly basic, but its essence is intact.

The only really unfortunate thing about this whole journey was that that gradient does not look very nice as a header and this design did not make it onto the page. Still learned a lot though.

SVG clip-path and CSS Mix-Blend

Would love to hear from you:

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s