The cards from Magic: the Gathering have some really cool art, and not just in the "artwork" pane. I think the colored backgrounds are really neat too. I've been playing around with <svg> filter primatives a bit lately, so I decided to see if I could recreate the look of these backgrounds with them.
I wanted the multicolor background to have a crinkled, shiny appearance like gold foil.
To achieve this look, I used a low base frequency and five octaves to create layers of texture, which are then color-shifted to red/yellow. A shine is added via
feSpecularLighting, which treats the grayscale noise as a bump map, and an feDistantLight is applied to create the glint on the edges of the turbulence "crinkles". A final feComposite merges the noise and shine layers evenly.
For blue, I went with a calm, watery texture.
This is a bit of a middle-middle fastball for
feTurbulence, which really only needs to be stretched horizontally to look more like waves than round splashes. The luminanceToAlpha matrix decides which parts of the "waves" will be opaque, then passes this to a table function which forces the gradual gradients of the noise into a binary on-or-off state. Then we just shift the colors toward blue.
Finally, red. Back when I played MtG (I started when Revised came out and quit after Mirrodin), red was always my favorite. The cards have a fast, obtuse, and direct nature, with much of the lore revolving around disposable grunts and last-ditch efforts.
Traditionally, the "red" backgrounds resemble a tinted "parched earth" texture, but I wanted to do something a little different. Inspired by the nifty vector effects you can achieve on Haikei, I wanted my red background to resemble a lava lamp, or a mass of cellular blobs. We start with some high frequency, low detail noise, and push values toward a binary state, even more aggressively than with the gold foil. The table function rounds the resulting values to 0, 0.5 or 1. Then it's just another tint and we're done.
Traditionally, the "red" backgrounds resemble a tinted "parched earth" texture, but I wanted to do something a little different. Inspired by the nifty vector effects you can achieve on Haikei, I wanted my red background to resemble a lava lamp, or a mass of cellular blobs. We start with some high frequency, low detail noise, and push values toward a binary state, even more aggressively than with the gold foil. The table function rounds the resulting values to 0, 0.5 or 1. Then it's just another tint and we're done.
Skip directly to the codepen!
Demo mockups
Aside from the artwork, these are pure HTML & CSS.
<filter color-interpolation-filters="sRGB" id="goldLeaf" x="0" y="0"
width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="5"
result="noise" />
<feColorMatrix in="noise" type="matrix"
values="0.4 0 0 0 0.7
0.3 0 0 0 0.5
0.1 0 0 0 0.2
0 0 0 0 1" result="goldBase" />
<feSpecularLighting surfaceScale="5" specularConstant="0.8" specularExponent="40"
lighting-color="#fff9e6" in="noise" result="specular">
<feDistantLight azimuth="45" elevation="60" />
</feSpecularLighting>
<feComposite in="specular" in2="goldBase" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter><filter color-interpolation-filters="sRGB" id="water" x="0" y="0"
width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.05 .1"
numOctaves="5" result="noise" />
<feColorMatrix type="luminanceToAlpha" in="noise" result="bw"/>
<feFuncA type="table" tableValues="0 0 1 1"/>
<feColorMatrix in="bw" type="matrix" values="
0 0 0 -0.396 0.765
0 0 0 -0.357 0.988
0 0 0 -0.180 1.000
0 0 0 0 1" />
</filter><filter color-interpolation-filters="sRGB" id="vectorLava" x="0" y="0
width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.12" numOctaves="1"
result="noise" />
<feColorMatrix type="matrix" in="noise" result="sharp"
values="50 0 0 0 -24.5
50 0 0 0 -24.5
50 0 0 0 -24.5
0 0 0 1 0" />
<feColorMatrix type="luminanceToAlpha" in="sharp" result="bw"/>
<feComponentTransfer in="bw" result="clamped">
<feFuncA type="table" tableValues="0 0.5 0.5 1"/>
</feComponentTransfer>
<feColorMatrix in="clamped" type="matrix" values="
0 0 0 -0.396 0.867
0 0 0 -0.357 0.325
0 0 0 -0.180 0.224
0 0 0 0 1" />
</filter>Closing thoughts
A fun challenge! Might be inspired to finish out the set with some white, green, and black backgrounds someday. Although honestly, creating the card structure in CSS -- nameplate, description box, etc. -- for the demos (see image above) was just as fun as working with the filters.