The Web Design

Cheat

Code

By Lea Verou (@LeaVerou)

Fronteers 2010

Fronteers 2011

Fronteers 2012

Fronteers 2019

SVG Primer
viewBox

viewBox defines the coordinate system
viewBox defines the aspect ratio, unless preserveAspectRatio="none"
viewBox with no width and height makes the SVG scale to fill the entire area

You can have multiline data URIs by escaping each line with a \
You can embed SVG in your CSS with data URIs, and you don’t need to %encode most characters

You can use these data URIs to create images out of characters
You can even create animated backgrounds, with CSS animations inside the embedded SVG!

CSS variables to reduce duplication?


			meter {
				width: 15em; height: 3em;
				--star-opacity: .2;
				background: url('data:image/svg+xml,\
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
					<text font-size="100" y=".8em" opacity="' var(--star-opacity, 1) '">★') 0 / auto 100%;
			}

			meter::-webkit-meter-optimum-value { /* ::-moz-meter-bar for Gecko */
				--star-opacity: 1;
				background: inherit;
			}

😢 Nope 😢

Why can’t we use CSS variables in `url()`?

No concatenation in CSS
Special parsing rules to support unquoted URLs
New functions to solve these are coming!

Reduce duplication with preprocessors


			@function inline-svg($content, $attr:'') {
				@return url('data:image/svg+xml,\
				<svg xmlns="http://www.w3.org/2000/svg" #{$attr}>\
				#{$content}</svg>');
			}
		
		


		
			@function svg-emoji($char, $attr:'') {
				@return inline-svg(
				        '<text font-size="100" y=".8em" #{$attr}>#{$char}</text>',
				        'viewBox="0 0 100 100"');
			}

		
			meter {
				width: 15em; height: 3em;
				background: svg-emoji('★', 'opacity=".2"') 0 / auto 100%;
			}

			meter::-webkit-meter-optimum-value { /* ::-moz-meter-bar for Gecko */
				background: svg-emoji('★') 0 / auto 100%;
			}

You can use CSS variables
for the entire URL

SVG data URIs can help you create bulletproof custom list bullets

Idea suggested by Amelia Bellamy-Royds

sketchy borders

stroke-dasharray lets you create custom dashed borders
stroke-dashoffset lets you move them and is animatable!

No viewBox or dimensions lets your SVG background occupy the entire element

stroke-dasharray: 0% 400% to 400% 400%

stroke-dasharray accepts percentages, relative to sqrt(d²/2)
Animating it from 0% 400% to 400% 400% makes the element draw progressively

SVG supports gradient strokes, though with an unwieldy syntax
You can apply those to HTML elements via data URIs!
You need to escape # as %23 because it's a reserved character in URLs

baseFrequency, numOctaves, seed, scale, attributeName, dur, values, repeatCount

You can use calc() in geometry attributes, but no yet

To support Firefox too:


			<g style="filter: url(#scribble); stroke: black; stroke-width: 4px">
				<line x2="100%" transform="translate(0 3)" />
				<line y2="100%" transform="translate(3)" />
				<line x1="100%" x2="100%" y2="100%" transform="translate(-3)" />
				<line y1="100%" x2="100%" y2="100%" transform="translate(0 -3)" />
			</g>

🤢🤮🤮

<feTurbulence> generates a pseudo-random image
<feDisplacementMap> shifts pixels around based on the pixel values of another image
Together they can be used to create a hand-sketched effect!

Squigglevision

You cannot animate filter parameters with CSS animations, but you can use SMIL!
Animating the seed of an <feTurbulence> filter creates Squigglevision!

SVG Filters on HTML Content

If you use a data URI in the filter property, animation is disabled
Including the filter in your HTML fixes that

Fronteers 2010

Fronteers 2011

Fronteers 2012

Fronteers 2019

CSS variables to reduce duplication?

Why can’t we use CSS variables in url()?

Reduce duplication with preprocessors

To support Firefox too:

Squigglevision

SVG Filters on HTML Content

Why can’t we use CSS variables in `url()`?