Illustration Line Interior

Meng ToCommunityCreated by Meng To

Skill
Content generator
Design and creative
MIT
Low risk
Has scripts

From the author

Draws original hand-written SVG spot scenes in the Line interior style, wide airy rooms or terraces where slim, realistic people do design and coding work. A thin uniform indigo outline (1.4 px at 480 wide) runs around mostly white fills. Sparse flat accents (teal, sage, coral, mustard, lavender, peach wood) cover under 7% of the card. Pale lavender 1 px background decor (brick clusters, pendant lamps, framed posters) sits behind, and a long floor line with end dashes runs under it all. Covers the palette, line weights, heads and hands from a parts toolkit, composition and a render-critique loop. Use when asked for line-art, thin-line or outline illustrations, indigo line art, office, desk, home-workspace, remote-work or team scenes, or interior spot illustrations for empty states, onboarding screens, 404 pages, blog headers, feature spots, landing sections or marketing cards.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach and a parts toolkit for creating original SVG illustrations in a specific line-art style. The style features slim, realistic figures in airy interior settings, characterized by a uniform 1.4 px indigo outline, white fills, and sparse flat-color accents. It includes technical specifications for line weights, color palettes, character proportions, and composition, alongside a Node.js-based generator to ensure consistency across assets.

What it does

Provides a parts toolkit for building SVG scenes with consistent line weights and styles.
Defines a specific color palette centered on indigo outlines and white fills with limited accents.
Includes scripts for rendering, linting, and verifying SVG files against style constraints.
Offers guidance on character construction, including poses, limb proportions, and hand anatomy.
Supports the creation of interior spot illustrations for marketing, onboarding, and empty states.

When to use it

When you need to generate consistent, editorial-style line art for product marketing.
When creating illustrations for empty states, 404 pages, or blog headers.
When you require a specific 'people at work' aesthetic for design or coding-themed content.
When you need to maintain a strict visual identity across a set of SVG assets.

Advantages

Ensures visual consistency through a shared toolkit and linting process.
Provides precise technical specifications for line weights and color usage.
Reduces design overhead by offering reusable components for common scene elements.
Includes automated verification tools to maintain style adherence.

Usage examples

“Create an illustration of a developer working at a standing desk with a monitor.”: Generates an SVG scene featuring a slim figure at a desk, using the specified indigo outline style, with the developer performing a relevant action like typing or coding.
“Generate a 404 page illustration showing a person looking at a bookshelf.”: Produces a line-art scene of a person reaching for a book on a ladder shelf, adhering to the defined palette and composition rules.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/mengto/illustration-line-interior/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip illustration-line-interior.zip -d .agents/skills

Documentation by Meng To

Illustration: Line interior

A calm, editorial line style: a whole room at small scale, people at about one seventh head-to-height, every shape outlined once in thin indigo and filled white, with a few flat accents. It suits product marketing that wants "people at work" without loud colour. Use illustration-outlined-cartoon for big-headed characters with a near-black ~2.4 px ink line and bold fills. Use illustration-framed-panel when the scene should sit inside a coloured panel on a pastel card. Use illustration-flat when there should be no outlines at all.

Extracted from a set of 42 original design-and-coding cards in 14 styles; the three cards in examples/ are this style's shipped cards.

The look in one sentence

One thin, uniform indigo outline (1.4 px) around white-filled shapes in a wide, airy room, with flat colour on under 7% of the card.

Palette

Measured from the three examples (fills and strokes, 1x renders). White and the card make up about 85% of the pixels, indigo line about 2%, accents 4–7%.

Role	Hex	Where it goes
Indigo ink	`#3a2d66`	every outline, the floor line, eye dots, indigo hair (hair is a filled ink shape)
Wall line	`#cfc9e0`	background decor strokes only (bricks, lamps, posters, clouds, birds, skyline, railing). Never a fill
White	`#ffffff`	default fill for everything: furniture, shirts, screens, pots, books, sneakers, mugs
Peach wood	`#f9c99a`	wood: ladder rails and boards, posts, stool, crate, a striped pot
Mustard	`#f5c35a`	one book, a duck, bulbs, sneakers, sticky notes, earring stud, a top
Orange	`#f6a85e`	a pot, trousers, a duck beak, shine arcs on brown hair, one code dash
Coral	`#ef5b5b`	sneakers or soles, a label, a marker tip, a mug band, one code dash, window dot
Teal	`#3fa58a`	a book, a top, a mug band, a hammock stripe, a check mark
Sage / Leaf	`#8cc79b` / `#5fae7a`	light and dark leaves, alternating leaf by leaf
Lavender	`#ab9ee6`	a book, a top, page lines, keyboard lines, a sneaker sole
Purple	`#7f6cc4`	a book, trousers, shine arcs on indigo hair, one code dash
Denim	`#7f9fdc`	jeans
Brown	`#7b4b3a`	brown hair, coffee in a cup
Skin	`#f3cdb0` `#e2a57c` `#b47852` `#7a4b33`	light, medium, deep, dark; two people in a card get two different tones

Never: gradients, opacity, drop shadows, hatching, black, grey fills, the wall-line colour as a fill, a coloured background rect.
One accent per object. A person wears at most two accents plus white: top, trousers, and sneakers where either the upper or the sole is white.
No two large accent shapes of the same hue touch (a coral shoe on a coral rug). Keep the big shapes (shelf, board, desk, hammock) white or peach.

Line and fill

Two layers. Background: <g id="xx-bg" fill="none" stroke="#cfc9e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">. Foreground: <g id="xx-fg" stroke="#3a2d66" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">. Shapes inherit the stroke; each sets its own fill.
Outlines are strokes on filled shapes, never filled outline shapes. Every foreground shape gets a fill (white if nothing else), so overlap hides what is behind. Depth comes only from overlap order: draw back to front, far limbs before the torso.
Weights at 480 wide: 1.4 for every outline; 1 for detail lines (fabric folds, leaf veins, book bands, lace ticks, ear inner, brows, nose, mouth, steam, x marks, hair shine); 0.9 for finger separations; 1.2 for whiteboard diagram strokes; 1.7–1.8 coloured dashes for code on screens; 2.2 for bullet dots (M190 146h0.1).
Shading: none. No tone steps, no hatching, no highlights. A fold is one 1 px curve, 4–8 px long, 2–3 per garment.
Texture: tiny x marks (xm(), 3 px, stroke 1), 2–4 per pot or box. Never on clothing.
Lettering: font-family="ui-monospace, monospace" font-weight="700", 4.4–5.2 px, 2–5 letters (JS, CSS, UX, API, CACHE) on a small label rect, stroke="none".
Rounded corners: rx 0.6–1 on books and bricks, 1.5–2.5 on furniture tops and frames.

Characters

Proportions: a standing figure is 229–235 px from crown to sole; the head (chin to crown) is 33–36 px, so 1:7. Slim: shoulders about 30 wide, legs with hip half-width 9.6–11 tapering to 5.6–5.8 at the hem.
Head: build it with head() from the toolkit. It draws a 3/4 profile facing left or right: one face path with the nose and chin in the contour, an ear on the back side, a near eye dot (r 1.15) and a far eye dot (r 1.0) 4.9 apart, two 1 px brows, a nostril tick and a short mouth arc. No cheek colour, no pupils, no open mouths. Calm, slightly smiling.
Hair: one flat shape in indigo #3a2d66 (1–4 shine arcs in purple #7f6cc4) or brown #7b4b3a (shine in orange #f6a85e). Presets: afro, bun, side, crop (+ beard, glasses, earring). The afro's back mass returns as behind: draw it before the torso.
head(x, y, rot, opts) rotates in screen degrees (+ = clockwise). That nods a right-facing head DOWN and a left-facing head UP. Tilt 4–9° toward what the person looks at.
Neck and torso: torso(hx, hy, { style: 'tee' | 'top', facing, fill, skin }) draws the neck, a soft shirt shape 30–34 wide (crew-neck tee or fitted top with a small V collar) and two 1 px folds, all placed from the head centre. TORSO_ANCHORS[style] gives the shoulder, hip and waistband points relative to the head centre. Mirror their x for a left-facing figure. Tops are white or one accent.
Sleeves: sleeve(S, arm.u, 13, 5.8) caps the upper arm; drawn after the arm. A flatter sleeve (half-width under 6) avoids a shoulder-pad look.
Arms: bentArm() with half-widths 4.4–5 shoulder, 4–4.4 elbow, 3.2–3.4 wrist. It gives a pointed outer elbow; add the 3 px crease line from arm.I. Upper arm 27–40, forearm 24–33. Use solveElbow(S, wrist, 35, 30, flip) and try both flip values: the right one hangs the elbow below the shoulder-to-wrist line. Keep the wrist 45–60 px from the shoulder. Closer, and the arm folds into a chicken wing.
Put a fingertip on a target with wristFor(HANDS[name].tip, target, angle, scale, flip). It returns the wrist point to solve the arm to.
The far arm in a profile view: show it. Swing it back behind the hip (or forward behind a held object), drawn before the torso, so a forearm and a rest hand show below the torso. A figure with one arm reads as "an arm is missing".
Hands (toolkit HANDS): 17 local units at scale 1.05–1.15, so 18–20 px long, about the face from chin to brow. Fingers are 3–4 rounded bands with 0.9 separation lines; the middle finger is longest, the little finger shortest. Shapes: type (palm down on keys), cup (wrapped round a mug, thumb over the rim), wrap (same, thumb hidden behind the object), marker (fist round a pen, with HANDS.marker.pen()), point (index out, thumb tucked), rest (relaxed).
Every hand shape has its thumb on local −y. Decide LEFT or RIGHT and PALM or BACK with the table in references/craft.md, then pass flip = true when the thumb belongs on +y.
Legs and feet: trouserLeg() for standing legs (tapered, flat hem, 5.2 px rolled cuff band, 4–10 px of ankle skin); bentLeg() + cuffAndAnkle() for sitting or stepping. sneaker() is 25 × 10.6 with a 3 px sole band and two lace ticks; heel at the floor point, mirrored with scale(-1 1). End each trouser leg at the shoe's shoeOpening(heel, rot, mirror).
Rear foot on its toes: heel = liftedHeel(toeX, 22–28, mirror), then sneaker(\translate(heel) rotate(deg)`). For a mirrored shoe use rotate(-deg) scale(-1 1)andshoeOpening(heel, -deg, true)`.
Poses that work: reaching up to a shelf or board, or pressing a button, with the upper body leaning 4–9° (rotate the upper-body group about the hip and the shoulder points with rotAbout()); the rear heel lifted so only the toe touches the floor; lying in a hammock with the laptop on the thighs; sitting on a stool, one foot on the rung, holding a cup.

Decor and props

Background layer (wall line, unfilled), all of it pale and secondary: 2–3 brick clusters of 3–5 bricks (bricks(), 14 × 6, rows 7 apart), 1–2 pendant lamps hanging from the card's top edge (lampDome(), lampCone()), 1 framed poster on a nail (poster()) with a simple icon inside. Outdoors: 2–3 outline clouds, 2–3 birds, a skyline and a railing instead of bricks.
Foreground, per card: one hero prop in the middle that carries the subject (ladder shelf 98 × 203, whiteboard on wheels 160 × 256, hammock between posts 260 wide); one tall plant in a pot at one end (60–68 wide, 150–185 tall); one secondary piece at the other end (desk with a monitor and mug, a short snake plant, a stool with a colleague); 2–4 small props (mug with two 1 px steam curls, books with band lines and labels, a rubber duck, sticky notes, a monitor with window dots and coloured code dashes).
Plants: leaf() (lance leaves with veins), figLeaf() (fiddle-leaf fig), blade() (snake plant), stems as 1.4 px open curves from the pot, leaves alternating sage and leaf green. Pots: pot(), white with x marks, peach with 1 px bands, or orange.
Never: sparkles, confetti, floating icons, speech bubbles, shadows under objects, rugs, more than two items on the floor beside the hero.

Composition

No background rect: the card is white (the examples have none). If the host page is not white, add a square full-bleed #ffffff rect first.
Floor line at y 308: M56 308H424M40 308h10M430 308h10. Every foot, pot, leg and caster stands on it. The band below (y 308–360) stays empty.
Content spans x 33–445. Only lamp cords touch an edge (the top). Everything else stays at y ≥ 25.
Left to right: tall plant (x 33–121) | hero prop with the figure acting on it (x 115–335) | secondary furniture or plant (x 330–445). Mirror this freely, but keep the hero central.
Figures: 94–190 px wide, 235 tall standing. One focal action, at the figure's hands.
Density: about 10–14 foreground objects including plant leaves; generous white space between groups. Busy is wrong here.
Group transforms the examples use: translate(-8 0) to nudge a whole figure; rotate(-7 284 180) on the upper-body group (neck, torso, head, sleeve) to lean it over the hips.

Techniques

1. A parts toolkit. scripts/interior.mjs (no dependencies) has every repeated part with the examples' numbers: layers, floor, bricks, lamps, poster, cloud, leaves, pots, limb, bentArm, solveElbow, sleeve, torso, trouserLeg, bentLeg, cuffAndAnkle, sneaker, shoeOpening, liftedHeel, rotAbout, HANDS + hand() + place() + wristFor(), head() and mirrorPath(). Run node scripts/interior.mjs --demo /abs/work/demo.svg from the skill folder (write it into your work folder, not the skill) and render it to see every part. The demo output is a parts sheet: four heads, six hands with thumbs up, two plants, the lamps, the bricks and a standing figure built from the parts.

A complete figure, tested: a woman facing left points at a chart. Save it as card.mjs next to your card, fix the import path, and run node card.mjs.

import fs from 'node:fs';
import * as LI from '/abs/path/to/illustration-line-interior/scripts/interior.mjs';
const { W, C, SKIN, FL, P, f } = LI, id = 'sn-', sk = SKIN.medium;
const HC = [300, 102], A = LI.TORSO_ANCHORS.top, rel = q => [HC[0] - q[0], HC[1] + q[1]];  // facing left: mirror x
const LEAN = -5, PV = [300, 188];                                   // lean toward the left, about the hips
const h = LI.head(HC[0], HC[1], -4, { hair: 'bun', facing: 'left', skin: sk, hairColor: C.brown, earring: true });
const heelB = LI.liftedHeel(300, 24, true);                         // rear heel up, toe on the floor
const legF = LI.trouserLeg([[296, 188], [293, 230], [291, 270], [290, 291]], [10, 8, 6.2, 5.8], LI.shoeOpening([297, FL], 0, true), C.denim, sk);
const legB = LI.trouserLeg([[306, 188], [309, 230], [313, 262], [316, 282]], [10.6, 8.4, 6.4, 5.8], LI.shoeOpening(heelB, -24, true), C.denim, sk);
let fg = LI.floor(id);
fg += `<rect x="150" y="96" width="70" height="54" rx="2" fill="${W}"/><path d="M158 138l14-16 10 9 12-15 16 12" fill="none" stroke="${C.teal}" stroke-width="1.8"/>`;
fg += legB.skin + LI.sneaker(`translate(${P(heelB)}) rotate(-24) scale(-1 1)`, C.coral, W) + legB.leg;
fg += legF.skin + LI.sneaker(`translate(297 ${FL}) scale(-1 1)`, C.coral, W) + legF.leg;
fg += `<rect x="284" y="${HC[1] + A.waistTop}" width="33" height="5" rx="0.8" fill="${C.denim}"/>`;
fg += `<g transform="rotate(${LEAN} ${P(PV)})">${LI.torso(HC[0], HC[1], { style: 'top', facing: 'left', fill: C.lav, skin: sk })}${h.front}</g>`;
// near arm = LEFT (she faces left); back of the hand visible, index pointing left -> thumb UP.
// HANDS.point keeps its thumb on local -y; at 186 deg local -y points DOWN, so flip = true.
const S = LI.rotAbout(rel(A.nearShoulder), LEAN, PV), ang = 186, tip = [221, 124];
const Wr = LI.wristFor(LI.HANDS.point.tip, tip, ang, 1.1, true);
const arm = LI.bentArm(S, LI.solveElbow(S, Wr, 36, 30), Wr, 4.6, 4.2, 3.3);
fg += `<path d="${arm.d}" fill="${sk}"/><path d="M${P(arm.I)}l${f(-arm.u[0] * 3)} ${f(-arm.u[1] * 3)}" fill="none" stroke-width="1"/>`;
fg += `<path d="${LI.sleeve(S, arm.u, 13, 5.8)}" fill="${C.lav}"/>` + LI.place(LI.hand('point', sk), Wr[0], Wr[1], ang, true, id + 'hand', 1.1);
const bg = LI.bgLayer(id, LI.bricks(60, 80, [[0, 0], [15, 0], [7, 7]]) + LI.lampDome(380, 40));
fs.writeFileSync('card.svg', LI.svgWrap(bg + LI.fgLayer(id, fg), 'Snippet test, Line interior style'));

It still needs the far arm, a plant, the hero prop and the room. It shows the order: legs → waistband → leaned torso and head → near arm → sleeve → hand.

2. Hands without a wrist wedge. Draw the hand outline twice: once filled with stroke="none", once as an open path (the Z removed), then the 0.9 finger lines, then the thumb. hand() does this. A closed stroke across the wrist draws a dark wedge where the forearm meets the hand.

3. Lean by group rotation. Put the torso (with its neck), any backpack or strap and the head in one <g transform="rotate(-7 hipX hipY)">. Solve the arms in card coordinates from rotAbout(shoulder, -7, [hipX, hipY]), so the hand still lands on the object, and draw the arm, sleeve and hand outside the group.

4. Screen and board content in colour, not ink. Code on a monitor is 4–6 rows of round-capped dashes, stroke-width="1.8", each dash one accent (purple, teal, coral, lavender, orange), on a white screen with three window dots (coral, mustard, teal, r 0.9). Diagrams are 1.2 px boxes and arrows in ink, one box in coral and one in teal.

Failure modes

Too much colour. The first Books draft (scored 6) had a mustard top, a brown shelf, an orange pot and x marks on the clothes. The redraw that reached 8 used colour more sparingly. Keep big shapes white or peach, and accents under 7% (white ≥ 83%).
The subject reads as something else. A developer standing at a desk read as "standing desk", not "Books". The figure must do the subject: pull the book off the shelf, draw on the board.
Bolt-upright clip-art figure. Lean the upper body 4–9°, put the weight on one leg, lift the rear heel. Front-facing symmetric poses score a point lower.
Dark wedge at the wrist. A closed outline across the wrist. Use hand() (fill pass plus open outline).
Thumb on the wrong side. Two shipped hands were copies of a right-hand template on a left arm (Remote Work's far typing hand, Whiteboard's mug hand), and both had to be mirrored. Work out handedness per hand, then flip.
Mitten or rake hands. Fingers must be grouped bands of different lengths with rounded tips, 18–20 px long. Larger reads as a glove.
Arm with no elbow. A straight tube from shoulder to object reads as a prosthetic. Use bentArm() and the crease line.
Chicken-wing arm. The target sat 33 px from the shoulder, so a 66 px arm folded up with the elbow out. Move the prop or the figure until the wrist is 45–60 px from the shoulder, and try the other flip.
One-armed figure. A profile figure with the far arm hidden reads as missing an arm. Swing the far arm back so its forearm and hand show behind the hip.
Stray ticks. A 1 px fold line within 4 px of a limb's edge, or a strap end poking 2 px out from under a sleeve, reads as a slip. End a covered shape at least 3 px inside the shape that covers it, and keep folds away from other contours.
Floating feet or pots. Sneaker heels sit at y 308 exactly. A rotated rear shoe touches the floor with its toe. Check every contact at 8x.
X marks on clothes. They read as stains. Keep them on pots and boxes.
Background competing with the figure. Decor drawn in indigo or filled looks like foreground clutter. It is wall-line #cfc9e0, 1 px, unfilled, and sits at least 8 px clear of the figure's head.
Weight drift. A 2 px outline or a 0.6 px detail breaks the style at once. Use exactly 1.4, 1 and 0.9.

Examples

examples/books.svg: "Books". A reaching pose with a −7° lean and a bent near arm gripping a book on the shelf (thumb on top). The far hand holds an open book at the hip. Afro back hair is drawn behind the torso. Ladder shelf with labelled books, a duck, a desk with a monitor, lance-leaf plant.
examples/remote-work.svg: "Remote Work". Lying in a hammock with both hands on a laptop (type hands, mirrored for left and right). Outdoor variant of the background (clouds, birds, skyline, railing), string lights, a crate with a mug, monstera leaves, a snake plant. A clipPath hides the legs behind the hammock rim.
examples/whiteboard.svg: "Whiteboard". Two people: one reaching up with a marker fist and a wrap hand on a mug, one seated on a stool with a cup hand, beard and glasses. Diagram content in 1.2 px ink and accent strokes, sticky notes, casters on the floor line, fig plant.

Workflow

Run every command from this skill's folder. Card paths can be absolute.

Brief. Name the subject in a few words and write the one action that shows it (who does what to which prop). Pick the hero prop and the pose.
Plan the layout on the 480 × 360 grid: floor y 308, plant at one end, hero prop centred, secondary piece at the other end. Pick the skin tones, hair presets and the 2 accents each person wears. Choose an id prefix (ob-).
Write a generator (card.mjs) that imports scripts/interior.mjs by absolute path and writes card.svg. Start from the Techniques snippet. Look at the --demo parts sheet once. Hand-place the figure and the hero prop; take everything repeated from the toolkit. Print the solved shoulder, elbow and wrist points so you can find them when you zoom.
Hands first, on paper. For each hand, write down LEFT or RIGHT, PALM or BACK, and the finger direction, then the thumb side (see references/craft.md). Choose the HANDS shape and flip.
Render: node scripts/render.mjs card.svg card.png.
Sheet with the examples: node scripts/render.mjs --sheet sheet.png examples/books.svg examples/remote-work.svg examples/whiteboard.svg card.svg. Ask "same hand, same set?": line weight, white share, density, floor, decor.
Zoom every hand, face, foot and contact: node scripts/render.mjs card.svg z-hand.png --zoom x,y,w,h --scale 8. Do the thumb proof from references/craft.md for every hand.
Critique against the five criteria in references/craft.md and the Verify list below. Fix, re-render, re-sheet. Expect four or more rounds.
Lint: node scripts/lint.mjs card.svg --prefix ob- --palette style.json. Fix every ERROR. Each WARN must be a deliberate tint.

Verify

[ ] Every foreground outline is #3a2d66 at 1.4; details are 1, finger lines 0.9; no other weights apart from code dashes (1.8) and diagram strokes (1.2).
[ ] Background decor is #cfc9e0, 1 px, unfilled, and never overlaps a head.
[ ] On the sheet, the colour looks no heavier than the examples (they measure 84–86% white pixels, accents 4–7%). The big shapes are white or peach, and nothing uses a gradient, opacity or shadow.
[ ] Floor line at y 308 with both end dashes, and every foot, pot, leg and caster touches it.
[ ] Lamps hang from y 0; nothing else touches a card edge; the y 308–360 band is empty.
[ ] A standing person is about 230 px tall with a head about 34 px (1:7).
[ ] Each person wears at most two accents plus white; two people have different skin tones.
[ ] Every hand is 18–20 px long, has 3–4 grouped fingers with 0.9 separation lines, and its thumb is on the side the craft table gives (thumb proof done).
[ ] Every arm has a shoulder, a pointed elbow with a crease, and a wrist narrower than the hand. Both arms show, even in profile.
[ ] The upper body leans or twists; the weight is on one leg or on a seat.
[ ] The subject reads at 1x from the figure's action alone, without the labels.
[ ] No x marks on clothing; 2–4 on pots or boxes at most.
[ ] lint.mjs --palette style.json passes with no unexplained WARN.

Files

ATTRIBUTION.mdAdded by AutoGineer876 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md21.8 KiB
agents/openai.yaml344 B
demo/PROMPT.md2.1 KiB
demo/index.html77.8 KiB
demo/preview.jpg114.4 KiB
examples/books.svg18.3 KiB
examples/remote-work.svg28.3 KiB
examples/whiteboard.svg22.1 KiB
references/craft.md10.3 KiB
scripts/interior.mjsScript34.2 KiB
scripts/lint.mjsScript3.0 KiB
scripts/render.mjsScript5.0 KiB
style.json3.0 KiB

demo/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Line Interior Illustrations</title>
<meta name="description" content="One thin uniform indigo outline (1.4 px) around white-filled shapes in a wide, airy room, with flat colour on under 7% of the card.">
<style>
  :root{--bg:#f6f6f8;--card:#fff;--ink:#16161d;--muted:#5f5f6b;--line:#e4e4ec;--focus:#4b5cff}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
  header,main{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}
  header{padding-top:40px;padding-bottom:22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:end}
  .kicker{grid-column:1/-1;margin:0;font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);letter-spacing:.02em}
  h1{margin:0;font-size:clamp(30px,4.2vw,44px);line-height:1.05;letter-spacing:-.025em;font-weight:650}
  .lede{grid-column:1;margin:6px 0 0;max-width:68ch;color:#3d3d48;font-size:17px}
  .meta{grid-column:2;grid-row:2/4;margin:0;text-align:right;font-size:13px;color:var(--muted);line-height:1.6}
  .meta code{display:inline-block;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:#fff;padding:7px 9px;border-radius:8px;outline:1px solid var(--line)}
  .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .card{position:relative;background:var(--card);border-radius:18px;aspect-ratio:4/3;overflow:hidden;
    box-shadow:0 0 0 1px #0000000a,0 2px 4px -1px #0000000f,0 10px 24px -8px #0000001f;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .card svg{display:block;width:100%;height:100%}
  .item:hover .card{transform:translateY(-4px);box-shadow:0 0 0 1px #0000000a,0 4px 8px -2px #00000014,0 22px 40px -14px #0000002e}
  .dl{position:absolute;right:12px;top:12px;border:0;outline:1px solid var(--line);background:#fffffff0;color:var(--ink);font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    padding:8px 10px;border-radius:8px;cursor:pointer;opacity:0;transition:opacity .2s}
  .item:hover .dl,.dl:focus-visible{opacity:1}
  .dl:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  h3{margin:12px 2px 0;font-size:16px;font-weight:550;letter-spacing:-.01em}
  .item p{margin:2px 2px 0;font-size:14px;color:var(--muted)}
  .spec{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;margin-top:48px;padding:32px 0 72px;border-top:1px solid var(--line)}
  h2{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 16px}
  .swatches li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;gap:1px 10px;align-items:start}
  .chip{grid-row:1/4;width:40px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px #00000014}
  .swatches b{font-size:14px;font-weight:550;line-height:1.2}
  .swatches code{font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted)}
  .swatches small{font-size:12px;color:var(--muted);line-height:1.3}
  .more{margin:16px 0 0;font-size:13px;color:var(--muted)}
  .more code{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .line{margin:0 0 26px;font-size:15px;color:#3d3d48;max-width:52ch}
  .rules{margin:0;padding-left:18px;font-size:15px;color:#3d3d48}
  .rules li{margin:0 0 6px}
  @media (hover:none){.dl{opacity:1}}
  @media (prefers-reduced-motion:reduce){.card,.dl{transition:none}.item:hover .card{transform:none}}
  @media (max-width:900px){.row{grid-template-columns:repeat(2,minmax(0,1fr))}.spec{grid-template-columns:1fr;gap:32px}
    header{grid-template-columns:1fr}.meta{grid-column:1;grid-row:auto;text-align:left;margin-top:8px}}
  @media (max-width:560px){.row{grid-template-columns:1fr}header,main{padding-left:16px;padding-right:16px}header{padding-top:28px}
  </style>
</head>
<body>
<header>
  <p class="kicker">Hand-written SVG · paths · no raster images, no scripts in the art</p>
  <h1>Line Interior</h1>
  <p class="lede">One thin uniform indigo outline (1.4 px) around white-filled shapes in a wide, airy room, with flat colour on under 7% of the card.</p>
  <p class="meta"><code>$illustration-line-interior</code><br>Style 04 of 14 · 480 × 360 cards</p>
</header>
<main>
  <section class="row" aria-label="Example cards">
      <article class="item">
        <div class="card">
          <button class="dl" type="button" data-name="books" aria-label="Download Books SVG">SVG</button>
          <svg role="img" aria-label="Books, Line interior style" viewBox="0 0 480 360">

<g id="s4-bg" fill="none" stroke="#cfc9e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <g id="s4-bricks-a"><rect x="54" y="74" width="14" height="6" rx="0.6"/><rect x="69" y="74" width="14" height="6" rx="0.6"/><rect x="61" y="81" width="14" height="6" rx="0.6"/><rect x="76" y="81" width="14" height="6" rx="0.6"/><rect x="54" y="88" width="14" height="6" rx="0.6"/></g>
  <g id="s4-bricks-b"><rect x="416" y="150" width="14" height="6" rx="0.6"/><rect x="408" y="157" width="14" height="6" rx="0.6"/><rect x="423" y="157" width="14" height="6" rx="0.6"/><rect x="431" y="164" width="14" height="6" rx="0.6"/></g>
  <g id="s4-bricks-c"><rect x="352" y="252" width="14" height="6" rx="0.6"/><rect x="367" y="252" width="14" height="6" rx="0.6"/><rect x="359" y="259" width="14" height="6" rx="0.6"/></g>
  <g id="s4-lamp-a"><path d="M182 0V52"/><path d="M170 64C170 56.5 175.5 52 182 52S194 56.5 194 64Z"/><path d="M179 64.5a3 3 0 0 0 6 0"/><path d="M182 71v5M174 69.5l-2.5 4M190 69.5l2.5 4"/></g>
  <g id="s4-lamp-b"><path d="M404 0V86"/><path d="M400 86h8l6 12h-20Z"/><path d="M401 98.5a3 3 0 0 0 6 0"/><path d="M404 105v5M396 103.5l-2.5 4M412 103.5l2.5 4"/></g>
  <g id="s4-poster">
    <path d="M354 66L334 78M354 66L374 78"/>
    <rect x="330" y="78" width="48" height="58" rx="1"/>
    <rect x="335" y="83" width="38" height="48"/>
    <path d="M339 88h30M339 92h9"/>
    <rect x="339" y="96" width="30" height="16"/>
    <path d="M342 110l7-9 5 6 4-3.5 7 6.5"/>
    <circle cx="363" cy="100.5" r="2"/>
    <path d="M339 117h24M339 121h15M339 125h11"/>
    <path d="M358 127l3.5-5.5 3.5 5.5Z"/>
  </g>
</g>
<g id="s4-fg" stroke="#3a2d66" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<path id="s4-floor" d="M56 308H424M40 308h10M430 308h10" fill="none"/>

<g id="s4-plant">
  <path d="M88 271C86 250 81 232 74 216M88 271C89 238 88 200 86 168M88 271C90 250 95 232 101 213M87 271C84 262 79 256 72 252M89 271C92 263 97 259 104 255" fill="none"/>
  <path id="s4-leaf-1" d="M74 217C78.83 209.82 73.19 198.09 67.43 190.28C62.6 183.95 57.29 179.3 55 178C54.05 180.88 52.89 188.68 53.67 196.98C56.19 206.37 64.26 216.92 74 217Z" fill="#8cc79b"/><path d="M73.01 215.55Q62.7 198.38 56.34 182.17M66.4 205.26L68.73 199.3M65.11 202.99L58.64 201.32M61.59 196.02L64.33 189.86M60.55 193.63L54.48 191.76" fill="none" stroke-width="1"/>
  <path id="s4-leaf-2" d="M86 170C94.73 164.61 96.23 150.57 93.42 140.62C89.65 132.6 84.4 126.11 82 124C80.62 126.44 78.29 133.59 77.33 142.02C76.36 152.3 77.7 166.09 86 170Z" fill="#5fae7a"/><path d="M86.09 168.14Q85.99 146.83 83.02 128.55M86.4 155.13L91.46 150.06M86.33 152.36L80.86 148.2M85.72 144.07L90.31 139.04M85.37 141.32L79.45 137.2" fill="none" stroke-width="1"/>
  <path id="s4-leaf-3" d="M101 214C110.08 214.12 117.2 205.01 119.14 196.79C119.48 189.47 118.02 182.56 117 180C114.94 181.11 110.25 185.13 106.07 190.64C101.05 197.41 96.24 207.61 101 214Z" fill="#5fae7a"/><path d="M101.87 212.75Q110.81 197.85 115.96 183.66M107.65 203.84L113.7 202.54M108.76 201.87L106.26 196.54M111.74 195.8L117.38 194.3M112.6 193.71L109.68 188.19" fill="none" stroke-width="1"/>
  <path id="s4-leaf-4" d="M72 252.5C73.94 246.77 68.77 241.57 63.95 238.88C59.84 236.86 55.67 235.98 54 236C53.92 237.9 54.57 242.61 56.48 247.03C59.55 251.63 66.04 255.39 72 252.5Z" fill="#5fae7a"/><path d="M71.2 251.93Q62.32 244.99 55.59 237.88M65.67 247.84L66.2 243.65M64.53 246.92L60.27 247.95M61.26 243.98L61.94 239.62M60.21 242.96L56.1 243.82" fill="none" stroke-width="1"/>
  <path id="s4-leaf-5" d="M104 255.5C109.7 258.74 115.85 255.62 118.73 251.42C120.51 247.31 121.1 242.83 121 241C119.41 240.85 115.45 241.38 111.56 243.01C106.99 245.23 102.1 249.83 104 255.5Z" fill="#8cc79b"/><path d="M104.76 255.02Q113.15 249.01 119.5 242.69M109.99 251.5L114.09 252.87M111.06 250.7L110.49 246.58M114.16 248.13L118.11 249.32M115.14 247.22L114.42 242.93" fill="none" stroke-width="1"/>
  <path id="s4-pot" d="M74 277H102L98.5 308H77.5Z" fill="#ffffff"/>
  <rect id="s4-pot-rim" x="71.5" y="270.5" width="33" height="6.5" rx="1.5" fill="#ffffff"/>
  <path d="M81.5 287.5l3 3M84.5 287.5l-3 3M90.5 296.5l3 3M93.5 296.5l-3 3" fill="none" stroke-width="1"/>
</g>

<g id="s4-shelf">
  <path d="M136 308L150 106Q151.8 103.5 153.6 106L139.6 308Z" fill="#f9c99a"/><path d="M228.4 308L214.4 106Q216.2 103.5 218 106L232 308Z" fill="#f9c99a"/>
  <g id="s4-books-1">
    <rect x="154" y="120" width="8" height="24" rx="0.8" fill="#ffffff"/><path d="M154 123.5h8M154 140.5h8" fill="none" stroke-width="1"/><rect x="162" y="116" width="9" height="28" rx="0.8" fill="#ab9ee6"/><path d="M162 119.5h9M162 140.5h9" fill="none" stroke-width="1"/><rect x="171" y="117" width="12" height="27" rx="0.8" fill="#ffffff"/><path d="M171 120.5h12M171 140.5h12" fill="none" stroke-width="1"/><rect x="172.4" y="126.9" width="9.2" height="7" rx="0.6" fill="#ab9ee6" stroke-width="1"/><text x="177" y="132.1" font-family="ui-monospace, monospace" font-size="4.4" font-weight="700" text-anchor="middle" fill="#3a2d66" stroke="none">CSS</text><rect x="183" y="122" width="7" height="22" rx="0.8" fill="#ffffff"/><path d="M183 125.5h7M183 140.5h7" fill="none" stroke-width="1"/>
  </g>
  <g id="s4-books-2">
    <rect x="152" y="189" width="34" height="5" rx="0.8" fill="#ffffff"/><path d="M155 189v5" fill="none" stroke-width="1"/><rect x="154" y="184" width="30" height="5" rx="0.8" fill="#3fa58a"/><path d="M157 184v5" fill="none" stroke-width="1"/>
    <g id="s4-duck"><path d="M160 175.5C162 177.2 164.5 177.6 167.5 177.2H173C176.5 177.2 178.1 179.6 177.7 181.6C177.3 183.4 175.7 184 173.5 184H164.5C161.3 184 159.5 181.2 160 175.5Z" fill="#f5c35a"/>
    <circle cx="172.5" cy="172.6" r="4.1" fill="#f5c35a"/>
    <path d="M176.3 171.6l3.6 1.1-3.3 1.7Z" fill="#f6a85e" stroke-width="1"/>
    <circle cx="173.7" cy="171.6" r="0.75" fill="#3a2d66" stroke="none"/>
    <path d="M165.5 180.4c2 1.5 4.5 1.6 6.5.4" fill="none" stroke-width="1"/></g>
    <rect x="191" y="164" width="9" height="30" rx="0.8" fill="#ffffff"/><path d="M191 167.5h9M191 190.5h9" fill="none" stroke-width="1"/><rect x="200" y="167" width="11" height="27" rx="0.8" fill="#ffffff"/><path d="M200 170.5h11M200 190.5h11" fill="none" stroke-width="1"/><rect x="201.4" y="176.9" width="8.2" height="7" rx="0.6" fill="#ef5b5b" stroke-width="1"/><text x="205.5" y="182.1" font-family="ui-monospace, monospace" font-size="4.4" font-weight="700" text-anchor="middle" fill="#ffffff" stroke="none">UX</text>
  </g>
  <g id="s4-books-3">
    <rect x="148" y="214" width="9" height="30" rx="0.8" fill="#ffffff"/><path d="M148 217.5h9M148 240.5h9" fill="none" stroke-width="1"/><rect x="157" y="211" width="8" height="33" rx="0.8" fill="#ffffff"/><path d="M157 214.5h8M157 240.5h8" fill="none" stroke-width="1"/><rect x="165" y="216" width="10" height="28" rx="0.8" fill="#7f6cc4"/><path d="M165 219.5h10M165 240.5h10" fill="none" stroke-width="1"/><rect x="175" y="213" width="8" height="31" rx="0.8" fill="#ffffff"/><path d="M175 216.5h8M175 240.5h8" fill="none" stroke-width="1"/>
    <g transform="rotate(-9 185.5 244)"><rect x="185.5" y="213" width="9" height="31" rx="0.8" fill="#ffffff"/><path d="M185.5 216.5h9M185.5 240.5h9" fill="none" stroke-width="1"/></g>
  </g>
  <g id="s4-books-4">
    <rect x="146" y="288" width="40" height="6" rx="0.8" fill="#ab9ee6"/><path d="M149 288v6" fill="none" stroke-width="1"/><rect x="149" y="282" width="34" height="6" rx="0.8" fill="#ffffff"/><path d="M152 282v6" fill="none" stroke-width="1"/>
    <rect x="193" y="276" width="29" height="18" rx="1" fill="#ffffff"/><path d="M203 281h9M197 287l3 3M200 287l-3 3" fill="none" stroke-width="1"/>
  </g>
  <rect id="s4-board-1" x="145.25" y="144" width="77.49" height="3.5" rx="1" fill="#f9c99a"/><rect id="s4-board-2" x="141.82" y="194" width="84.35" height="3.5" rx="1" fill="#f9c99a"/><rect id="s4-board-3" x="138.39" y="244" width="91.22" height="3.5" rx="1" fill="#f9c99a"/><rect id="s4-board-4" x="134.96" y="294" width="98.08" height="3.5" rx="1" fill="#f9c99a"/>
</g>

<g id="s4-desk">
  <rect x="337" y="215" width="5" height="93" fill="#ffffff"/>
  <rect x="421" y="215" width="5" height="93" fill="#ffffff"/>
  <rect id="s4-drawer" x="384" y="215" width="42" height="16" fill="#ffffff"/>
  <path d="M400 223h10" fill="none"/>
  <rect id="s4-desk-top" x="332" y="210" width="100" height="5.5" rx="1.5" fill="#ffffff"/>
  <g id="s4-desk-plant">
    <path d="M342 201C341 196 338 193 334.5 192C335 196.5 338 199.5 342 201ZM342 201C343 195 346 191.5 349.5 190.5C349.5 195.5 346.5 199 342 201ZM342 201C342 196 341.5 191 342.5 187C344.5 190.5 344.5 196 342 201Z" fill="#8cc79b"/>
    <path d="M337 201h10l-1.6 9h-6.8Z" fill="#ffffff"/>
  </g>
  <g id="s4-monitor">
    <rect x="377" y="196" width="7" height="9" fill="#ffffff"/>
    <path d="M368 210l2.5-5h20l2.5 5Z" fill="#ffffff"/>
    <rect x="352" y="158" width="57" height="38" rx="2.5" fill="#ffffff"/>
    <rect x="355" y="161" width="51" height="29" rx="0.8" fill="#ffffff" stroke-width="1"/>
    <path d="M355 166h51" fill="none" stroke-width="1"/>
    <circle cx="358.5" cy="163.5" r="0.9" fill="#ef5b5b" stroke="none"/><circle cx="361.5" cy="163.5" r="0.9" fill="#f5c35a" stroke="none"/><circle cx="364.5" cy="163.5" r="0.9" fill="#3fa58a" stroke="none"/>
    <g fill="none" stroke-width="1.8">
      <path d="M359 170.5h7M369 170.5h10" stroke="#7f6cc4"/>
      <path d="M362 175h11M376 175h7" stroke="#3fa58a"/>
      <path d="M362 179.5h6" stroke="#ef5b5b"/><path d="M371 179.5h14" stroke="#ab9ee6"/>
      <path d="M365 184h12" stroke="#f6a85e"/>
      <path d="M359 186.5h0" stroke="none"/>
    </g>
    <path d="M391 170h11v10h-11Z" fill="#ffffff" stroke-width="1"/>
    <path d="M391.5 179.5l3.2-3.5 2.2 2 1.8-1.4 3.2 2.9" fill="none" stroke-width="1"/>
    <path d="M391 184h9" fill="none" stroke="#ab9ee6" stroke-width="1.8"/>
  </g>
  <g id="s4-mug">
    <path d="M424 199.5h1.4a4.6 4.6 0 0 1 0 9.2H424v-2.4h1.4a2.2 2.2 0 0 0 0-4.4H424Z" fill="#ffffff"/>
    <path d="M413 197h11.5v11.5q0 1.5-1.5 1.5h-8.5q-1.5 0-1.5-1.5Z" fill="#ffffff"/>
    <path d="M413 201.5h11.5" fill="none" stroke-width="1"/>
    <path d="M416.5 193c-1.5-2 1.5-3 0-5.5M421 193c-1.5-2 1.5-3 0-5.5" fill="none" stroke-width="1"/>
  </g>
</g>

<g id="s4-dev" transform="translate(-2 0)">
  <g id="s4-upper-back" transform="rotate(-7 284 180)">
  
<g id="s4-hair-behind" transform="translate(279 99)">
  <path id="s4-hair-back" d="M-8.51 -18.37A2.8 2.8 0 0 1 -4.21 -20.91A2.8 2.8 0 0 1 0.59 -22.28A2.8 2.8 0 0 1 5.59 -22.39A2.8 2.8 0 0 1 10.44 -21.22A2.8 2.8 0 0 1 14.84 -18.86A2.8 2.8 0 0 1 18.5 -15.46A2.8 2.8 0 0 1 21.17 -11.24A2.8 2.8 0 0 1 22.69 -6.48A2.8 2.8 0 0 1 22.94 -1.49A2.8 2.8 0 0 1 21.92 3.39A2.8 2.8 0 0 1 19.69 7.86A2.8 2.8 0 0 1 16.4 11.62A2.8 2.8 0 0 1 12.27 14.42A2.8 2.8 0 0 1 7.55 16.07L2 12L-8 -10Z" fill="#3a2d66"/>
  </g>
  </g>
  <path id="s4-far-arm" d="M281.97 172.33C277.04 175.22 257.33 186.81 252.4 189.71A3.3 3.3 0 0 0 255.6 195.49C260.67 192.85 280.96 182.31 286.03 179.67A4.2 4.2 0 0 0 281.97 172.33Z" fill="#b47852"/>
  <path id="s4-leg-far" d="M268 179C266 196 264 214 263.4 234C263.2 242 264.2 248 263.4 254C262.6 266 262 280 261.5 293H279.5C280 279 281 266 282 256C282.6 250 281.6 246 282.5 240L288 179Z" fill="#7f9fdc"/>
  <path d="M261 288H280.2L280.6 293.6H260.8Z" fill="#7f9fdc"/>
  <rect x="264" y="293.6" width="13" height="5" fill="#b47852"/>
  <g id="s4-shoe-far" transform="translate(247 308)">
    <path d="M28 0V-8C27 -10 25 -10.5 22 -10.5L14 -9.6C9 -8.6 4 -6.6 1.5 -4.2C-0.3 -2.6 -0.6 -1 0 0Z" fill="#ef5b5b"/>
    <path d="M28.4 0V-3H-0.2C-0.6 -1.6 -0.4 -0.5 0.4 0Z" fill="#ffffff"/>
    <path d="M9.5 -3C8.8 -5.6 6.6 -7.4 3.6 -7.6M16.5 -9.4l-1.6 2.6M20 -10l-1.6 2.6" fill="none" stroke-width="1"/>
  </g>
  <path d="M290 288.4L305 282.2L308.6 288.6L295.8 293.6Z" fill="#b47852"/>
  <g id="s4-shoe-near" transform="translate(288 308) rotate(-28)">
    <path d="M28 0V-8C27 -10 25 -10.5 22 -10.5L14 -9.6C9 -8.6 4 -6.6 1.5 -4.2C-0.3 -2.6 -0.6 -1 0 0Z" fill="#ef5b5b"/>
    <path d="M28.4 0V-3H-0.2C-0.6 -1.6 -0.4 -0.5 0.4 0Z" fill="#ffffff"/>
    <path d="M9.5 -3C8.8 -5.6 6.6 -7.4 3.6 -7.6M16.5 -9.4l-1.6 2.6M20 -10l-1.6 2.6" fill="none" stroke-width="1"/>
  </g>
  <path id="s4-leg-near" d="M274 179H300C302 190 303 204 300.5 218C298.5 230 295 240 294 248C298 259 302.5 271 306 284L292.5 290C288 278 281.5 265 275.5 253C273 245 272.5 233 274 219C275 205 274.5 192 274 179Z" fill="#7f9fdc"/>
  <path d="M290.4 285.2L304.2 279.4L306.6 284.4L292.8 290.4Z" fill="#7f9fdc"/>
  <path d="M276.6 251.6c2.6.6 5 .4 7-.8M277.6 256.4c1.8.2 3.4 0 4.8-.7M289 246c1.6 2.4 2.4 4.8 2.6 7.4M264.4 250.6c2.4.8 5 .8 7.2-.2M265 256.2c1.8.5 3.6.4 5.2-.3M275 186c1.6 3 2.2 6 2 9" fill="none" stroke-width="1"/>
  <g id="s4-torso" transform="rotate(-7 284 180)">
  <path id="s4-neck" d="M273 110L272.5 124L277.5 131.5L283.5 124L284 109Z" fill="#b47852"/>
  <path id="s4-shirt" d="M272.5 123C268 124.6 265.2 128.6 264.4 134C263.6 139 263.8 143.5 265.2 147.5C266.6 151.5 268.6 155 269.6 160C270.4 165 269.6 171 268.6 176C268.4 178 268.6 179.6 269 180H299.4C300.6 177.6 300.4 174.6 299.2 171.6C297.2 166 296.4 160 297.2 153C298 145 300.2 137.5 297.4 131C295 126.8 290.8 124.5 284 123.5L277.5 131.5Z" fill="#ffffff"/>
  <path d="M272.5 123L277.5 131.5L274 134L270.5 125.5ZM284 123.5L277.5 131.5L281 134L286 125.8Z" fill="#ffffff"/>
  <path d="M270.6 172.6c2.4 2.4 5.6 4 9.6 4.8M293.4 170.6c-1.2 2.4-1.8 4.8-1.8 7.2M266.6 149.4c1.6 1 3 2.4 3.8 4" fill="none" stroke-width="1"/>
  </g>
  <g id="s4-hips" transform="rotate(-3 284 179.5)">
  <rect id="s4-waistband" x="267.6" y="177.2" width="33" height="4.6" rx="0.8" fill="#7f9fdc"/>
  <path d="M282 177.2v4.6" fill="none" stroke-width="1"/>
  </g>
  <path id="s4-near-arm" d="M266.12 137.03L238.18 143.16Q235.51 144.47 234.24 141.72Q223.13 129.52 212.91 116.53A3.2 3.2 0 0 0 217.69 112.27L237.29 134.33L264.03 128.07Z" fill="#b47852"/>
  <path d="M237.29 134.33l2.27 -0.89" fill="none" stroke-width="1"/>
  <g id="s4-upper-front" transform="rotate(-7 284 180)">
  <g id="s4-sleeve-lift" transform="translate(0 -2)">
  <path id="s4-sleeve" d="M293 129C289 124.5 283 123 277 124.2C272 125.2 268 126.2 265.4 127.2L266.4 138.2C270.4 138.4 274 139.6 277.5 141.4C282 143 287 141.5 290 137.5Z" fill="#ffffff"/>
  <path d="M268.8 126.6L269.8 138.4M273.5 131.5c2.2 1 4.2 2.4 5.8 4.2" fill="none" stroke-width="1"/>
  </g>
  
<g id="s4-head" transform="translate(279 99)">
  
  <path id="s4-face" d="M3 -16.5C-5 -16.5 -10.5 -11.5 -11 -4.5C-11.2 -2.5 -11.6 -0.6 -12.7 1.4C-13.7 3.2 -13.8 4.6 -12.6 5.2C-12 5.5 -11.4 5.6 -11 6C-11.6 7 -11.6 8.2 -11 9C-10.8 10.5 -10.2 12 -8.6 13.8C-6 16.4 -2 17 1.5 15.5C5 14 8 9.5 9 4C10 -4 9 -16.5 3 -16.5Z" fill="#b47852"/>
  <path id="s4-hair-front" d="M9 3C12 -8 6 -19.2 -3 -19C-8 -18.8 -11.6 -14.6 -11.6 -9.6A2.07 2.07 0 0 0 -8 -10.4A2.03 2.03 0 0 0 -4.4 -10A2.1 2.1 0 0 0 -1 -8.4A2.24 2.24 0 0 0 2.2 -6A2.3 2.3 0 0 0 5 -3A2.64 2.64 0 0 0 7.5 1Z" fill="#3a2d66"/>
  <path d="M-1 -14.5a3 3 0 0 1 4.6-1.6M8.5 -10a3 3 0 0 1 4.4.8M12.5 -1a3 3 0 0 1 3.4 3M3.5 -19a3 3 0 0 1 4.6 0" fill="none" stroke="#7f6cc4" stroke-width="1"/>
  <path id="s4-ear" d="M4.4 -2.4C6.9 -3.6 8.7 -1.6 8.4 0.9C8.1 3.3 6.5 4.6 4.5 4.2Z" fill="#b47852"/>
  <path d="M5.7 -0.6c.9.3 1.1 1.6.4 2.6" fill="none" stroke-width="1"/>
  <circle cx="6.3" cy="6.4" r="1.7" fill="none" stroke="#f5c35a" stroke-width="1.2"/>
  <circle cx="-4.6" cy="-1.4" r="1.15" fill="#3a2d66" stroke="none"/>
  <circle cx="-9.5" cy="-1.5" r="1" fill="#3a2d66" stroke="none"/>
  <path d="M-6.6 -5c1-.5 2.4-.6 3.6-.2M-10.6 -4.7c.7-.4 1.5-.5 2.2-.3" fill="none" stroke-width="1"/>
  <path d="M-11.9 5.2c.7.5 1.5.6 2.3.2" fill="none" stroke-width="1"/>
  <path d="M-10.1 9.3c.9.6 2 .6 2.8 0" fill="none" stroke-width="1"/>
</g>
  </g>
  
<g id="s4-far-hand" transform="translate(244 188)">
    <path d="M8.4 1.7C7.8 0.6 7 -0.3 5.8 -0.8C3.4 -1.4 -1 -1.4 -4.6 -1.1C-6.4 -1 -7.6 -1.3 -8.5 -1.7C-9.5 -2.1 -10.2 -1.2 -9.8 -0.4C-9.6 0.1 -9.2 0.4 -8.8 0.6C-9.8 0.9 -10.2 2 -9.8 2.7C-9.5 3.3 -8.8 3.4 -8.2 3.2C-8.5 4 -8 4.9 -7.1 4.9C-6.8 4.9 -6.5 4.8 -6.3 4.7C-6.4 5.6 -5.8 6.5 -4.8 6.6C-2.6 6.8 0 6.6 2.4 6.8C4.6 7 6 7.9 8 8C9.4 8.05 10.6 7.8 11.6 7.5Z" fill="#b47852" stroke="none"/>
    <path d="M8.4 1.7C7.8 0.6 7 -0.3 5.8 -0.8C3.4 -1.4 -1 -1.4 -4.6 -1.1C-6.4 -1 -7.6 -1.3 -8.5 -1.7C-9.5 -2.1 -10.2 -1.2 -9.8 -0.4C-9.6 0.1 -9.2 0.4 -8.8 0.6C-9.8 0.9 -10.2 2 -9.8 2.7C-9.5 3.3 -8.8 3.4 -8.2 3.2C-8.5 4 -8 4.9 -7.1 4.9C-6.8 4.9 -6.5 4.8 -6.3 4.7C-6.4 5.6 -5.8 6.5 -4.8 6.6C-2.6 6.8 0 6.6 2.4 6.8C4.6 7 6 7.9 8 8C9.4 8.05 10.6 7.8 11.6 7.5" fill="none"/>
    <path d="M-8.8 0.6C-6.6 1 -4.2 1.2 -1.6 1.3M-8.2 3.2C-6.2 3.4 -3.8 3.5 -1 3.6M-6.3 4.7C-4.2 5 -2 5.1 0.6 5.3" fill="none" stroke-width="0.9"/>
  </g>
<g id="s4-open-book" transform="translate(244 188)">
  <path d="M-11.5 -2.8C-7.3 -4.4 -3 -4.4 0 -1.4C3 -4.4 7.3 -4.4 11.5 -2.8L11.6 -0.4C7.3 -2 3 -2 0 1C-3 -2 -7.3 -2 -11.6 -0.4Z" fill="#3fa58a"/>
  <path d="M0 -1.4C-3 -4.4 -7.3 -4.4 -11.5 -2.8L-11 -18.2C-7.1 -19.8 -3 -19.6 0 -17.2Z" fill="#ffffff"/>
  <path d="M0 -1.4C3 -4.4 7.3 -4.4 11.5 -2.8L11 -18.2C7.1 -19.8 3 -19.6 0 -17.2Z" fill="#ffffff"/>
  <path d="M-8.9 -15.2c1.9-.6 3.7-.6 5.9 0M-9.1 -11.6c1.9-.6 3.7-.6 5.9 0M-9.2 -8c1.5-.5 3-.5 4.5-.1M3 -15.2c2-.6 3.9-.6 5.9 0M3.2 -11.6c2-.6 3.9-.6 5.9 0" fill="none" stroke="#ab9ee6" stroke-width="1"/>
</g>

  
<g id="s4-js-book" transform="translate(195 100) rotate(10 6.5 15)">
  <rect width="13" height="30" rx="0.9" fill="#f5c35a"/>
  <path d="M0 3.6h13M0 26.4h13" fill="none" stroke-width="1"/>
  <rect x="1.8" y="17.5" width="9.4" height="7" rx="0.6" fill="#ffffff" stroke-width="1"/>
  <text x="6.5" y="22.7" font-family="ui-monospace, monospace" font-size="4.6" font-weight="700" text-anchor="middle" fill="#3a2d66" stroke="none">JS</text>
  <g id="s4-near-hand">
    <path d="M18 14.52C16.4 15.9 14.6 16.6 12.6 16.6H2.4C0.8 16.6 0.4 14.2 1.6 13.9C-0.4 13.8 -1 11.4 0.4 11.2C-1.2 11.1 -1.6 8.6 0 8.4C-1.2 8.3 -1.4 5.8 0.4 5.6H13.2C14.6 5.4 15.6 5.6 16.4 6C18.6 6.8 20.6 8 21.97 9.5Z" fill="#b47852" stroke="none"/>
    <path d="M18 14.52C16.4 15.9 14.6 16.6 12.6 16.6H2.4C0.8 16.6 0.4 14.2 1.6 13.9C-0.4 13.8 -1 11.4 0.4 11.2C-1.2 11.1 -1.6 8.6 0 8.4C-1.2 8.3 -1.4 5.8 0.4 5.6H13.2C14.6 5.4 15.6 5.6 16.4 6C18.6 6.8 20.6 8 21.97 9.5" fill="none"/>
    <path d="M12.4 8.4H1M12.4 11.2H1.2M12.2 13.9H2.2" fill="none" stroke-width="0.9"/>
    <path id="s4-near-thumb" d="M16.8 6.4C15 4.6 12.6 2.2 10.6 0.4C9.8 -0.4 9.2 -1.2 8.4 -1C7.4 -0.8 7.4 0.4 8.2 1.2C10.2 3 12.2 5 13.6 7Z" fill="#b47852"/>
  </g>
</g>
</g>
</g>
</svg>
        </div>
        <h3>Books</h3>
        <p>A developer leans in to pull a JS book off a ladder shelf, an open book in her other hand.</p>
      </article>
      <article class="item">
        <div class="card">
          <button class="dl" type="button" data-name="remote-work" aria-label="Download Remote Work SVG">SVG</button>
          <svg role="img" aria-label="Remote Work, Line interior style" viewBox="0 0 480 360">

<g id="s4b-bg" fill="none" stroke="#cfc9e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <g id="s4b-city"><path d="M60 232V178h30v54M66 178v-6h18v6M75 172v-9M96 232V196l18-14 18 14v36M122 188v-10h6v15M246 232V206h40v26M252 206l6-8h28l-6 8M300 232V194h22v38M300 194l11-10 11 10M332 232V168h44v64M340 168v-10h28v10M354 158v-8M384 232V204h36v28M384 204l9-7 9 7 9-7 9 7"/>
    <rect x="67" y="186" width="5" height="6" rx="0.5"/><rect x="78" y="186" width="5" height="6" rx="0.5"/><rect x="67" y="200" width="5" height="6" rx="0.5"/><rect x="78" y="200" width="5" height="6" rx="0.5"/><rect x="110" y="204" width="5" height="6" rx="0.5"/>
    <rect x="339" y="178" width="5" height="6" rx="0.5"/><rect x="351" y="178" width="5" height="6" rx="0.5"/><rect x="363" y="178" width="5" height="6" rx="0.5"/><rect x="339" y="193" width="5" height="6" rx="0.5"/><rect x="351" y="193" width="5" height="6" rx="0.5"/><rect x="363" y="193" width="5" height="6" rx="0.5"/><rect x="306" y="204" width="5" height="6" rx="0.5"/><rect x="256" y="214" width="5" height="6" rx="0.5"/><rect x="268" y="214" width="5" height="6" rx="0.5"/>
    <path d="M150 232V200M146 200h24M146 200l4-14h16l4 14M152 186v-6h12v6"/>
  </g>
  <g id="s4b-rail"><rect x="52" y="232" width="376" height="4" rx="1.5"/><path d="M64 236V308M80 236V308M96 236V308M112 236V308M128 236V308M144 236V308M160 236V308M176 236V308M192 236V308M208 236V308M224 236V308M240 236V308M256 236V308M272 236V308M288 236V308M304 236V308M320 236V308M336 236V308M352 236V308M368 236V308M384 236V308M400 236V308M416 236V308"/></g>
  <g id="s4b-cloud-a"><path d="M34 80h50.4c5.4 0 7.2 -7.2 1.8 -9c-0.9 -8.1 -10.8 -10.8 -15.3 -5.4c-2.7 -9.9 -18 -10.8 -21.6 -0.9c-5.4 -2.7 -11.7 0.9 -10.8 6.3c-5.4 0.9 -6.3 9 -4.5 9Z"/></g>
  <g id="s4b-cloud-b"><path d="M392 120h44.8c4.8 0 6.4 -6.4 1.6 -8c-0.8 -7.2 -9.6 -9.6 -13.6 -4.8c-2.4 -8.8 -16 -9.6 -19.2 -0.8c-4.8 -2.4 -10.4 0.8 -9.6 5.6c-4.8 0.8 -5.6 8 -4 8Z"/></g>
  <g id="s4b-cloud-c"><path d="M262 40h34.72c3.72 0 4.96 -4.96 1.24 -6.2c-0.62 -5.58 -7.44 -7.44 -10.54 -3.72c-1.86 -6.82 -12.4 -7.44 -14.88 -0.62c-3.72 -1.86 -8.06 0.62 -7.44 4.34c-3.72 0.62 -4.34 6.2 -3.1 6.2Z"/></g>
  <g id="s4b-birds"><path d="M184 44q4 -4.4 8 0q4 -4.4 8 0M200 36q3.2 -3.52 6.4 0q3.2 -3.52 6.4 0M330 64q3.6 -3.96 7.2 0q3.6 -3.96 7.2 0"/></g>
</g>
<g id="s4b-fg" stroke="#3a2d66" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<path id="s4b-floor" d="M56 308H424M40 308h10M430 308h10" fill="none"/>
<g id="s4b-plant-l">
  <path d="M73 272C70 252 64 236 58 222M74 272C75 246 77 222 78 201M75 272C79 254 84 243 90 233M73 272C70 264 66 258 60 254" fill="none"/>
  <path id="s4b-mon-1" d="M57.6 222.26L50.52 231.82C49.86 231.74 46.49 232.24 46.54 231.34C46.58 230.43 50.54 227.41 50.81 226.39C51.07 225.36 48.99 225.61 48.14 225.18C47.3 224.76 46.5 224.31 45.73 223.85C44.96 223.38 44.23 222.9 43.53 222.39C42.84 221.89 42.18 221.36 41.55 220.82C40.93 220.28 40.34 219.72 39.79 219.13C39.24 218.55 38.49 217.63 38.24 217.33L47.25 214.95L37.34 216.1C37.23 215.93 36.91 215.44 36.7 215.1C36.5 214.76 36.31 214.42 36.12 214.07C35.94 213.73 35.77 213.38 35.6 213.02C35.43 212.66 35.28 212.3 35.13 211.93C34.98 211.57 34.84 211.2 34.72 210.82C34.59 210.44 34.47 210.06 34.36 209.68C34.25 209.29 34.14 208.9 34.05 208.5C33.96 208.11 33.84 207.5 33.8 207.3L42.47 205.1L33.56 205.71C33.53 205.36 33.42 204.34 33.38 203.64C33.35 202.94 33.34 202.22 33.35 201.49C33.37 200.76 33.41 200.02 33.47 199.27C33.54 198.51 33.62 197.74 33.74 196.95C33.87 196.17 34.01 195.37 34.19 194.55C34.38 193.73 34.58 192.9 34.85 192.03C35.13 191.16 35.31 190.34 35.84 189.33C36.36 188.33 37.64 186.56 38 186L38 186C38.66 186 40.84 185.9 41.97 186.02C43.1 186.13 43.89 186.42 44.77 186.67C45.64 186.92 46.45 187.2 47.24 187.5C48.03 187.79 48.77 188.11 49.5 188.44C50.22 188.77 50.91 189.12 51.58 189.48C52.25 189.84 52.89 190.21 53.51 190.6C54.12 190.99 54.72 191.39 55.29 191.8C55.86 192.21 56.65 192.87 56.92 193.08L51.53 200.2L58.12 194.15C58.26 194.3 58.71 194.73 58.99 195.02C59.27 195.32 59.54 195.62 59.8 195.92C60.07 196.22 60.32 196.53 60.56 196.85C60.81 197.16 61.04 197.48 61.27 197.81C61.5 198.13 61.71 198.46 61.92 198.79C62.13 199.13 62.33 199.47 62.52 199.81C62.7 200.15 62.88 200.5 63.06 200.86C63.23 201.21 63.46 201.75 63.54 201.93L57.15 209.59L64.08 203.36C64.19 203.74 64.56 204.86 64.74 205.65C64.93 206.43 65.07 207.23 65.19 208.05C65.3 208.87 65.38 209.71 65.42 210.56C65.46 211.42 65.47 212.3 65.43 213.2C65.4 214.09 65.34 215.01 65.23 215.95C65.12 216.89 63.77 218.5 64.77 218.84C65.78 219.17 70.47 217.52 71.25 217.97C72.04 218.43 69.77 220.98 69.48 221.58Z" fill="#5fae7a"/><path d="M57.6 222.26L40.8 191.18" fill="none" stroke-width="1"/>
  <path id="s4b-mon-2" d="M78.04 201.12L67.04 205.91C66.53 205.5 63.44 204.2 63.98 203.45C64.51 202.69 69.48 202.15 70.26 201.41C71.03 200.67 69.14 199.8 68.64 199.01C68.15 198.21 67.7 197.41 67.28 196.62C66.87 195.82 66.5 195.03 66.16 194.24C65.82 193.45 65.52 192.66 65.26 191.88C65 191.09 64.77 190.3 64.58 189.52C64.39 188.73 64.2 187.56 64.12 187.17L72.97 189.87L63.94 185.58C63.93 185.37 63.88 184.75 63.86 184.34C63.85 183.93 63.85 183.51 63.85 183.1C63.86 182.69 63.88 182.28 63.91 181.87C63.93 181.46 63.97 181.05 64.02 180.64C64.07 180.23 64.13 179.82 64.2 179.42C64.26 179.01 64.34 178.6 64.43 178.19C64.52 177.78 64.62 177.38 64.74 176.97C64.85 176.56 65.04 175.96 65.1 175.75L73.8 178.44L65.66 174.19C65.81 173.85 66.23 172.81 66.56 172.13C66.89 171.44 67.25 170.75 67.64 170.07C68.03 169.39 68.45 168.7 68.9 168.02C69.36 167.34 69.84 166.66 70.36 165.98C70.89 165.31 71.44 164.63 72.04 163.95C72.64 163.28 73.26 162.61 73.97 161.94C74.68 161.27 75.28 160.59 76.29 159.94C77.29 159.28 79.38 158.32 80 158L80 158C80.59 158.38 82.58 159.52 83.52 160.27C84.46 161.01 85 161.74 85.65 162.47C86.29 163.2 86.85 163.93 87.39 164.65C87.93 165.38 88.41 166.1 88.87 166.82C89.33 167.55 89.75 168.27 90.14 168.99C90.53 169.71 90.89 170.43 91.22 171.14C91.55 171.86 91.84 172.57 92.11 173.29C92.37 174 92.7 175.07 92.82 175.43L84.32 178.92L93.23 177.03C93.27 177.24 93.41 177.86 93.48 178.28C93.55 178.69 93.62 179.11 93.67 179.52C93.72 179.93 93.76 180.35 93.8 180.76C93.83 181.17 93.85 181.59 93.86 182C93.87 182.41 93.87 182.82 93.86 183.23C93.85 183.64 93.83 184.05 93.8 184.46C93.77 184.87 93.73 185.28 93.68 185.69C93.63 186.1 93.53 186.72 93.49 186.92L84.11 190.37L93.16 188.49C93.05 188.87 92.75 190.02 92.5 190.79C92.24 191.55 91.94 192.31 91.61 193.07C91.27 193.83 90.9 194.59 90.5 195.35C90.09 196.1 89.64 196.86 89.16 197.61C88.68 198.37 88.16 199.12 87.59 199.87C87.03 200.62 85.06 201.3 85.77 202.11C86.47 202.92 91.37 203.92 91.84 204.71C92.3 205.51 89.11 206.53 88.56 206.89Z" fill="#8cc79b"/><path d="M78.04 201.12L79.72 164.16" fill="none" stroke-width="1"/>
  <path id="s4b-mon-3" d="M90.12 232.5L83.81 234.16C83.55 233.78 81.95 232.43 82.24 231.86C82.53 231.29 85.11 231.26 85.56 230.73C86.01 230.2 85.1 229.34 84.94 228.66C84.77 227.98 84.64 227.3 84.55 226.64C84.45 225.98 84.39 225.32 84.37 224.68C84.35 224.03 84.37 223.39 84.42 222.76C84.47 222.14 84.56 221.52 84.69 220.9C84.81 220.29 85.09 219.4 85.17 219.1L89.66 221.55L85.49 218.22C85.6 217.98 85.9 217.26 86.14 216.79C86.39 216.31 86.66 215.85 86.95 215.39C87.24 214.93 87.56 214.47 87.9 214.02C88.25 213.57 88.61 213.13 89.01 212.69C89.41 212.26 89.82 211.83 90.28 211.41C90.73 210.98 91.2 210.57 91.73 210.16C92.25 209.76 92.72 209.34 93.43 208.98C94.14 208.62 95.57 208.16 96 208L96 208C96.31 208.34 97.37 209.39 97.84 210.04C98.32 210.68 98.54 211.27 98.83 211.86C99.11 212.46 99.34 213.05 99.55 213.63C99.77 214.21 99.94 214.79 100.1 215.36C100.25 215.92 100.38 216.49 100.48 217.04C100.58 217.6 100.66 218.15 100.71 218.69C100.77 219.23 100.79 219.77 100.79 220.3C100.8 220.83 100.74 221.62 100.73 221.88L95.5 222.95L100.62 222.8C100.55 223.11 100.39 224.03 100.23 224.63C100.06 225.23 99.86 225.83 99.62 226.41C99.38 226.99 99.1 227.57 98.79 228.14C98.48 228.7 98.13 229.26 97.75 229.81C97.36 230.36 96.94 230.9 96.48 231.43C96.02 231.96 94.83 232.32 94.99 232.99C95.15 233.67 97.43 234.86 97.43 235.5C97.43 236.14 95.4 236.62 94.99 236.84Z" fill="#5fae7a"/><path d="M90.12 232.5L95.16 211.5" fill="none" stroke-width="1"/>
  <path id="s4b-mon-4" d="M59.64 253.84L59.61 259.72C59.26 259.39 58.41 257.98 57.53 257.74C56.65 257.5 55.34 258.21 54.33 258.27C53.31 258.33 52.35 258.27 51.44 258.1C50.53 257.93 49.67 257.65 48.86 257.25C48.05 256.85 47.29 256.33 46.58 255.7C45.87 255.07 45.21 254.34 44.61 253.47C44 252.61 43.39 251.76 42.96 250.52C42.52 249.27 42.16 246.75 42 246L42 246C42.67 245.61 44.78 244.2 45.99 243.68C47.21 243.17 48.25 243.06 49.29 242.93C50.34 242.8 51.33 242.79 52.27 242.9C53.21 243 54.1 243.22 54.94 243.55C55.78 243.89 56.57 244.34 57.31 244.9C58.05 245.46 58.74 246.13 59.37 246.93C60.01 247.72 60.35 249.17 61.12 249.66C61.89 250.15 63.51 249.84 63.99 249.88Z" fill="#8cc79b"/><path d="M59.64 253.84L44.52 247.12" fill="none" stroke-width="1"/>
  <path d="M60 272H88L85 308H63Z" fill="#ffffff"/>
  <rect x="57.5" y="266" width="33" height="6.5" rx="1.5" fill="#ffffff"/>
  <path d="M67.5 284.5l3 3M70.5 284.5l-3 3M76.5 294.5l3 3M79.5 294.5l-3 3" fill="none" stroke-width="1"/>
</g>
<g id="s4b-plant-r">
  <path d="M399 284C394 266.4 388 248.8 393 240C396 251 403 268.6 401 284Z" fill="#3fa58a"/>
  <path d="M406 284C400.5 260 401.5 236 407 224C410.3 239 410.4 263 408 284Z" fill="#5fae7a"/>
  <path d="M412 284C407 268 414 252 419 244C422 254 416 270 414 284Z" fill="#8cc79b"/>
  <path d="M397 267l3 2M406 250l2.6 2M405 261l2.4 2M413 272l2.2 2" fill="none" stroke-width="1"/>
  <path d="M391 284H421L418 308H394Z" fill="#f6a85e"/>
  <path d="M392.4 291H419.6" fill="none" stroke-width="1"/>
</g>
<g id="s4b-post-l">
  <path d="M107 302V83Q107 80 110 80Q113 80 113 83V302Z" fill="#f9c99a"/>
  <path d="M108 110h4M108 200h4" fill="none" stroke-width="1"/>
  <rect x="100" y="302" width="20" height="6" rx="1.2" fill="#ffffff"/>
  <circle cx="110" cy="305" r="0" fill="none"/>
</g><g id="s4b-post-r">
  <path d="M367 302V83Q367 80 370 80Q373 80 373 83V302Z" fill="#f9c99a"/>
  <path d="M368 110h4M368 200h4" fill="none" stroke-width="1"/>
  <rect x="360" y="302" width="20" height="6" rx="1.2" fill="#ffffff"/>
  <circle cx="370" cy="305" r="0" fill="none"/>
</g>
<g id="s4b-lights"><path d="M113 87Q240 147 367 87" fill="none" stroke-width="1"/><path d="M107 85l6 1.6M107 88l6 1.6M373 85l-6 1.6M373 88l-6 1.6" fill="none" stroke-width="1"/><path d="M136.09 96.92v2.4" fill="none" stroke-width="1"/><rect x="134.49" y="99.32" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M134.49 101.92c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#ffffff" stroke-width="1"/><path d="M159.18 104.85v2.4" fill="none" stroke-width="1"/><rect x="157.58" y="107.25" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M157.58 109.85c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#f5c35a" stroke-width="1"/><path d="M182.27 110.8v2.4" fill="none" stroke-width="1"/><rect x="180.67" y="113.2" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M180.67 115.8c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#f5c35a" stroke-width="1"/><path d="M205.36 114.77v2.4" fill="none" stroke-width="1"/><rect x="203.76" y="117.17" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M203.76 119.77c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#ffffff" stroke-width="1"/><path d="M228.45 116.75v2.4" fill="none" stroke-width="1"/><rect x="226.85" y="119.15" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M226.85 121.75c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#f5c35a" stroke-width="1"/><path d="M251.55 116.75v2.4" fill="none" stroke-width="1"/><rect x="249.95" y="119.15" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M249.95 121.75c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#f5c35a" stroke-width="1"/><path d="M274.64 114.77v2.4" fill="none" stroke-width="1"/><rect x="273.04" y="117.17" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M273.04 119.77c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#ffffff" stroke-width="1"/><path d="M297.73 110.8v2.4" fill="none" stroke-width="1"/><rect x="296.13" y="113.2" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M296.13 115.8c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#f5c35a" stroke-width="1"/><path d="M320.82 104.85v2.4" fill="none" stroke-width="1"/><rect x="319.22" y="107.25" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M319.22 109.85c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#f5c35a" stroke-width="1"/><path d="M343.91 96.92v2.4" fill="none" stroke-width="1"/><rect x="342.31" y="99.32" width="3.2" height="2.6" rx="0.5" fill="#ffffff" stroke-width="1"/><path d="M342.31 101.92c-1.6 1.8-1.6 4.2 0 5.4c.9.7 2.3.7 3.2 0c1.6-1.2 1.6-3.6 0-5.4Z" fill="#ffffff" stroke-width="1"/></g>
<g id="s4b-ropes" fill="none">
  <path d="M113 146L146 202M367 146L334 202"/>
  <path d="M113 143a3 3 0 1 1 0 6M367 143a3 3 0 1 0 0 6" stroke-width="1.2"/>
  <circle cx="144" cy="200" r="2.6" fill="#ffffff"/><circle cx="336" cy="200" r="2.6" fill="#ffffff"/>
</g>
<g id="s4b-crate" transform="translate(6 0)">
  <rect x="122" y="278" width="38" height="30" rx="1.2" fill="#f9c99a"/>
  <rect x="126" y="282" width="30" height="22" rx="0.6" fill="#ffffff"/>
  <rect x="129" y="295.5" width="19" height="4" rx="0.6" fill="#3fa58a" stroke-width="1"/><rect x="130.5" y="299.5" width="21" height="4" rx="0.6" fill="#ffffff" stroke-width="1"/>
  <path d="M129 291.5h8" fill="none" stroke-width="1"/>
  <g id="s4b-mug">
    <path d="M148 267h1.4a4.4 4.4 0 0 1 0 8.8H148v-2.4h1.4a2 2 0 0 0 0-4H148Z" fill="#ffffff"/>
    <path d="M137 265h11.5v11.5q0 1.5-1.5 1.5h-8.5q-1.5 0-1.5-1.5Z" fill="#ffffff"/>
    <path d="M137 269.5h11.5" fill="none" stroke="#ef5b5b" stroke-width="1.6"/>
    <path d="M140.5 261c-1.5-2 1.5-3 0-5.5M145 261c-1.5-2 1.5-3 0-5.5" fill="none" stroke-width="1"/>
  </g>
</g>
<path id="s4b-ham-back" d="M146 202C147.74 203.05 152.96 206.32 156.44 208.3C159.93 210.27 163.41 212.12 166.89 213.85C170.37 215.58 173.85 217.19 177.33 218.67C180.81 220.15 184.3 221.51 187.78 222.74C191.26 223.98 194.74 225.09 198.22 226.07C201.7 227.06 205.19 227.93 208.67 228.67C212.15 229.41 215.63 230.02 219.11 230.52C222.59 231.01 226.07 231.38 229.56 231.63C233.04 231.88 236.52 232 240 232C243.48 232 246.96 231.88 250.44 231.63C253.93 231.38 257.41 231.01 260.89 230.52C264.37 230.02 267.85 229.41 271.33 228.67C274.81 227.93 278.3 227.06 281.78 226.07C285.26 225.09 288.74 223.98 292.22 222.74C295.7 221.51 299.19 220.15 302.67 218.67C306.15 217.19 309.63 215.58 313.11 213.85C316.59 212.12 320.07 210.27 323.56 208.3C327.04 206.32 332.26 203.05 334 202C332.26 204.45 327.04 212.08 323.56 216.69C320.07 221.3 316.59 225.62 313.11 229.65C309.63 233.69 306.15 237.43 302.67 240.89C299.19 244.35 295.7 247.51 292.22 250.4C288.74 253.28 285.26 255.87 281.78 258.17C278.3 260.48 274.81 262.49 271.33 264.22C267.85 265.95 264.37 267.39 260.89 268.54C257.41 269.7 253.93 270.56 250.44 271.14C246.96 271.71 243.48 272 240 272C236.52 272 233.04 271.71 229.56 271.14C226.07 270.56 222.59 269.7 219.11 268.54C215.63 267.39 212.15 265.95 208.67 264.22C205.19 262.49 201.7 260.48 198.22 258.17C194.74 255.87 191.26 253.28 187.78 250.4C184.3 247.51 180.81 244.35 177.33 240.89C173.85 237.43 170.37 233.69 166.89 229.65C163.41 225.62 159.93 221.3 156.44 216.69C152.96 212.08 147.74 204.45 146 202Z" fill="#ffffff"/>
<g id="s4b-pillow" transform="rotate(-30 172 206)"><path d="M158 194C165 190 179 190 186 194C189 200 189 212 186 218C179 222 165 222 158 218C155 212 155 200 158 194Z" fill="#ffffff"/>
  <path d="M162 198c-1.4 5-1.4 11 0 16" fill="none" stroke="#ab9ee6" stroke-width="1.4"/></g>
<g id="s4b-dev">
  <path id="s4b-shirt" d="M244.03 249.08C241.32 246.86 232.38 240.5 227.75 235.77C223.13 231.05 220.05 224.46 216.27 220.73C212.5 216.99 208.49 214.73 205.13 213.38C201.76 212.03 197.6 212.77 196.1 212.65Q188.29 215.04 186.73 223.05C186.89 224.66 185.37 229.34 187.73 232.7C190.09 236.06 196.29 239.63 200.88 243.2C205.47 246.77 210.86 250.05 215.26 254.13C219.67 258.21 225.29 265.41 227.3 267.66Z" fill="#f5c35a"/>
  <path d="M222.14 228.56c-2.6 -2.4 -4.4 -5.2 -5.2 -8.4M234.18 242.09c-3.4 0 -6.4 -1 -9 -3" fill="none" stroke-width="1"/>
  <path id="s4b-neck" d="M197.77 216.17L195.41 207.85L184.91 206.85L190.41 224.35Z" fill="#f3cdb0"/>
  <path d="M196.23 212.5Q188.74 215.44 187.75 223.71" fill="none" stroke-width="1"/>
  <g id="s4b-head" transform="translate(190.41 195.35) rotate(6)">
  <path d="M-7 12C-11.6 8 -13.2 1 -12.6 -6C-12 -14 -6 -19.6 2 -19.6L-2 6Z" fill="#3a2d66"/>
  <path id="s4b-face" d="M-3 -16.5C5 -16.5 10.5 -11.5 11 -4.5C11.2 -2.5 11.8 -0.4 12.8 1.6C13.6 3.3 13.4 4.6 12.2 5C11.6 5.3 11.2 5.6 11 6C11.5 7 11.4 8.4 10.8 9.2C10.6 11 10 12.6 8.4 14.4C6 16.6 1.6 16.8 -2 15.2C-5.4 13.6 -8 9.5 -9 4C-10 -4 -9 -16.5 -3 -16.5Z" fill="#f3cdb0"/>
  <path id="s4b-hair" d="M-12.6 -6C-12 -14.6 -5 -20.6 3.4 -20.4C9.2 -20.2 13.6 -17.4 14.6 -13.2C15 -11.6 14.4 -10.4 13.2 -10.6C12 -12.4 9.8 -13.2 7.4 -12.8C5 -12.4 2.6 -11.8 0.6 -10.4C-0.6 -9.6 -1.6 -8 -2.2 -6C-2.6 -4.2 -3.4 -2.8 -4.4 -2.4C-5.4 -4 -7 -4.4 -8.4 -3.6C-9.2 -1.6 -9.4 0.6 -9.2 3C-11.8 1.6 -12.8 -2.2 -12.6 -6Z" fill="#3a2d66"/>
  <path d="M-4 -16.4c3-1.8 7-2.2 10.4-1.2M8.6 -16c1.6.6 2.8 1.6 3.6 2.8" fill="none" stroke="#7f6cc4" stroke-width="1"/>
  <path id="s4b-ear" d="M-3.4 -2.6C-5.9 -3.8 -7.7 -1.8 -7.4 0.7C-7.1 3.1 -5.5 4.4 -3.5 4Z" fill="#f3cdb0"/>
  <path d="M-4.7 -0.8c-.9.3-1.1 1.6-.4 2.6" fill="none" stroke-width="1"/>
  <circle cx="4.8" cy="-0.8" r="1.15" fill="#3a2d66" stroke="none"/><circle cx="9.6" cy="-0.9" r="1" fill="#3a2d66" stroke="none"/>
  <path d="M2.8 -4.6c1.1-.6 2.6-.7 3.8-.3M8.3 -4.5c.7-.4 1.5-.5 2.2-.3" fill="none" stroke-width="1"/>
  <path d="M11.9 5.2c-.7.5-1.5.6-2.3.2" fill="none" stroke-width="1"/>
  <path d="M9.8 9.2c-.8.6-1.9.6-2.8.1" fill="none" stroke-width="1"/>
</g>
  <g id="s4b-ham-front"><path d="M146 202C147.74 203.54 152.96 208.34 156.44 211.23C159.93 214.13 163.41 216.85 166.89 219.38C170.37 221.92 173.85 224.27 177.33 226.44C180.81 228.62 184.3 230.61 187.78 232.42C191.26 234.23 194.74 235.86 198.22 237.31C201.7 238.76 205.19 240.02 208.67 241.11C212.15 242.2 215.63 243.1 219.11 243.83C222.59 244.55 226.07 245.09 229.56 245.46C233.04 245.82 236.52 246 240 246C243.48 246 246.96 245.82 250.44 245.46C253.93 245.09 257.41 244.55 260.89 243.83C264.37 243.1 267.85 242.2 271.33 241.11C274.81 240.02 278.3 238.76 281.78 237.31C285.26 235.86 288.74 234.23 292.22 232.42C295.7 230.61 299.19 228.62 302.67 226.44C306.15 224.27 309.63 221.92 313.11 219.38C316.59 216.85 320.07 214.13 323.56 211.23C327.04 208.34 332.26 203.54 334 202C332.26 204.45 327.04 212.08 323.56 216.69C320.07 221.3 316.59 225.62 313.11 229.65C309.63 233.69 306.15 237.43 302.67 240.89C299.19 244.35 295.7 247.51 292.22 250.4C288.74 253.28 285.26 255.87 281.78 258.17C278.3 260.48 274.81 262.49 271.33 264.22C267.85 265.95 264.37 267.39 260.89 268.54C257.41 269.7 253.93 270.56 250.44 271.14C246.96 271.71 243.48 272 240 272C236.52 272 233.04 271.71 229.56 271.14C226.07 270.56 222.59 269.7 219.11 268.54C215.63 267.39 212.15 265.95 208.67 264.22C205.19 262.49 201.7 260.48 198.22 258.17C194.74 255.87 191.26 253.28 187.78 250.4C184.3 247.51 180.81 244.35 177.33 240.89C173.85 237.43 170.37 233.69 166.89 229.65C163.41 225.62 159.93 221.3 156.44 216.69C152.96 212.08 147.74 204.45 146 202Z" fill="#ffffff"/><path d="M166.89 224.52C168.63 226.04 173.85 230.85 177.33 233.67C180.81 236.48 184.3 239.06 187.78 241.41C191.26 243.75 194.74 245.86 198.22 247.74C201.7 249.62 205.19 251.26 208.67 252.67C212.15 254.07 215.63 255.25 219.11 256.19C222.59 257.12 226.07 257.83 229.56 258.3C233.04 258.77 236.52 259 240 259C243.48 259 246.96 258.77 250.44 258.3C253.93 257.83 257.41 257.12 260.89 256.19C264.37 255.25 267.85 254.07 271.33 252.67C274.81 251.26 278.3 249.62 281.78 247.74C285.26 245.86 288.74 243.75 292.22 241.41C295.7 239.06 299.19 236.48 302.67 233.67C306.15 230.85 311.37 226.04 313.11 224.52" fill="none" stroke="#3fa58a" stroke-width="1.6"/><path d="M146 202C147.74 203.54 152.96 208.34 156.44 211.23C159.93 214.13 163.41 216.85 166.89 219.38C170.37 221.92 173.85 224.27 177.33 226.44C180.81 228.62 184.3 230.61 187.78 232.42C191.26 234.23 194.74 235.86 198.22 237.31C201.7 238.76 205.19 240.02 208.67 241.11C212.15 242.2 215.63 243.1 219.11 243.83C222.59 244.55 226.07 245.09 229.56 245.46C233.04 245.82 236.52 246 240 246C243.48 246 246.96 245.82 250.44 245.46C253.93 245.09 257.41 244.55 260.89 243.83C264.37 243.1 267.85 242.2 271.33 241.11C274.81 240.02 278.3 238.76 281.78 237.31C285.26 235.86 288.74 234.23 292.22 232.42C295.7 230.61 299.19 228.62 302.67 226.44C306.15 224.27 309.63 221.92 313.11 219.38C316.59 216.85 320.07 214.13 323.56 211.23C327.04 208.34 332.26 203.54 334 202C332.26 204.45 327.04 212.08 323.56 216.69C320.07 221.3 316.59 225.62 313.11 229.65C309.63 233.69 306.15 237.43 302.67 240.89C299.19 244.35 295.7 247.51 292.22 250.4C288.74 253.28 285.26 255.87 281.78 258.17C278.3 260.48 274.81 262.49 271.33 264.22C267.85 265.95 264.37 267.39 260.89 268.54C257.41 269.7 253.93 270.56 250.44 271.14C246.96 271.71 243.48 272 240 272C236.52 272 233.04 271.71 229.56 271.14C226.07 270.56 222.59 269.7 219.11 268.54C215.63 267.39 212.15 265.95 208.67 264.22C205.19 262.49 201.7 260.48 198.22 258.17C194.74 255.87 191.26 253.28 187.78 250.4C184.3 247.51 180.81 244.35 177.33 240.89C173.85 237.43 170.37 233.69 166.89 229.65C163.41 225.62 159.93 221.3 156.44 216.69C152.96 212.08 147.74 204.45 146 202Z" fill="none"/></g>
  <clipPath id="s4b-leg-clip"><path d="M0 0H480V360H0ZM146 202C146.89 202.81 149.56 205.28 151.33 206.85C153.11 208.42 154.89 209.94 156.67 211.42C158.44 212.89 160.22 214.32 162 215.7C163.78 217.08 165.56 218.42 167.33 219.71C169.11 220.99 170.89 222.23 172.67 223.42C174.44 224.62 176.22 225.76 178 226.86C179.78 227.96 181.56 229.01 183.33 230.01C185.11 231.01 186.89 231.97 188.67 232.88C190.44 233.79 192.22 234.65 194 235.46C195.78 236.28 197.56 237.04 199.33 237.76C201.11 238.48 202.89 239.16 204.67 239.78C206.44 240.41 208.22 240.99 210 241.52C211.78 242.05 213.56 242.53 215.33 242.97C217.11 243.41 218.89 243.8 220.67 244.14C222.44 244.48 224.22 244.78 226 245.02C227.78 245.27 229.56 245.47 231.33 245.63C233.11 245.78 234.89 245.89 236.67 245.94C238.44 246 241.11 245.97 242 245.98Q256 246.23 262.33 256.62L262.33 269.05C261.25 268.38 258.02 269.46 255.87 270.01C253.71 270.55 251.56 270.98 249.41 271.3C247.25 271.62 245.1 271.83 242.94 271.93C240.79 272.03 238.63 272.02 236.48 271.9C234.33 271.78 232.17 271.55 230.02 271.21C227.86 270.87 225.71 270.42 223.55 269.86C221.4 269.3 219.25 268.62 217.09 267.84C214.94 267.06 212.78 266.17 210.63 265.17C208.47 264.16 206.32 263.05 204.17 261.83C202.01 260.6 199.86 259.27 197.7 257.83C195.55 256.38 193.39 254.83 191.24 253.16C189.09 251.5 186.93 249.73 184.78 247.84C182.62 245.96 180.47 243.96 178.31 241.86C176.16 239.75 174.01 237.53 171.85 235.21C169.7 232.88 167.54 230.45 165.39 227.9C163.23 225.35 161.08 222.69 158.93 219.93C156.77 217.16 154.62 214.28 152.46 211.29C150.31 208.31 147.08 203.55 146 202Z" clip-rule="evenodd"/></clipPath>
  <g clip-path="url(#s4b-leg-clip)"><g id="s4b-legs">
  <path d="M288.85 284.72L289.93 300.31L281.55 300.88L280.47 285.29Z" fill="#f3cdb0"/><g id="s4b-shoe-far" transform="translate(279 308)">
  <path d="M0 0V-7.5C0 -9.6 1.8 -10.6 4.6 -10.6H9C12 -10.2 14 -8.6 16.4 -7.4C19.6 -6 23.4 -5.4 25 -3.2C25.6 -2 25.6 -0.8 25 0Z" fill="#ffffff"/>
  <path d="M0 -3V0H25C25.5 -1 25.6 -2 25.4 -3Z" fill="#ef5b5b"/>
  <path d="M13.6 -8.6l-1.6 2.4M17 -7.2l-1.6 2.4" fill="none" stroke-width="1"/>
</g><path id="s4b-leg-far" d="M235.48 260.8A10.4 10.4 0 0 1 228.52 241.2Q256.07 231.59 284.69 225A6.9 6.9 0 0 1 293.89 231.77L289.9 287.2L279.7 286.8Q278.76 254.96 281.28 247.12Q281.38 244.53 278.93 245.4L235.48 260.8Z" fill="#7f6cc4"/><path d="M290.8 282.03L290.8 287.24L278.8 286.76L279.21 281.57Z" fill="#7f6cc4"/><path d="M281.38 244.53l-4.67 0.67" fill="none" stroke-width="1"/>
  <path d="M307.2 284.32L309.88 299.86L301.6 301.28L298.92 285.74Z" fill="#f3cdb0"/><g id="s4b-shoe-near" transform="translate(299.4 308)">
  <path d="M0 0V-7.5C0 -9.6 1.8 -10.6 4.6 -10.6H9C12 -10.2 14 -8.6 16.4 -7.4C19.6 -6 23.4 -5.4 25 -3.2C25.6 -2 25.6 -0.8 25 0Z" fill="#ffffff"/>
  <path d="M0 -3V0H25C25.5 -1 25.6 -2 25.4 -3Z" fill="#ef5b5b"/>
  <path d="M13.6 -8.6l-1.6 2.4M17 -7.2l-1.6 2.4" fill="none" stroke-width="1"/>
</g><path id="s4b-leg-near" d="M241.1 264.34A10.8 10.8 0 0 1 234.9 243.66Q264.9 234.66 295.93 229.1A7.2 7.2 0 0 1 305.16 235.24L308.57 286.45L298.23 287.55Q292.72 258.32 294.36 251.03Q294.09 248.45 291.6 249.2L241.1 264.34Z" fill="#7f6cc4"/><path d="M308.72 281.21L309.47 286.36L297.33 287.64L296.99 282.45Z" fill="#7f6cc4"/><path d="M294.09 248.45l-4.89 0.44" fill="none" stroke-width="1"/>
  <path d="M286 229.4c2.6 .6 5 2 6.6 4" fill="none" stroke-width="1"/>
</g></g>
  <path id="s4b-rim-dip" d="M242 245.98Q256 246.23 262.33 256.62" fill="none"/>
  <g id="s4b-laptop">
  <path id="s4b-lap-slab" d="M292.9 234.2L271.5 243.4L249.5 231L249.5 233.6L271.5 246L292.9 236.8Z" fill="#ffffff"/>
  <path id="s4b-lap-deck" d="M270.9 221.8L292.9 234.2L271.5 243.4L249.5 231Z" fill="#ffffff"/>
  <path d="M269.68 224.51L287.28 234.43M265.81 225.74L284.29 236.15M262.83 227.46L280.43 237.38" fill="none" stroke="#ab9ee6" stroke-width="1"/>
  <path d="M263.83 232.27L270.87 236.24L266.16 238.26L259.12 234.3Z" fill="none" stroke-width="1"/>
  <path id="s4b-lap-lid" d="M270.9 221.8L292.9 234.2L298.5 206.2L276.5 193.8Z" fill="#ffffff"/>
  <path d="M273.22 219.99L291.7 230.41L296.18 208.01L277.7 197.59Z" fill="none" stroke-width="1"/>
  <path d="M274.66 217.69L283.02 222.4" fill="none" stroke="#7f6cc4" stroke-width="1.7"/><path d="M284.78 223.39L290.94 226.86" fill="none" stroke="#3fa58a" stroke-width="1.7"/><path d="M277.32 214.2L286.56 219.41" fill="none" stroke="#ef5b5b" stroke-width="1.7"/><path d="M278.21 209.72L284.37 213.19" fill="none" stroke="#3fa58a" stroke-width="1.7"/><path d="M285.69 213.94L292.29 217.66" fill="none" stroke="#ab9ee6" stroke-width="1.7"/><path d="M277.35 204.25L283.51 207.72" fill="none" stroke="#f6a85e" stroke-width="1.7"/>
</g>
  <path id="s4b-far-arm" d="M235.7 246.43C238.49 244.99 249.65 239.24 252.44 237.8A3.4 3.4 0 0 0 249.36 231.74C246.55 233.15 235.33 238.78 232.52 240.19A3.5 3.5 0 0 0 235.7 246.43Z" fill="#f3cdb0"/><g id="s4b-far-hand" transform="translate(247.87 236.31) rotate(-25.11) scale(1 -1)" stroke-width="1.4"><path d="M2.6 -3.4C4.6 -5.6 6.8 -7.4 9 -8.4C10.4 -9 11.2 -7.7 10.2 -6.9C8.6 -5.8 7.4 -5 6.4 -4.6Z" fill="#f3cdb0"/><path d="M0 3.5C2.8 3.9 5.2 4.6 7 5L13.9 5A1.25 1.25 0 0 0 13.9 2.5L15.9 2.5A1.25 1.25 0 0 0 15.9 0L16.8 0A1.25 1.25 0 0 0 16.8 -2.5L15.3 -2.5A1.25 1.25 0 0 0 15.3 -5L7 -5C5.2 -4.6 2.8 -3.9 0 -3.5Z" fill="#f3cdb0" stroke="none"/><path d="M0 3.5C2.8 3.9 5.2 4.6 7 5L13.9 5A1.25 1.25 0 0 0 13.9 2.5L15.9 2.5A1.25 1.25 0 0 0 15.9 0L16.8 0A1.25 1.25 0 0 0 16.8 -2.5L15.3 -2.5A1.25 1.25 0 0 0 15.3 -5L7 -5C5.2 -4.6 2.8 -3.9 0 -3.5" fill="none"/><path d="M13.9 2.5H8M15.9 0H7.8M15.3 -2.5H8" fill="none" stroke-width="0.9"/></g>
  <path id="s4b-near-arm" d="M197.98 225.24L227.77 248.84Q228.97 251.02 231.04 249.5Q246.86 247.12 262.48 243.55L265.28 241.28L264.67 237.84L261.27 236.66L232.76 241.69L203.79 218.11Z" fill="#f3cdb0"/><path id="s4b-sleeve" d="M214.23 224.29L205.31 216.25C201.55 212.93 196.27 214.05 194.05 217.4C191.84 220.76 194.02 225.37 197.24 227.74L206.49 234.75Q210.97 229.88 214.23 224.29Z" fill="#f5c35a"/>
  <path d="M200.83 228.08q2.4 -1 3.6 -3.4" fill="none" stroke-width="1"/><g id="s4b-near-hand" transform="translate(258.53 240.7) rotate(-16.63) scale(1.05 1.05)" stroke-width="1.33"><path d="M2.6 -3.4C4.6 -5.6 6.8 -7.4 9 -8.4C10.4 -9 11.2 -7.7 10.2 -6.9C8.6 -5.8 7.4 -5 6.4 -4.6Z" fill="#f3cdb0"/><path d="M0 3.5C2.8 3.9 5.2 4.6 7 5L13.9 5A1.25 1.25 0 0 0 13.9 2.5L15.9 2.5A1.25 1.25 0 0 0 15.9 0L16.8 0A1.25 1.25 0 0 0 16.8 -2.5L15.3 -2.5A1.25 1.25 0 0 0 15.3 -5L7 -5C5.2 -4.6 2.8 -3.9 0 -3.5Z" fill="#f3cdb0" stroke="none"/><path d="M0 3.5C2.8 3.9 5.2 4.6 7 5L13.9 5A1.25 1.25 0 0 0 13.9 2.5L15.9 2.5A1.25 1.25 0 0 0 15.9 0L16.8 0A1.25 1.25 0 0 0 16.8 -2.5L15.3 -2.5A1.25 1.25 0 0 0 15.3 -5L7 -5C5.2 -4.6 2.8 -3.9 0 -3.5" fill="none"/><path d="M13.9 2.5H8M15.9 0H7.8M15.3 -2.5H8" fill="none" stroke-width="0.86"/></g>
</g>
</g>
</svg>
        </div>
        <h3>Remote Work</h3>
        <p>A developer types on a laptop in a hammock strung between posts on a city terrace.</p>
      </article>
      <article class="item">
        <div class="card">
          <button class="dl" type="button" data-name="whiteboard" aria-label="Download Whiteboard SVG">SVG</button>
          <svg role="img" aria-label="Whiteboard, Line interior style" viewBox="0 0 480 360">

<g id="s4c-bg" fill="none" stroke="#cfc9e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <g id="s4c-bricks-a"><rect x="34" y="150" width="14" height="6" rx="0.6"/><rect x="49" y="150" width="14" height="6" rx="0.6"/><rect x="41" y="157" width="14" height="6" rx="0.6"/><rect x="56" y="157" width="14" height="6" rx="0.6"/><rect x="34" y="164" width="14" height="6" rx="0.6"/></g>
  <g id="s4c-bricks-b"><rect x="420" y="196" width="14" height="6" rx="0.6"/><rect x="412" y="203" width="14" height="6" rx="0.6"/><rect x="427" y="203" width="14" height="6" rx="0.6"/></g>
  <g id="s4c-bricks-c"><rect x="250" y="236" width="14" height="6" rx="0.6"/><rect x="265" y="236" width="14" height="6" rx="0.6"/><rect x="257" y="243" width="14" height="6" rx="0.6"/></g>
  <g id="s4c-lamp-a"><path d="M118 0V34"/><path d="M106 46C106 38.5 111.5 34 118 34S130 38.5 130 46Z"/><path d="M115 46.5a3 3 0 0 0 6 0"/><path d="M118 53v5M110 51.5l-2.5 4M126 51.5l2.5 4"/></g>
  <g id="s4c-lamp-b"><path d="M392 0V58"/><path d="M388 58h8l6 12h-20Z"/><path d="M389 70.5a3 3 0 0 0 6 0"/><path d="M392 77v5M384 75.5l-2.5 4M400 75.5l2.5 4"/></g>
  <g id="s4c-poster">
    <path d="M60 52L44 62M60 52L76 62"/>
    <rect x="40" y="62" width="40" height="50" rx="1"/>
    <rect x="44" y="66" width="32" height="42"/>
    <path d="M60 72l7 4v8l-7 4-7-4v-8Z"/>
    <path d="M60 80v8M53 76l7 4 7-4"/>
    <path d="M49 95h22M49 99h14M49 103h9"/>
  </g>
</g>
<g id="s4c-fg" stroke="#3a2d66" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<path id="s4c-floor" d="M56 308H424M40 308h10M430 308h10" fill="none"/>
<g id="s4c-plant">
  <path d="M68 278C68 250 67 214 69 162" fill="none"/>
  <path d="M68 238l-8 -6M68 214l8 -5M68.4 192l-7 -5" fill="none" stroke-width="1"/>
  <path id="s4c-fig-1" d="M69 174C72.85 168.98 74.28 160.06 73.77 152.35C72.35 146.82 66.83 144.92 64 146C60.97 145.96 56.45 149.66 57.03 155.33C59.22 162.74 63.65 170.62 69 174Z" fill="#5fae7a"/><path d="M68.8 172.88L64.7 149.92M67 162.8L71.22 157.42M65.9 156.64L60.18 153.62" fill="none" stroke-width="1"/>
  <path id="s4c-fig-2" d="M69 186C75.04 186.03 82.77 181.96 88.48 177.11C91.99 172.83 90.41 167.53 88 166C86.35 163.67 80.97 162.37 76.88 166.09C72.33 172.04 68.66 179.97 69 186Z" fill="#8cc79b"/><path d="M69.76 185.2L85.34 168.8M76.6 178L83.12 178.11M80.78 173.6L79.96 167.49" fill="none" stroke-width="1"/>
  <path id="s4c-fig-3" d="M61 188C61.18 182.11 57.4 174.67 52.82 169.23C48.75 165.92 43.55 167.61 42 170C39.69 171.67 38.29 176.96 41.82 180.85C47.5 185.13 55.12 188.49 61 188Z" fill="#5fae7a"/><path d="M60.24 187.28L44.66 172.52M53.4 180.8L53.66 174.44M49.22 176.84L43.26 177.8" fill="none" stroke-width="1"/>
  <path id="s4c-fig-4" d="M76 209C81.25 210.51 88.68 208.81 94.49 205.93C98.28 203.01 97.83 197.94 96 196C94.97 193.54 90.52 191.07 86.31 193.35C81.32 197.49 76.75 203.59 76 209Z" fill="#5fae7a"/><path d="M76.8 208.48L93.2 197.82M84 203.8L89.65 205.49M88.4 200.94L88.75 195.35" fill="none" stroke-width="1"/>
  <path id="s4c-fig-5" d="M60 232C59.12 226.66 54.47 220.81 49.46 216.93C45.27 214.85 40.95 217.51 40 220C38.25 222.01 37.93 227.07 41.74 229.79C47.53 232.39 54.88 233.74 60 232Z" fill="#8cc79b"/><path d="M59.2 231.52L42.8 221.68M52 227.2L51.12 221.42M47.6 224.56L42.48 226.74" fill="none" stroke-width="1"/>
  <path id="s4c-fig-6" d="M68 252C72.43 254.37 79.34 254.25 85 252.74C88.87 250.81 89.31 246.11 88 244C87.49 241.57 83.93 238.47 79.8 239.74C74.66 242.55 69.57 247.23 68 252Z" fill="#8cc79b"/><path d="M68.8 251.68L85.2 245.12M76 248.8L80.76 251.42M80.4 247.04L81.64 242.02" fill="none" stroke-width="1"/>
  <path id="s4c-fig-7" d="M68 266C66.08 261.91 61.17 258.49 56.45 256.77C52.78 256.29 50.13 259.7 50 262C49.15 264.14 50.1 268.35 53.63 269.47C58.63 269.91 64.52 268.89 68 266Z" fill="#5fae7a"/><path d="M67.28 265.84L52.52 262.56M60.8 264.4L58.77 259.95M56.84 263.52L53.47 266.77" fill="none" stroke-width="1"/>
  <path id="s4c-fig-8" d="M69 160C74.15 158 79.68 151.82 83.28 145.64C85.17 140.69 82.45 136.54 80 136C77.99 134.5 73.07 135.15 70.56 139.8C68.22 146.58 67.15 154.8 69 160Z" fill="#8cc79b"/><path d="M69.44 159.04L78.46 139.36M73.4 150.4L78.98 148.31M75.82 145.12L73.54 140.01" fill="none" stroke-width="1"/>
  <path d="M53 278H83L80 308H56Z" fill="#f9c99a"/>
  <path d="M54.2 284.6H81.8M55 291.4H81M55.8 298.2H80.4" fill="none" stroke-width="1"/>
</g>
<g id="s4c-board">
  <g id="s4c-stand">
  <rect x="195" y="180" width="6" height="112" fill="#ffffff"/>
  <rect x="299" y="180" width="6" height="112" fill="#ffffff"/>
  <rect x="201" y="258" width="98" height="5" fill="#ffffff"/>
  <rect x="184" y="292" width="28" height="4.5" rx="1.5" fill="#ffffff"/><path d="M188 296v3" fill="none" stroke-width="1.2"/><circle cx="188" cy="303.5" r="4.5" fill="#ffffff"/><circle cx="188" cy="303.5" r="1.2" fill="#3a2d66" stroke="none"/><path d="M208 296v3" fill="none" stroke-width="1.2"/><circle cx="208" cy="303.5" r="4.5" fill="#ffffff"/><circle cx="208" cy="303.5" r="1.2" fill="#3a2d66" stroke="none"/><rect x="288" y="292" width="28" height="4.5" rx="1.5" fill="#ffffff"/><path d="M292 296v3" fill="none" stroke-width="1.2"/><circle cx="292" cy="303.5" r="4.5" fill="#ffffff"/><circle cx="292" cy="303.5" r="1.2" fill="#3a2d66" stroke="none"/><path d="M312 296v3" fill="none" stroke-width="1.2"/><circle cx="312" cy="303.5" r="4.5" fill="#ffffff"/><circle cx="312" cy="303.5" r="1.2" fill="#3a2d66" stroke="none"/>
</g>
  <rect id="s4c-frame" x="170" y="52" width="160" height="134" rx="2.5" fill="#ffffff"/>
  <rect x="174" y="56" width="152" height="126" rx="1" fill="#ffffff" stroke-width="1"/>
  <g id="s4c-diagram" stroke-linecap="round" stroke-linejoin="round">
  <path d="M192 76V66a2 2 0 0 1 2-2H220a2 2 0 0 1 2 2V82a2 2 0 0 1-2 2H201" fill="none" stroke="#ef5b5b" stroke-width="1.2"/>
  <text x="207" y="75.8" font-family="ui-monospace, monospace" font-size="5.2" font-weight="700" text-anchor="middle" fill="#ef5b5b" stroke="none">UI</text>
  <path d="M226 74L251 74" fill="none" stroke="#3a2d66" stroke-width="1.2"/><path d="M247.49 75.92L251 74L247.49 72.08" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
  <rect x="255" y="63" width="32" height="22" rx="2" fill="none" stroke="#3a2d66" stroke-width="1.2"/><text x="271" y="75.8" font-family="ui-monospace, monospace" font-size="5.2" font-weight="700" text-anchor="middle" fill="#3a2d66" stroke="none">API</text>
  <path d="M287 74L298 74" fill="none" stroke="#3a2d66" stroke-width="1.2"/><path d="M294.49 75.92L298 74L294.49 72.08" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
  <path d="M299 66v15a7 3 0 0 0 14 0v-15" fill="none" stroke="#3a2d66" stroke-width="1.2"/><ellipse cx="306" cy="66" rx="7" ry="3" fill="none" stroke="#3a2d66" stroke-width="1.2"/><path d="M299 73.5a7 3 0 0 0 14 0" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
  <path d="M271 86L271 103" fill="none" stroke="#3a2d66" stroke-width="1.2"/><path d="M269.08 99.49L271 103L272.92 99.49" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
  <rect x="254" y="107" width="34" height="20" rx="2" fill="none" stroke="#3a2d66" stroke-width="1.2"/><text x="271" y="118.8" font-family="ui-monospace, monospace" font-size="5.2" font-weight="700" text-anchor="middle" fill="#3a2d66" stroke="none">CACHE</text>
  <path d="M306 85L306 117L292 117" fill="none" stroke="#3a2d66" stroke-width="1.2"/><path d="M295.51 115.08L292 117L295.51 118.92" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
  <rect x="194" y="101" width="26" height="18" rx="2" fill="none" stroke="#3fa58a" stroke-width="1.2"/>
  <path d="M199 106.5h15M199 110h10M199 113.5h12" fill="none" stroke="#3fa58a" stroke-width="1.2"/>
  <path d="M250 117L224 117" fill="none" stroke="#3fa58a" stroke-width="1.2" stroke-dasharray="2.4 3"/><path d="M227.51 115.08L224 117L227.51 118.92" fill="none" stroke="#3fa58a" stroke-width="1.2"/>
  <path d="M190 146h0.1M190 154h0.1M190 162h0.1" fill="none" stroke="#3a2d66" stroke-width="2.2"/>
  <path d="M196 146h26M196 154h18M196 162h22" fill="none" stroke="#ab9ee6" stroke-width="1.2"/>
  <path d="M226 152l3 3 6-6" fill="none" stroke="#3fa58a" stroke-width="1.2"/>
  <path d="M262 150c-1-5 5-7 7.4-3.6c1.2-4 7.4-4 8.4.4c3.6-.4 5 4.4 1.6 6H262.6c-3 0-3.2-2.6-.6-2.8Z" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
  <path d="M271 128L271 142" fill="none" stroke="#3a2d66" stroke-width="1.2" stroke-dasharray="2.4 3"/><path d="M269.08 138.49L271 142L272.92 138.49" fill="none" stroke="#3a2d66" stroke-width="1.2"/>
</g>
  <rect id="s4c-tray" x="186" y="186" width="128" height="4" rx="1" fill="#ffffff"/>
  <rect x="210" y="182.6" width="14" height="3.4" rx="1" fill="#ffffff" stroke-width="1"/><rect x="220" y="182.6" width="4" height="3.4" fill="#3fa58a" stroke-width="1"/>
  <rect x="228" y="182.6" width="9" height="3.4" rx="1" fill="#ffffff" stroke-width="1"/>
  <g id="s4c-notes"><g transform="rotate(5 317.5 98)"><path d="M311.5 92h12v9l-3 3h-9Z" fill="#f5c35a"/><path d="M323.5 101h-3v3" fill="none" stroke-width="1"/><path d="M314.1 95.6h6.4M314.1 98.6h4.4" fill="none" stroke-width="1"/></g><g transform="rotate(-4 317 114)"><path d="M311 108h12v9l-3 3h-9Z" fill="#ef5b5b"/><path d="M323 117h-3v3" fill="none" stroke-width="1"/><path d="M313.6 111.6h6.4M313.6 114.6h4.4" fill="none" stroke-width="1"/></g><g transform="rotate(3 317.5 130)"><path d="M311.5 124h12v9l-3 3h-9Z" fill="#8cc79b"/><path d="M323.5 133h-3v3" fill="none" stroke-width="1"/><path d="M314.1 127.6h6.4M314.1 130.6h4.4" fill="none" stroke-width="1"/></g><g transform="rotate(-5 302 156)"><path d="M296 150h12v9l-3 3h-9Z" fill="#f5c35a"/><path d="M308 159h-3v3" fill="none" stroke-width="1"/><path d="M298.6 153.6h6.4M298.6 156.6h4.4" fill="none" stroke-width="1"/></g></g>
</g>
<g id="s4c-dev" transform="translate(-8 0)">
  <path d="M157.52 285.91L154.3 301.22L146.08 299.49L149.3 284.18Z" fill="#e2a57c"/><g id="s4c-shoe-far-1" transform="translate(144 308)"><path d="M0 0V-7.5C0 -9.6 1.8 -10.6 4.6 -10.6H9C12 -10.2 14 -8.6 16.4 -7.4C19.6 -6 23.4 -5.4 25 -3.2C25.6 -2 25.6 -0.8 25 0Z" fill="#f5c35a"/><path d="M0 -3V0H25C25.5 -1 25.6 -2 25.4 -3Z" fill="#ffffff"/><path d="M13.6 -8.6l-1.6 2.4M17 -7.2l-1.6 2.4" fill="none" stroke-width="1"/></g><path id="s4c-leg-far-1" d="M133.12 191.54C134.18 196.78 137.77 212.8 139.45 222.96C141.14 233.13 142.14 243.93 143.22 252.52C144.3 261.11 145.24 268.7 145.92 274.52C146.61 280.34 147.08 285.28 147.32 287.44L158.68 286.56C158.58 284.38 158.39 279.33 158.08 273.48C157.76 267.63 157.04 260.22 156.78 251.48C156.52 242.74 157.2 231.54 156.55 221.04C155.9 210.53 153.49 193.89 152.88 188.46A10 10 0 0 0 133.12 191.54Z" fill="#7f9fdc"/><path d="M158.98 281.32L159.58 286.49L146.42 287.51L146.22 282.31Z" fill="#7f9fdc"/>
  
  <path d="M130.87 279.3L128.5 293.95L120.21 292.61L122.57 277.96Z" fill="#e2a57c"/><g id="s4c-shoe-near-1" transform="translate(114.53 297.04) rotate(26)"><path d="M0 0V-7.5C0 -9.6 1.8 -10.6 4.6 -10.6H9C12 -10.2 14 -8.6 16.4 -7.4C19.6 -6 23.4 -5.4 25 -3.2C25.6 -2 25.6 -0.8 25 0Z" fill="#f5c35a"/><path d="M0 -3V0H25C25.5 -1 25.6 -2 25.4 -3Z" fill="#ffffff"/><path d="M13.6 -8.6l-1.6 2.4M17 -7.2l-1.6 2.4" fill="none" stroke-width="1"/></g><path id="s4c-leg-near-1" d="M121.05 191.03C121.88 196.34 124.37 213.33 126.05 222.91C127.72 232.49 131.16 241.33 131.12 248.49C131.07 255.65 127.44 260.87 125.78 265.86C124.12 270.85 121.91 276.33 121.13 278.43L131.67 282.77C132.63 280.67 135.22 275.68 137.42 270.14C139.62 264.59 143.79 257.68 144.88 249.51C145.97 241.33 144.28 231.18 143.95 221.09C143.63 211 143.12 194.33 142.95 188.97A11 11 0 0 0 121.05 191.03Z" fill="#7f9fdc"/><path d="M134.3 278.23L132.5 283.12L120.3 278.08L122.47 273.35Z" fill="#7f9fdc"/><path d="M131 243c2.6 1.2 5.4 1.6 8.2 1.2" fill="none" stroke-width="1"/>
  <rect x="121" y="188" width="31.6" height="5" rx="0.8" fill="#7f9fdc"/><path d="M137 188v5" fill="none" stroke-width="1"/>
  <path d="M142.41 167.26C143.66 170.56 148.64 183.78 149.89 187.09A3.3 3.3 0 0 0 156.11 184.91C155.03 181.55 150.67 168.11 149.59 164.74Z" fill="#e2a57c"/><g id="s4c-mug"><path d="M169 179.6h1.6a4.4 4.4 0 0 1 0 8.8H169v-2.4h1.6a2 2 0 0 0 0-4H169Z" fill="#ffffff"/><path d="M155.6 176.8h14v12.6q0 1.6-1.6 1.6h-10.8q-1.6 0-1.6-1.6Z" fill="#ffffff"/><path d="M155.6 180.4h14" fill="none" stroke="#3fa58a" stroke-width="1.6"/></g><g id="s4c-hand-1b" transform="translate(153 186) rotate(-4) scale(1.05 1.05)" stroke-width="1.33"><path d="M0 -4.2C2.4 -4.7 4.8 -4.9 7 -4.8H12.6C13.9 -4.8 14.5 -3.6 13.6 -2.8C15 -3 16.3 -2 15.6 -0.7C16.8 -0.5 17.1 1 16 1.4C16.9 1.8 16.7 3.3 15.4 3.4H8.6C5.8 3.4 2.8 3.3 0 3.2Z" fill="#e2a57c" stroke="none"/><path d="M0 -4.2C2.4 -4.7 4.8 -4.9 7 -4.8H12.6C13.9 -4.8 14.5 -3.6 13.6 -2.8C15 -3 16.3 -2 15.6 -0.7C16.8 -0.5 17.1 1 16 1.4C16.9 1.8 16.7 3.3 15.4 3.4H8.6C5.8 3.4 2.8 3.3 0 3.2" fill="none"/><path d="M13.6 -2.8H7.1M15.6 -0.7H7.4M16 1.4H7.8" fill="none" stroke-width="0.86"/></g>
  <g id="s4c-upper-1" transform="rotate(4 137 190)">
  <path d="M133 116L132 131L138 137L144.4 130.6L143 116Z" fill="#e2a57c"/>
  <path id="s4c-top-1" d="M131 129C125 131 121 136 120 143C119 152 121 162 122 172C122.6 178 122 184 121 189C130 191.4 141 191.6 152 190C152 184 151 178 150.6 172C150.4 165 153.6 157 153.6 149C153.6 140 150 133 144 130.6L138 136Z" fill="#ab9ee6"/>
  <path d="M131 129L138 136L134.6 138.6L129.6 131.4ZM144 130.6L138 136L141.6 138.6L146 132.6Z" fill="#ab9ee6"/>
  <path d="M124 176c3 3.4 7.4 5.6 12.6 6.4M146 158c1 2.6 1.6 5.2 1.6 8" fill="none" stroke-width="1"/>
  <g id="s4c-head-1" transform="translate(139 104) rotate(-9)">
  <circle id="s4c-bun" cx="-8.4" cy="-19" r="6.4" fill="#7b4b3a"/>
  <path d="M-11.6 -21.2c1.4-1.6 3.4-2.2 5.4-1.8" fill="none" stroke="#f6a85e" stroke-width="1"/>
  <path d="M-4 15C-9 13 -12.6 8 -13 1C-13.4 -9 -8 -18.6 1 -19.4C7 -19.8 11.6 -16.6 12.6 -11.8L-1 8Z" fill="#7b4b3a"/>
  <path d="M-3 -16.5C5 -16.5 10.5 -11.5 11 -4.5C11.2 -2.5 11.6 -0.6 12.6 1.4C13.4 3 13.4 4.4 12.4 5C11.8 5.4 11.4 5.6 11 6C11.6 7 11.6 8.2 11 9C10.8 10.5 10.2 12 8.6 13.8C6 16.4 2 17 -1.5 15.5C-5 14 -8 9.5 -9 4C-10 -4 -9 -16.5 -3 -16.5Z" fill="#e2a57c"/>
  <path d="M-13 1C-13.4 -9 -8 -18.6 1 -19.4C7.4 -19.8 12 -16.4 12.8 -11.4C13 -9.6 12.4 -8.4 11.4 -8.4C10.2 -11.2 7.4 -13.4 3.6 -13.6C1.6 -11.2 -1 -9.6 -3.6 -8.8C-3.2 -6.4 -3.6 -4 -4.6 -2.4C-6.8 -3.2 -8.6 -1.8 -8.8 0.6C-9 2.6 -8.6 4.6 -7.8 6.4C-10.8 6 -12.8 4.2 -13 1Z" fill="#7b4b3a"/>
  <path d="M-5 -15.6c2.6-1.8 6-2.4 9-1.8M7.6 -15.4c1.4.6 2.6 1.6 3.4 2.8" fill="none" stroke="#f6a85e" stroke-width="1"/>
  <path d="M-3.6 -2.6C-6.1 -3.8 -7.9 -1.8 -7.6 0.7C-7.3 3.1 -5.7 4.4 -3.7 4Z" fill="#e2a57c"/>
  <path d="M-4.9 -0.8c-.9.3-1.1 1.6-.4 2.6" fill="none" stroke-width="1"/>
  <circle cx="-5.2" cy="6.2" r="1.3" fill="#f5c35a" stroke-width="1"/>
  <circle cx="4.6" cy="-1.4" r="1.15" fill="#3a2d66" stroke="none"/><circle cx="9.5" cy="-1.5" r="1" fill="#3a2d66" stroke="none"/>
  <path d="M2.6 -5.2c1.1-.6 2.6-.7 3.8-.3M8.4 -5c.7-.4 1.5-.5 2.2-.3M3 -1.8l-1.2-.8" fill="none" stroke-width="1"/>
  <path d="M11.9 5.2c-.7.5-1.5.6-2.3.2" fill="none" stroke-width="1"/>
  <path d="M10.1 9.3c-.9.6-2 .6-2.8 0" fill="none" stroke-width="1"/>
</g>
  </g>
  <path id="s4c-arm-1" d="M142.01 141.75L179.36 130.52Q182.25 130.47 182.06 127.53Q186.7 111.69 190.17 95.53L189.33 92.13L186.05 91.24L183.61 93.75L175.87 122.15L139.39 132.51Z" fill="#e2a57c"/><path d="M175.87 122.15l-3.27 0.93" fill="none" stroke-width="1"/><path id="s4c-sleeve-1" d="M133.42 137.12C131.89 131.73 137.6 129.9 141.78 129.96L169.73 122.23Q173.02 127.95 173.28 134.74L144.37 142.74C140.58 144.02 135.06 142.89 133.42 137.12Z" fill="#ab9ee6"/>
  <path d="M165.66 124.01L169.66 135.15M148.94 136.87l5.77 -1.64" fill="none" stroke-width="1"/><g id="s4c-hand-1" transform="translate(184.06 97.47) rotate(-45) scale(1.15 1.15)" stroke-width="1.22"><path d="M3 -5.1H18.6L23 -3.9V-2.9L18.6 -1.7H3Z" fill="#ffffff"/><path d="M18.6 -5.1V-1.7" fill="none" stroke-width="0.87"/><path d="M21.2 -4.4L23 -3.9V-2.9L21.2 -2.4Z" fill="#ef5b5b" stroke="none"/><path d="M0 -3.6C3 -4.6 6.4 -5 9.4 -4.6C11.6 -4.2 13.4 -3.4 14.2 -2C15 -0.6 14.6 0.8 13.4 1C14.2 1.8 14 3.2 12.8 3.4C13.4 4.2 13 5.4 11.8 5.6C12.2 6.4 11.6 7.4 10.4 7.4C8.6 7.4 6.6 6.4 5 5.2C3.4 4.2 1.8 3.8 0 3.6Z" fill="#e2a57c" stroke="none"/><path d="M0 -3.6C3 -4.6 6.4 -5 9.4 -4.6C11.6 -4.2 13.4 -3.4 14.2 -2C15 -0.6 14.6 0.8 13.4 1C14.2 1.8 14 3.2 12.8 3.4C13.4 4.2 13 5.4 11.8 5.6C12.2 6.4 11.6 7.4 10.4 7.4C8.6 7.4 6.6 6.4 5 5.2C3.4 4.2 1.8 3.8 0 3.6" fill="none"/><path d="M13.4 1C12.2 0.8 11 0.8 10 1.2M12.8 3.4C11.8 3.2 10.8 3.3 9.8 3.6M11.8 5.6C10.8 5.4 9.8 5.5 9 5.8" fill="none" stroke-width="0.78"/><path d="M5.6 -4.2C8.2 -6 11.2 -6.8 14.4 -6.2C15.6 -6 15.8 -4.6 14.6 -4.2C12.4 -3.6 10.8 -3 9.6 -2.2Z" fill="#e2a57c"/></g>
</g>
<g id="s4c-colleague">
  <g id="s4c-stool">
  <path d="M381 244L373 308M407 244L415 308" fill="none" stroke-width="0"/>
  <path d="M380 244h5l-6.6 64h-4.6Z" fill="#f9c99a"/>
  <path d="M403 244h5l8.2 64h-4.6Z" fill="#f9c99a"/>
  <rect x="376" y="278" width="36" height="4" rx="1.2" fill="#f9c99a"/>
  <rect x="374" y="238" width="40" height="6.5" rx="2" fill="#ffffff"/>
</g>
  <path d="M380.19 258.27L386.05 269.41L378.61 273.33L372.75 262.19Z" fill="#7a4b33"/><g id="s4c-shoe-far-2" transform="translate(388 279.2) scale(-1 1)"><path d="M0 0V-7.5C0 -9.6 1.8 -10.6 4.6 -10.6H9C12 -10.2 14 -8.6 16.4 -7.4C19.6 -6 23.4 -5.4 25 -3.2C25.6 -2 25.6 -0.8 25 0Z" fill="#ffffff"/><path d="M0 -3V0H25C25.5 -1 25.6 -2 25.4 -3Z" fill="#ab9ee6"/><path d="M13.6 -8.6l-1.6 2.4M17 -7.2l-1.6 2.4" fill="none" stroke-width="1"/></g><path d="M392.64 216.42C386.79 216.87 362.23 213.82 357.56 219.12C352.89 224.41 362.1 240.67 364.62 248.18C367.14 255.69 371.34 261.52 372.68 264.18L382.12 259.82C381 257.15 377.99 248.98 375.38 243.82C372.76 238.67 363.78 230.26 366.44 228.88C369.1 227.51 387.21 234.46 391.36 235.58A9.6 9.6 0 0 0 392.64 216.42Z" fill="#f6a85e"/><path d="M380.57 254.8L382.94 259.44L371.86 264.56L369.86 259.76Z" fill="#f6a85e"/>
  <g id="s4c-upper-2" transform="rotate(-5 398 232)">
  <path id="s4c-top-2" d="M392 162C400 162 408 166 411.6 174C415 182 414 196 413.2 208C412.6 218 413.6 226 413 234H383C382 226 381 216 380.6 208C380 198 379.4 188 380.4 180C381.6 170 384.4 164 392 162Z" fill="#3fa58a"/>
  <path d="M384 230c4-1.6 8.8-2 13.4-1.2M410 196c-1.2 3-1.6 6-1.2 9" fill="none" stroke-width="1"/>
  <path d="M384 150L384 166L391 172L397 165L396 150Z" fill="#7a4b33"/><path d="M383.6 163c2.4 3 5 4.6 8 5.2" fill="none" stroke-width="1"/>
  <g id="s4c-head-2" transform="translate(388 146) rotate(8)">
  <path d="M3 -16.5C-5 -16.5 -10.5 -11.5 -11 -4.5C-11.2 -2.5 -11.8 -0.4 -12.8 1.6C-13.8 3.4 -13.8 4.8 -12.6 5.4C-12 5.6 -11.4 5.7 -11 6C-11.6 7 -11.6 8.4 -11 9.4C-10.6 11.6 -9.6 13.6 -7.6 15.2C-4.8 17.2 -0.6 17.2 2.6 15.4C5.8 13.6 8.4 9.4 9.2 4C10 -4 9 -16.5 3 -16.5Z" fill="#7a4b33"/>
  <path d="M9.4 4C11 -4 10.6 -12 5.4 -16.6C1 -20.2 -6 -19.8 -9.8 -16C-11.4 -14.4 -11.8 -12.2 -11.2 -10.2C-8.4 -12.2 -4.6 -12.8 -1 -12C1.2 -11.4 2.6 -9.6 3 -7.2C3.4 -5 4.2 -3.2 5.6 -2.4L6.8 2.4Z" fill="#3a2d66"/>
  <path d="M-6 -16.4c2.6-1.4 5.6-1.6 8.4-.6" fill="none" stroke="#7f6cc4" stroke-width="1"/>
  <path d="M8.6 2.2C8 7 6.6 11 3.6 13.8C0.6 16.6 -4 17.4 -7.6 15.4C-9.6 14.2 -10.8 12 -11.2 9.6C-9.6 10.4 -7.8 10.4 -6.2 9.6C-4.6 8.6 -3.2 8.2 -1.6 8.8C0.6 9.6 2.6 9 4 7.2C5.4 5.4 6.4 3.4 6.8 1.8Z" fill="#3a2d66"/>
  <path d="M-10.9 8.3c.9.5 2 .5 2.9 0" fill="none" stroke-width="1"/>
  <path d="M4.2 -2.4C6.7 -3.6 8.5 -1.6 8.2 0.9C7.9 3.3 6.3 4.6 4.3 4.2Z" fill="#7a4b33"/>
  <path d="M5.5 -0.6c.9.3 1.1 1.6.4 2.6" fill="none" stroke-width="1"/>
  <circle cx="-4.6" cy="-1.4" r="3.8" fill="none" stroke-width="1"/>
  <path d="M-8.4 -1.8c-.6-.2-1.2-.2-1.8 0M-11.6 -4.2c-.9 1.5-.9 3.4-.2 5M-0.8 -1.6L4.4 -2.4" fill="none" stroke-width="1"/>
  <circle cx="-5" cy="-1.3" r="1.15" fill="#3a2d66" stroke="none"/>
  <path d="M-7 -7.2c1.2-.7 3-.8 4.4-.3" fill="none" stroke-width="1.1"/>
</g>
  </g>
  <path d="M353.13 284.85L353.67 300.25L345.27 300.55L344.73 285.15Z" fill="#7a4b33"/><g id="s4c-shoe-near-2" transform="translate(356 308) scale(-1 1)"><path d="M0 0V-7.5C0 -9.6 1.8 -10.6 4.6 -10.6H9C12 -10.2 14 -8.6 16.4 -7.4C19.6 -6 23.4 -5.4 25 -3.2C25.6 -2 25.6 -0.8 25 0Z" fill="#ffffff"/><path d="M0 -3V0H25C25.5 -1 25.6 -2 25.4 -3Z" fill="#ab9ee6"/><path d="M13.6 -8.6l-1.6 2.4M17 -7.2l-1.6 2.4" fill="none" stroke-width="1"/></g><path id="s4c-leg-near-2" d="M398.87 218.66C395.6 219.15 387.28 220.04 379.29 221.62C371.31 223.2 356.71 221.54 350.97 228.13C345.23 234.73 346.11 251.47 344.85 261.2C343.59 270.94 343.66 282.33 343.42 286.55L354.58 287.45C355.01 283.34 356.07 271.06 357.15 262.8C358.22 254.53 357.11 241.27 361.03 237.87C364.96 234.46 374.02 241.8 380.71 242.38C387.39 242.96 397.73 241.52 401.13 241.34A11.4 11.4 0 0 0 398.87 218.66Z" fill="#f6a85e"/><path d="M355.69 282.32L355.48 287.52L342.52 286.48L343.13 281.31Z" fill="#f6a85e"/><path d="M357 240c-2 -.4 -3.6 .4 -4.6 2" fill="none" stroke-width="1"/>
  
  <g id="s4c-arm-cup" transform="rotate(-5 398 232)">
  <g id="s4c-cup">
  <path d="M360 185h15l-1.6 19h-11.8Z" fill="#ffffff"/>
  <path d="M360.6 191h13.8l-0.6 7h-12.6Z" fill="#7b4b3a"/>
  <rect x="359" y="181.6" width="17" height="3.4" rx="1.2" fill="#ffffff"/>
  <path d="M364 178c-1.5-2 1.5-3 0-5.5M369 178c-1.5-2 1.5-3 0-5.5" fill="none" stroke-width="1"/>
</g>
  <path id="s4c-arm-2" d="M399.76 176.47L408.19 204.65Q408 210.39 402.35 209.84Q391.77 205.54 381.66 200.13L379.52 197.36L380.86 194.23L384.34 193.87L396.53 199.1L390.24 179.53Z" fill="#7a4b33"/><path d="M395.71 170.42C400.47 168.89 402.62 175.55 402.28 177.76L405.87 190.26Q400.02 193.61 393.31 194.3L388.64 181.09C387.42 177.29 390 172.25 395.71 170.42Z" fill="#3fa58a"/><g id="s4c-hand-2" transform="translate(386.31 198.42) rotate(-166.8) scale(1.1 -1.1)" stroke-width="1.27"><path d="M0 -4C2.6 -4.6 5.6 -4.8 8.6 -4.8H14.6C15.8 -4.8 16.4 -3.6 15.6 -2.8C16.6 -2.6 16.8 -1 15.8 -0.6C16.8 -0.3 16.8 1.3 15.8 1.6C16.6 2 16.4 3.4 15.2 3.6H8.4C5.2 3.6 2.4 3.6 0 3.8Z" fill="#7a4b33" stroke="none"/><path d="M0 -4C2.6 -4.6 5.6 -4.8 8.6 -4.8H14.6C15.8 -4.8 16.4 -3.6 15.6 -2.8C16.6 -2.6 16.8 -1 15.8 -0.6C16.8 -0.3 16.8 1.3 15.8 1.6C16.6 2 16.4 3.4 15.2 3.6H8.4C5.2 3.6 2.4 3.6 0 3.8" fill="none"/><path d="M15.6 -2.8H7.6M15.8 -0.6H7.4M15.8 1.6H7.8" fill="none" stroke-width="0.82"/><path d="M6.4 -4.4C8.4 -6 10.8 -7.4 13 -8C14.2 -8.3 14.7 -7 13.8 -6.4C12 -5.2 10.4 -4.6 9.4 -4.2Z" fill="#7a4b33"/></g>
  </g>
</g>
</g>
</svg>
        </div>
        <h3>Whiteboard</h3>
        <p>One developer draws a system diagram on a wheeled whiteboard while a colleague on a stool watches with a coffee.</p>
      </article>
  </section>
  <section class="spec">
    <div>
      <h2>Palette</h2>
      <ul class="swatches">
          <li><span class="chip" style="background:#3a2d66"></span><b>Indigo ink</b><code>#3A2D66</code><small>every outline, indigo hair, eye dots, floor line</small></li>
          <li><span class="chip" style="background:#cfc9e0"></span><b>Wall line</b><code>#CFC9E0</code><small>background decor strokes only: bricks, lamps, posters, clouds, skyline</small></li>
          <li><span class="chip" style="background:#ffffff"></span><b>White</b><code>#FFFFFF</code><small>default fill: furniture, shirts, screens, pots, sneakers, books</small></li>
          <li><span class="chip" style="background:#f9c99a"></span><b>Peach wood</b><code>#F9C99A</code><small>wood: shelf rails, posts, stools, crates, a pot</small></li>
          <li><span class="chip" style="background:#f5c35a"></span><b>Mustard</b><code>#F5C35A</code><small>a book, a duck, bulbs, sneakers, sticky notes, earring, a top</small></li>
          <li><span class="chip" style="background:#f6a85e"></span><b>Orange</b><code>#F6A85E</code><small>a pot, trousers, code dash, shine on brown hair</small></li>
          <li><span class="chip" style="background:#ef5b5b"></span><b>Coral</b><code>#EF5B5B</code><small>sneakers or soles, labels, marker tip, a mug band, a code dash</small></li>
          <li><span class="chip" style="background:#3fa58a"></span><b>Teal</b><code>#3FA58A</code><small>a book, a top, a mug band, hammock stripe, check marks</small></li>
          <li><span class="chip" style="background:#8cc79b"></span><b>Sage</b><code>#8CC79B</code><small>light leaves, a sticky note</small></li>
          <li><span class="chip" style="background:#5fae7a"></span><b>Leaf</b><code>#5FAE7A</code><small>dark leaves</small></li>
          <li><span class="chip" style="background:#ab9ee6"></span><b>Lavender</b><code>#AB9EE6</code><small>a book, a top, page lines, keyboard lines, a sneaker sole</small></li>
          <li><span class="chip" style="background:#7f9fdc"></span><b>Denim</b><code>#7F9FDC</code><small>jeans</small></li>
          <li><span class="chip" style="background:#f3cdb0"></span><b>Skin light</b><code>#F3CDB0</code><small>skin</small></li>
          <li><span class="chip" style="background:#b47852"></span><b>Skin deep</b><code>#B47852</code><small>skin</small></li>
      </ul>
      <p class="more">Core colours shown. 4 more tints and shades are listed in <code>style.json</code>.</p>
    </div>
    <div>
      <h2>Line</h2>
      <p class="line">Indigo #3a2d66 stroke 1.4 round caps and joins on every filled shape; details 1 (folds, veins, brows), finger lines 0.9; background decor #cfc9e0 at 1, unfilled.</p>
      <h2>Rules</h2>
      <ul class="rules"><li>Fill shapes white; colour covers under 7% of the card.</li><li>One outline weight: 1.4 indigo, details 1, no shading.</li><li>Background decor in pale lavender line only: bricks, lamps, posters.</li><li>Floor line at y 308 with short dashes at both ends.</li><li>Slim realistic people, head about one seventh of height, calm faces.</li><li>The figure acts out the subject; plants and props frame it.</li></ul>
    </div>
  </section>
</main>
<script>
document.querySelectorAll('.dl').forEach(b => b.addEventListener('click', () => {
  const svg = b.parentElement.querySelector('svg').cloneNode(true);
  svg.removeAttribute('role'); svg.removeAttribute('aria-label');
  const blob = new Blob([new XMLSerializer().serializeToString(svg)], { type: 'image/svg+xml' });
  const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: b.dataset.name + '.svg' });
  a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}));
</script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Meng To

Publisher

Meng To (Community)

Source

MengTo/Skills · agent-skills/illustration/illustration-line-interior · commit 5ea1661

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download illustration-line-interior.zip