Woodcut graphics
Woodcut graphics
Printmade marks, slightly rough at the edge. Black on light grounds, chalk on night. Sometimes printed in one of the three illustration inks (blue, deep green, mustard), and the occasional red seed. Part of the SoR design system; see them rendered in guide.html.
Using them
Include system/graphics.js at the top of the body; it inlines the symbols. Then:
<svg class="seed-icon" viewBox="0 0 100 100" aria-hidden="true"><use href="#s-wheat"/></svg>
Colour follows currentColor: the .woodcut class sets ink, and inside .night it turns chalk.
The set
| Symbol | viewBox | Use |
|---|---|---|
#wsw | 0 0 248 150 | The swallow. Single, or three in flight as a flock over a hero (.flock, see home.html). |
#seal | 0 0 120 120 | Swallow seal. Closes a long text (.seal), or sits in the corner of the night section (.seal-corner). |
#s-sunflower | 0 0 100 100 | Seed: Gather |
#s-wheat | 0 0 100 100 | Seed: Practise |
#s-bean | 0 0 100 100 | Seed: Belong |
#s-samara | 0 0 100 100 | Seed (maple key): Seed / Gardens of Change |
#s-acorn, #s-pumpkin, #s-stone, #s-dandelion | 0 0 100 100 | Other seeds, free to use |
#c-spiral | 0 0 200 200 | Sunflower spiral, behind a page title (.page-hero .spiral) |
#c-scatter | 0 0 280 170 | A handful scattered, above an interlude |
#c-row | 0 0 290 120 | A sown row, as a divider (.seed-row) |
The four pathway seeds stay attached to their pathways everywhere: site, thumbnails, slides.
Black and red
There is a set in black (ink) and a set in red (system/woodcuts/seeds-red.svg, the logo red). Spread them across a page to make it more dynamic and personal: to make a quote stand out, as a background, or to punctuate a section. Red woodcuts are the one place red is used as a graphic rather than a link; keep them occasional.
Rules
- One graphic moment per section at most. They are punctuation, not wallpaper.
- Don't recolour them beyond black, chalk, the illustration inks and the red set. Don't outline them or add drop shadows.
- One ink per graphic. Two or more on a page is fine if each graphic keeps to one.
- Don't mix in drawn suns or icon-set icons; the sun marks of an earlier version were rejected.
The wider set
All twenty woodcuts (swallows, mountains, leaves, wind, fruit, people in a circle, seeds) are shown on any ground in woodcuts.html. The SVG files, the script that draws them and notes on each are in system/woodcuts/; any file can be inlined as-is and takes the ink of its ground. Rebuild the page with python3 system/build-woodcuts.py. Only the symbols above are in the system sprite so far; add others to system/graphics.svg and run python3 system/build-graphics.py.
Animals
Animal woodcuts, linocuts and engravings, cut out of their paper: fox, swan, owls, bear, boar, swallow, hedgehog, snake and more. Each comes in black and the three illustration inks, as an SVG and a transparent 1000px PNG. See every version and open each file in the animals gallery; files, sources and how to add one are in system/animals/. They follow the same rules as the woodcuts above: one per section at most, punctuation, not wallpaper.
Mountains
Blue pen, brush and linocut mountains, cut out of their paper: a high peak, a small peak, a peak above mist, a range with contour lines, a 1934 ridge sketch, a brush ridge, and a linocut of peaks over waves (also on its old map). Each comes in the blue it was drawn in, cobalt and black; the linocut also in three lighter blues. See every version in the mountains gallery; files, colours and how they were made are in system/mountains/. A candidate look for a sub-brand.
The drawn blues are an exception for the mountains only (see colour): don't retint them in other colours, and don't print other graphics in those blues. Pen and brush drawings are transparent PNGs whose transparency follows the ink, so light hatching stays light; only the linocut has an SVG. Same rules as above: one per section at most.
Open: hand-draw the woodcuts, or base them on public-domain prints?
