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.

Problems

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

Lessons

  • 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!?