A Few SVG Illustrations

Illustration

Illustration is a fun thing I don’t to get to do very often in my current role, but every once and a while I have a chance to play around with stuff like this. My goal was to create simple illustrations that hybridized a simple, flat aesthetic with subtle gradients that add a sense of dimension and lighting. Keeping it all vector based was tricky but rewarding.

a stack of banker boxes

This first picture of banker boxes is 8kb. I’m guessing with minification and some ruthless scrutiny of the code, it probably could slim down a bit more.

a pile of checks with a cup of coffee and a fancy pen.

The funnest part of this one was playing around with radial gradients in the pen. I didn’t realize SVGs could do elliptical gradients using the gradient transform attribute.

<radialGradient
    id="pen-body-gradient-middle"
    gradientTransform="translate(405 500) rotate(-9) scale(272 32)"
/>
a stack of envelopes

This one uses SVG’s ability to do a gaussian blur. I’m guessing it’s less efficient to render for browsers, but it definitely comes in handy when a simple gradient doesn’t quite cut it.

<feGaussianBlur
    stdDeviation="10"
    result="effect1_foregroundBlur"
/>

Posted May 21, 2020