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