Pfff. Bit of a struggle, this!
I quickly decided that the full body shot would not be happening - head and shoulders is sufficiently challenging.
Although I don't 100% understand the rules governing the
border-radius property, especially where it's all like
X X X X / X X X X and what the relationship is between % and px, at least I can mess about with these values until I get something that approximates the underlying forms I'm looking for.
In the case of the tiger, two head shapes comprise the main structure and then I layered on a few rounded divs, appropriately rotated for the nose and muzzle.
- difficult shape! had to compromise greatly and go for something more impressionistic
- messy code. again, I abandoned my initial aspirations of order for a slapdash ad hoc approach
- irregular patterning. This is the real killer. Lots of little organically-shape bits make for laborious and unrewarding code.
- positioning. I still haven't figured out the best way to group my elements...
- this approach to positioning looks valuable. Will try that going forward.
- Weirdly, the most valuable thing I learned was how to play with the borders to produce cleaner effects than nested s. That ear ended up much better as a result.
- opacity can be tweaked to allow postioning of elements
- ticked normalise and vendor prefix on the settings - maybe not everyone was seeing my images right!?