AutoGineer
Generated banner for Illustration Line Interior
Generated logo for Illustration Line Interior

Illustration Line Interior

Meng ToCommunityCreated by Meng To

  • Skill
  • Content generator
  • Design and creative
  • MIT
  • Low risk
  • Has scripts
Download ZIP

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/illustration-line-interior/download

  2. 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%.

RoleHexWhere it goes
Indigo ink#3a2d66every outline, the floor line, eye dots, indigo hair (hair is a filled ink shape)
Wall line#cfc9e0background decor strokes only (bricks, lamps, posters, clouds, birds, skyline, railing). Never a fill
White#ffffffdefault fill for everything: furniture, shirts, screens, pots, books, sneakers, mugs
Peach wood#f9c99awood: ladder rails and boards, posts, stool, crate, a striped pot
Mustard#f5c35aone book, a duck, bulbs, sneakers, sticky notes, earring stud, a top
Orange#f6a85ea pot, trousers, a duck beak, shine arcs on brown hair, one code dash
Coral#ef5b5bsneakers or soles, a label, a marker tip, a mug band, one code dash, window dot
Teal#3fa58aa book, a top, a mug band, a hammock stripe, a check mark
Sage / Leaf#8cc79b / #5fae7alight and dark leaves, alternating leaf by leaf
Lavender#ab9ee6a book, a top, page lines, keyboard lines, a sneaker sole
Purple#7f6cc4a book, trousers, shine arcs on indigo hair, one code dash
Denim#7f9fdcjeans
Brown#7b4b3abrown hair, coffee in a cup
Skin#f3cdb0 #e2a57c #b47852 #7a4b33light, 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.

  1. 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.

  2. 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-).

  3. 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.

  4. 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.

  5. Render: node scripts/render.mjs card.svg card.png.

  6. 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.

  7. 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.

  8. Critique against the five criteria in references/craft.md and the Verify list below. Fix, re-render, re-sheet. Expect four or more rounds.

  9. 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

examples/books.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg role="img" aria-label="Books, Line interior style" xmlns="http://www.w3.org/2000/svg" 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>

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

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