Recently I worked with Art Processors to create the “Replay” feature for The State Library of New South Wales’ “Curio” — Essentially, you get to see which exhibits you viewed at the gallery after you’ve left (you’re geotagged through the building as you explore).

One particular part of this build proved difficult, I thought it may be worth sharing — The polygonally (is that a word?) masked images:

To get this effect to work on webkit browsers, I was able to use the proprietary webkit feature: -webkit-mask-image, with an SVG polygon image.

In Firefox (or browsers that actually handle SVG well) — I hand modified the SVG polygon image, adding a clipPath that also contained a copy of the original polygon.

I also added some IDs so that the clipPath and original polygon could be referenced separately, then it was just a matter of changing the CSS so webkit would reference the polygon and Firefox would use the clipPath.

For some extra icing, I added a transition: all .25s so that the mask-size would be animated when changed.

Curio was a blast to put together, I can’t wait to see what ArtPro come up with next time.

You’ve been reading something by Ben Schwarz.
Just another independent web dude.

Did you enjoy that? You’d better follow me on Twitter, or follow this blog on Tumblr.