Illustrations

Mon, 15 Jan 2024 00:00:00 +0000

Drawing in the Browser

Browser-native illustration occupies a fascinating space between design and engineering. Every shape is a DOM element or SVG path. Every color is a computed value. Every shadow and gradient follows the browser’s rendering pipeline. The constraints are real, but they produce work with qualities that raster illustrations cannot match: resolution independence, interactivity, animatability, and the ability to be styled with CSS.

This collection features illustrations built entirely with HTML/CSS, SVG, or a combination of both. No embedded raster images, no canvas bitmaps. The pieces range from simple geometric compositions to detailed scenes with dozens of layered elements.

SVG Workflows for Interface Illustration

Thu, 05 Oct 2023 00:00:00 +0000

SVG sits at the heart of most serious browser-native illustration work. It scales without loss, it lives in the DOM, it responds to CSS, and it can be animated frame-by-frame or with smooth transitions. But the workflow between creating SVG in a design tool and shipping it in a production interface is full of friction that rarely gets discussed in beginner tutorials. This guide covers the full pipeline from tool export to browser delivery, with practical techniques drawn from years of illustration work for web interfaces. We address export cleanup, path optimization, accessibility labeling, CSS integration, and the structural decisions that determine whether your SVG is maintainable or becomes a liability.

Illustration on Give 'n' Go

Illustrations

Drawing in the Browser

SVG Workflows for Interface Illustration