CSS Multi-masking

Tagged with: experiment, css, js

I've been dreaming about some D&D table-top AR application. Since I'm not much of a mathematision, I don't stand much of a chance on the interpreting part, with some of the great strides in HTML5 and CSS3, I should stand more of a chance on the UI part though.

One critical part of my plan was map-revealing to the characters on the table. Such a 'revealing' technique is often described as 'masking'. In previous times I'm not sure how to implement this in html, but with modern-day CSS3 to the rescue, it might just get a hell of a lot easier...

While starting on the setup of this test-case I'm even coming up with more solutions. Absolute posititioning of the rooms and swapping the rooms from a pocket universe to the actual map could also resolve this in a quick and dirty way. For now I'm going to attempt CSS-masks first though, it gives us better LOS resolution.

Setup

To start of I'm providing a simple img tag containing some D&D map that I've drawn up years ago. It's an easy example map and allows me to start testing.

The basics

Let's presume that other vendors will pickup the -webket-mask-*** syntax for setting up img-masks. I'm saying this in plural mostly because the syntax allows for multiple images, just like background-***. In the following example I've provided 4 different sets, although all using the same svg.

All of this is rather streight-forward. Which leaves me with rotation of the mask. As I'm writing this up while not online, I will have to investigate this at a later date. Hopefully there's a simple property that allows me to rotate the masks. Wish I either had Internet right now, or otherwise a better memory that would've allowed me to investigate this properly myself!

On to JavaScript

Although I would have needed Javascript in the final solution I was researching this for, I am immediately going to move towards supporting it. Insofar I've been experimenting on embedding a svg in a data url, which would allow me to rotate the picture, which would be required as I cannot do so using CSS.

Using the knowledge gained from my jsfiddle experiments I would now like you to add numerous masks on your own using the following form.