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
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
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.