## Dragon Egg

Hatch

Take the top card from the draw pile.

OR Study

Wait 2 turns, then take a card from any family.

Illus. Christian Alder

12/64

## About

My first CodePen challenge 🥳

The goal this week was to pick one of two card templates and give it some 💜. I went with the template that had an image.

Lately I've been experimenting with `mix-blend-mode` and SVG stroke animation (CSS Only 😎), So I thought it'd be fun to incorporate that into this challenge.

I've also been playing board games recently! That inspired this approach too. I wondered how a digital card might feel, with interactive elements and selectable abilities.

### Any Problems?

Not too much. I was unable to successfully group SVG definitions to the top of the file though.

While I could define and call them with: `fill="url(#card-texture)"` , I was unable to hide that separate SVG block without it affecting the patterns themselves.

So I ended up giving up on that... I then had to chase some problems across Firefox and Safari. Got most sorted, however the magnifying glass `mix-blend-mode` doesn't seem to work there 😔 I think it's conflicing with the transform animation that's happening.

When I get some more energy I'll look into that some more, or just try to check for browser-support and fallback to a lower opacity fill.

## Credits

- MagicPattern

  For the God Rays Generator , which I used to add a bit of flair while hovering over the card.

- Pattern Monster

  I made use of their Scales generator for the dragon egg and card back.

- Hero Patterns

  For the faint card texture overlay (More noticable on the back).