Tonight I was re-visiting one of my all time favourite games, Monument Valley.
I found that just as the first time I played it, I was utterly dumbstruck by the simplicity and sheer elegance of the game. I played my way through the first few levels until I started to get that sudden urge to create something with a beautiful color pallette and subtle gradients, or to code some particle effects… or even mess about with HTML 5 audio and some zenlike string sounds.
I was inspired, perhaps not to create, but definitely to imitate… I was inspired to try take a little slice of that world and translate it into my world, the world of CSS and JavaScript and other technology utterly unsuited to creating a playable Escher painting with bizarre 3D calculations. Yes, I would need to start small…. Equally because I had a pizza in the oven and a movie lined up for once it was done, it would have to be a 15 minuter…
Ok, the button, how about that button that comes up at the poignant conclusion of every level? The roundy one with the emanating ring that is so ensō zen simple but sooo works?!
Yup, that’d have to do!
See the Pen Emanating button - inspired by Monument Valley by Stephen James (@stephen-james) on CodePen.
I wanted to use intrinsics as much as possible and didn’t want to go down the SVG route, so I am using a normal button dropping a heavy border on it and border-radius: 50% to turn it into a circle.
The next part I needed was the ring that emanates/ripples outwards. I didn’t want to write some wrapper div and I definitely didn’t want to add one with JavaScript, but fortunately a pseudo element served just fine.
I had to offset it’s position by the buttons border size, ie. position: absolute; top: -6px, left: -6px; and then applied an animation to it transformed the scale and modified the ring’s border width and opacity and what I thought would be sensible points in a 0-100% sequence.
Finally I had to assign animation-iteration-count: infinite; to keep it rippling away.
All in all, quite happy with the result and it was fun to grab something I liked and try and imitate it, next time I’ll try make it something a bit more impressive, but hey, I enjoyed it :D