Drawing graphics

The third mode, next to Design and the design system. A pen, a pencil, shapes and text on an artboard — for the logo, the blob behind a heading, the cut-out photograph. What you draw becomes an asset you can place on the design canvas.

It is its own mode rather than a tool on the design canvas, because drawing a logo and laying out a section are different acts. One is absolute placement of points; the other is flow layout of elements. A pen tool on the design canvas would have to decide what a bezier means inside a flex row, and it does not mean anything.

Why draw it here rather than in Affinity

Because the colours stay tokens.

A shape filled from the palette is written as fill="var(--primary, #4f8db4)" — the token, with the colour it resolved to when you saved it sitting behind it as a fallback. Placed into a design the SVG is inlined, so --primary resolves against the page: retune the colour in the design system and the logo recolours with it. Opened from Finder, or handed to a client, there is no --primary and the fallback paints it.

One attribute, correct in both places, and no export step to keep them in sync because there is only one of them.

The fallback is written as hex even though the design system speaks OKLCH. That is not a downgrade of the token — the token is still the value, and wherever it resolves the full OKLCH paints. The fallback exists for the places the token cannot reach: Illustrator, Figma, an older browser, whatever the client has. Those understand hex.

The artboard is the file

What is on screen is an SVG document. What gets saved is that same document serialised — not a drawing converted into one. So the file is small, readable and diffable, and a developer can open it without knowing this app exists.

The tools

Move	V	Select, drag, scale by the corners. ⇧ keeps the proportion
Node	A	Drag the points a path is made of, and their handles
Pen	P	Click for a corner, drag for a curve. Click the first point to close
Pencil	N	Draw freehand — one even line, smoothed into a path you can edit
Brush	B	A mark rather than a line — thicker where you press, or slow down
Rectangle	R	Drag. ⇧ for a square
Ellipse	E	Drag. ⇧ for a circle
Polygon	G	Drag from the middle. Sides in the panel
Star	S	Drag from the middle, then pull the amber dot for spikier points
Pie	O	A wedge or a donut — angles and hole in the panel
Arrow	W	Drag tail to head. ⇧ holds the angle to an eighth
Text	T	Click, then type
Crop	C	Drag a box over a picture to keep only that part
Erase	X	Click a shape to remove it

Double-clicking a path with Move takes you into its points, and double-clicking text edits it.

The pen

Click and you get a corner. Press and drag and you pull a curve out of the point you just placed, with the handle on the far side mirrored so the curve runs smoothly through it. Click the first point again to close.

⌘ drag a handle to reshape it — while you are still drawing, or after. The handles were being drawn and did nothing: every press went to “place a point”, so clicking the direction handle of the point you had just made added a third point beside it, and a curve you did not like had to be undone and drawn again. ⌘ rather than a plain click, because a plain click near the first point is already how you close the path.

While you are drawing, the path is a stroke rather than a fill — an open path carrying a fill is painted as though it were already closed, which is not what you are drawing yet. It takes the fill when you close it.

The pencil

A raw pointer trail is several hundred points and is not a path anybody can work with. So it is thinned to the points that carry the shape and given handles, which is why a freehand line comes back as ten or fifteen editable points rather than four hundred.

The thinning is measured in screen pixels, not artboard units: how much detail to keep is a question about what your hand meant, and your hand was working at whatever zoom you were at.

The brush

The pencil draws one even line. A brush draws a mark — thicker in the middle than at the ends, or thicker where your hand moved slowly. That is the difference between a stroke and a mark, and the reason a logo drawn with a pencil looks like a diagram.

Taper	full width in the middle, to nothing at both ends
Entry	starts thin and ends full — laid down and lifted off
Even	the same width all the way, but still a fillable outline

Where the width comes from: pen pressure when your hardware sends it, and the speed of your hand when it does not. A mouse reports the same pressure for every point of every stroke, so a brush that only read pressure would draw exactly the pencil’s line on most machines and look broken rather than unsupported. Speed is the honest fallback — a hand moving slowly is pressing into a curve — and it is measured against that stroke’s own typical speed, so drawing evenly gives you full width rather than punishing you for it.

A brush stroke is a filled outline, not a stroked line. SVG has one stroke-width per element; there is no variable-width stroke to write. So the mark is a shape, walked up one side and back down the other — which is what every vector application does, and why its points are the edge of the ink rather than a line through the middle. Change the brush or the width in the panel rather than moving them; the centre line is kept so it redraws without you having to draw it again. That centre line is the app’s, never the file’s.

Node editing

Anchors are squares, handles are circles. Drag either.

• ⌥ drag a handle breaks the pair, so a smooth point becomes a corner and the two sides go their own way.
• Double-click an anchor curves a corner, or straightens a curve.
• Erase, then click a point removes that point rather than the shape.

Erase is not a pixel eraser

There are no pixels here. Erase removes the thing under the pointer — a shape, or with the Node tool, one of its points. Rubbing a hole in a vector is a boolean subtract, which is a different and much larger feature; calling this Erase and quietly doing that would be the lie.

Styling part of a text

Select the word in the Text field on the left — that field has a real selection — and press Bold, Italic, Underline or the colour swatch beside them. Plain takes the styling back off.

It becomes a <tspan> around exactly those characters, which is what a styled run is in an SVG. Selecting on the drawing itself would mean building a caret and a selection over the glyphs by hand, because SVG has no editable text element — the file that comes out is identical either way.

Colour: tokens or free

Two tabs. Palette, Assignments, Transparency and Status are the design system’s colours — use them for a mark that has to move when the system does. Custom is free: hue, saturation, lightness and opacity as four sweeps, the system picker for a wheel and an eyedropper, and a hex field for a value you already know.

Custom is first, and it is what opens: saturation and lightness as a rectangle, with the hue unrolled into a strip beneath it. Values… folds out under that when you want to say hue, saturation, lightness or opacity exactly.

A gradient’s stops each get the same picker, closed until you press one — two opened at once is two pickers stacked down the panel.

The wheel is there whatever is selected, including nothing — with nothing selected it holds the colour the next shape will be drawn in.

Custom exists here and not on the design canvas, on purpose. There, a colour that is not a token is the thing this app exists to prevent. Here the drawing is the artefact, and refusing a colour because it is not in the palette would be applying a rule about web pages to a logo.

A typed hex is stored exactly as typed. Opaque colours are written as #rrggbb and see-through ones as rgba(), because those are what Illustrator and Figma read.

Leaning a shape

Lean on the bar, then drag the grips on the shape — sideways for across, up and down for down. The numbers are in Transform as well, in degrees, about the same pivot everything else turns about. It is a real SVG skew, so a leaning rectangle is still a <rect> with an angle on it — not a path whose corners have been rewritten — and it can be taken straight off again.

It is a lean, not perspective. SVG’s transforms are affine: parallel lines stay parallel, so this tilts a shape without making the far edge smaller than the near one. Bounded at 80 degrees, because at 90 a skew flattens the shape to a line and there is no way back but undo.

Text

The words and the typeface are in the Element inspector on the left, under the layers, where the design canvas keeps an element’s tag, classes and text. Weight sits with the typeface, because “Montserrat Bold” is one decision said in two words.

Size, leading, italic, underline and alignment are styling, so they are in Type on the right.

Text runs over as many lines as you type. Leading is a multiplier rather than a measurement, so changing the size does not mean restating the line height.

The library

A placed asset is made self-contained on the way in: everything it names is given a prefix of its own, every reference is rewritten to match, the editor’s own attributes are dropped, and it is given a size so it lands where you can see it. Two copies of the same asset on one page therefore cannot interfere with each other. The working file in assets/graphics is left exactly as it was.

An icon drawn in one colour arrives using the page’s colour rather than its own: its single fill becomes currentColor and the colour it was drawn in is set on the element, so nothing looks different but Icon colour now changes the drawing. Artwork in several colours keeps them — turning it into a silhouette to make one control work would be destroying the thing to tidy the panel.

Edit opens a saved asset on the artboard, Place puts it into the design, Export turns it into a finished file. Right-click a saved asset for the same three plus Delete, which sends the file to the Trash so it can be put back.

Where things are

What can be added — pen, pencil, shapes, text, crop — is the column between the panels and the canvas. What the selection can be changed to is the bar at the foot of the canvas: fill, stroke, corners, gradient, flip, shadow, opacity. Reaching for one of those opens the panel section that owns it, so the bar is the fast path into the panel rather than a separate set of controls. Two different questions, so two different places; they used to share one strip with the one asked less often sitting first.

The layers panel

Drag a row to reorder it. Dropping on the top or bottom edge of a row puts it beside that shape; dropping in the middle of a group puts it inside.

The list is paint order drawn back to front — the front of the drawing is at the top — so dragging a row upwards brings it forward.

⌘D duplicates, or right-click → Duplicate. The copy lands slightly offset and is what you are then holding, so duplicate-and-move is one gesture.

Arranging: align, distribute, flip, combine

Across the top of the artboard, and only when they can act — align and the combines need two shapes, spacing needs three, flip needs one.

Flip across, Flip down and the two quarter turns work on anything selected. A turn rotates the selection about its own centre, so two shapes side by side end up stacked rather than each spinning where it stands.

Align works to the selection’s own bounds: the leftmost stays where it is and the others come to it. Space evenly evens the gaps rather than the centres, so a row of different-sized marks actually looks even.

Editing points

With the Node tool (A), the same strip becomes about the point: Sharp takes a point’s handles off, Smooth gives it handles and curves through it, Reverse turns the path round — which is how you move an arrowhead to the other end — and Delete removes the point.

Shadows

Shadow in the panel, on anything — a shape, a photograph, a whole group. Set how far it moves Across and Down, how soft it is, and how strong.

It is SVG’s own drop-shadow filter, so it is part of the drawing rather than something the app remembers, and the colour is a token like every other colour here. The filter’s region is widened deliberately: SVG’s default clips a soft shadow off at the edge of the shape’s box, which looks like a rendering fault rather than a setting.

Black at low strength is the starting point rather than a palette colour, because a hue under a shape reads as a tint and not as a shadow. Change it if you want one.

Cutting out a photograph

Crop (C) has eight handles on the picture’s edges: pull one in to crop from that side. An uncropped photograph starts with its own box, so there is nothing to draw first. The crop cannot go past the picture, and dragging it back out to the full frame shows all of it again. Moving or resizing a cropped picture takes the crop with it.

Photo brings a picture onto the artboard — or drop a file straight onto it, or paste one. Then draw round what you want to keep with the pen.

The quickest way from there is to select both — the photograph and the outline — and right-click: Cut the picture to this outline. It is the first item in the menu. The same thing is in the panel under Cut out, if the picture is already selected and you would rather pick the shape from a list.

This is how it is actually done, and it is non-destructive: the photograph is untouched and the edge is a path you can nudge afterwards. The shape doing the cutting stops painting as itself — the layers list says which one is doing it.

Cutting is Intersect and Subtract on the strip at the top — which shape cuts, and whether the inside or the outside is kept. The Cut out panel appears only once something is cut, and only carries what the strip cannot do: how soft the edge is, and a way to show all of it again.

Cut more than once and the outlines join: the second becomes a group with the first, listed under the shape they cut, and ungrouping takes one back off. It used to replace the first, so whatever that had removed came back.

A shadow is cast by the shape after it is cut, not before — so a rectangle with a bite taken out of it has a shadow with a bite out of it too.

A gradient’s handles are the diamonds on the shape: drag an end to turn it, drag a middle one to move that stop along. Click one without dragging and its colour opens beside it — Choose closes the picker; the colour has been applied all along, so you can drag a slider and watch the shape.

The handles are there while the gradient tool is in hand, and reaching for anything else on the bar puts that tool down.

The stroke width has a grip on the top edge: drag it out to thicken. A stroke straddles its path, so the visible edge moves half as far as the width changes — the drag is doubled so the edge follows your hand.

Soften fades the edge, for hair and shadows rather than a logo’s outline. The cut becomes a blurred mask instead of a hard clip — still vector, still editable, and the photograph is still untouched.

A colour-key cutout — pick the white, drop it — is a different tool for a different job, and it is not here. It works on a product shot on flat white and falls apart on hair, and offering one where the other is needed is worse than offering neither.

Patterns

A fill that repeats — Fill › Pattern, beside Solid and Gradient, because that is what the surface is made of rather than a decoration laid on it.

Five are built in and take your design tokens: Dots, Grid, Stripes, Checks, Cross-hatch. Tile size, angle, the colour of the mark and the colour behind it.

The sixth is the one that matters. Draw something — a leaf, a mark, a shape — right-click it and choose Make a pattern from this, and your drawing becomes the tile. That is what a pattern is in a designer’s hands, and it is what a list of five presets can never be.

A group works, and is usually what you want — a mark worth repeating is rarely one shape. Select several and the menu says Make a pattern from these; they are grouped into one mark first, so the whole thing tiles rather than the one you happened to right-click. Only the group is offered as a tile, never its members: half a mark beside the whole one is not a choice anybody wants.

A picture works the same way: bring one in with Photo, then make a pattern from it.

The drawing being repeated stops painting as itself, the way a shape used as a clip does — it is a definition now. It sits in the layers list indented under whatever is repeating it, marked with ⊞, and it is still yours to edit: change the drawing and every repeat changes with it.

It is a real <pattern> in the file, defined once and used, so the saved SVG carries one copy of your drawing rather than a hundred. In user-space units, not bounding-box ones: a pattern measured as a fraction of its shape comes out as two different patterns on a wide box and a tall one, and a tile is a size.

Corners, one at a time

A rectangle’s Each corner takes four numbers, and All the same puts it back to one.

SVG’s rx rounds every corner identically — there is no per-corner rounding on a <rect>. So a rectangle whose corners differ is written as a <path>, and one whose corners agree stays a <rect>. The common case keeps the simpler element and the uncommon one is possible at all, which is the right way round.

Shapes that stay shapes

A star is five points and two radii, not ten anchors. Drag the amber dot and the points get spikier; the same numbers are in the panel when you want exactly seven of them. The amber handles are deliberately a different shape and colour from the blue corner handles — one changes how big it is, the other changes what makes it a star.

The honest cost: the file it saves is an ordinary path, because a <star points="5"> element would be a private format nothing else could open. So reopening a saved graphic gives you the shape, not the dials. The panel says so where it matters.

Undo

⌘Z, ⇧⌘Z, and the two arrows on the bar. The same stack the design canvas uses, and the same shortcut — whichever canvas is in front is the one it acts on.

A gesture is one step. Press, drag, release, and the undo takes you back to before you pressed — not to the one-unit speck a shape starts as. Clicking a token, dropping a layer, releasing a handle: each is its own step, even when it lands within the half-second that otherwise folds fast changes together.

Undo does not reach past New or Open. Undoing into the previous drawing’s contents would be restoring a different document.

Gradients

A fill can be None, Solid or Gradient, and a stroke can too. A gradient is stops with positions, exactly as on the design canvas — and each stop is a design token with its snapshot fallback, so retuning the palette moves the gradient, in a placed logo, on the page.

Drag it, don’t type it. Pick the gradient tool (D) and drag across the shape: the direction is the direction you dragged, and where you started and stopped is where the ramp starts and stops. ⇧ holds the angle to an eighth. Then the handles stay on the canvas — a line with a diamond at each end and a dot per stop. Dragging an end pivots the line about the other end, which is what dragging one end of a line means everywhere else.

While the gradient tool is held the scale handles are hidden, deliberately: a corner sitting on top of an end stop takes the drag and resizes the shape when you meant to turn the gradient.

Both canvases open a new gradient on the same two colours, from the same helper, and turn an angle into a direction through the same geometry — so a gradient runs the same way on a section and on a logo drawn to match it.

One real difference between the two, worth knowing: an SVG stop is clamped to the ends of its line where a CSS stop can sit past them. A drag that begins outside the shape pins the first stop at the edge rather than running off it.

The hover bar

Whatever the selected shape can be changed to, on the canvas rather than three sections down the rail: a rectangle is offered its corners, a star its points and inner radius, a stroked line its width, cap, dash and arrowhead. Everything on it is also in the rail — the bar is the fast path, not a separate set of features.

Corners come from the design system’s radius scale, each showing what it measures, with plain numbers underneath. A graphic drawn to sit beside a card should be able to share the card’s corner.

Stroke

Everything a stroke has: colour or gradient, width, cap, join, align, dash, and a marker at each end — the arrowheads. An arrowhead takes the colour of the line it is on, including when that colour is a token, so recolouring the stroke recolours the head.

Align is the one SVG has no attribute for. A stroke is always centred on the path, so inside and outside are built: the stroke is drawn at twice the width and half of it clipped away. Worth having — an icon on a 24px grid needs the stroke inside the box, or the icon is 25px.

Leaning a shape

Lean on the bar, then drag the grips on the shape — sideways for across, up and down for down. The numbers are in Transform as well, in degrees, about the same pivot everything else turns about. It is a real SVG skew, so a leaning rectangle is still a <rect> with an angle on it — not a path whose corners have been rewritten — and it can be taken straight off again.

It is a lean, not perspective. SVG’s transforms are affine: parallel lines stay parallel, so this tilts a shape without making the far edge smaller than the near one. Bounded at 80 degrees, because at 90 a skew flattens the shape to a line and there is no way back but undo.

Text

Click with the text tool and type on the drawing. The field sits over the artboard wearing the text’s own font and size, so what you are typing looks like what you will get. Double-click any text with Move to edit it again.

Typeface, weight, size and alignment come from the design system, on the hover bar and in the Type section — the same scales the design canvas offers.

Text on a path, and round a circle

Runs along points a line of text at any other shape, and it becomes a real <textPath>. The words stay words: selectable, searchable, and still editable here. Converting them to outlines to bend them throws the text away to get the picture, which is the same mistake as exporting a scene graph.

On a circle makes the circle for you, the size of the words, with the text already running across the top the right way up. Circle size and Start are on the text’s own panel — that is where you ask “the words do not fit, make it bigger”, and the guide is not painted so hunting for it in the layers list would be the long way round.

The shape carrying the text stops painting as itself, the way a shape used as a clip does — a circle drawn to set type around is a guide, not part of the drawing. It appears in the layers list indented under the text that uses it, marked with ↷, and giving it a fill makes it visible again.

Turning things

Select something and a grip appears on a stem above it. Drag it to turn; ⇧ holds to 15°, which gets you the useful angles without four different snaps. The number is in Transform if you would rather type it.

What it turns about is a choice, and it is the nine-cell grid — the same control as Alignment, nine points on the box named by where they are. The same 30° about the centre and about the top-left corner are two different pictures, and a tool that only offers one has decided something for you. The pivot shows on the canvas as a ringed cross while the shape is selected.

Mirror flips across or down, about the same pivot. Straighten puts it all back.

A rotated shape gets a rotated selection — the box follows the shape rather than sitting upright around a tilted thing, which tells you nothing about where its edges are. Dragging a corner scales along the shape’s own axes, so pulling an edge of something turned 30° pulls that edge rather than sliding it sideways.

Rotation is written as a transform attribute, not by rewriting the geometry: a rotated rectangle is still a <rect> with its own width, and the angle is a number you can change or remove. Rewriting the corners would turn it into a path that can never be a rectangle again.

Snapping

Drag something near an edge or a centre and it settles onto it, with a line showing what it found. It snaps to every other shape’s edges and centres, and to the artboard’s edges and middle.

Not to a grid — a grid is a decision about the drawing that the drawing has not made, and a logo built on somebody’s default 8px grid is built on nothing.

Hold ⌃ to turn it off for one drag. Snapping is right nearly always and wrong exactly when you want a thing slightly off, and that is a decision made mid-drag.

Cropping a picture

Crop (C), then drag a box over the picture. Only that part shows.

The picture is untouched: a crop is four numbers and a clip, so you can widen it again or type the numbers in the panel. That is the difference between cropping and cutting a photograph up. Click without dragging to show all of it again.

Groups

⌘G groups, ⇧⌘G ungroups, and right-click has both. A group is a real <g> in the file, not a bookkeeping wrapper — which is why an opacity or a clip on a group is one attribute rather than a change to every member.

Clicking selects the group, not the shape inside it; that is what grouping is for. Double-click goes in, the way it does everywhere, and stays in until you click outside.

Add, Subtract, Intersect, Xor

On the right-click menu, with two or more shapes selected. The front-most shape is the one doing the cutting, which is the only reading that matches what you can see.

They are done the way SVG does them rather than the way a CAD kernel does:

Add	one path, several subpaths, fill-rule: nonzero
Xor	the same, fill-rule: evenodd
Subtract	a mask — white keeps, black cuts away
Intersect	a clip — only what is inside both

The result is pixel-for-pixel what the boolean looks like. What it is not is a single recomputed outline, and there is one place that shows: a stroke would follow every original edge, including the ones inside the join. So Add and Xor drop the stroke rather than draw a seam through the middle of the shape and let you find it later.

A true boolean splits every curve where it crosses another and walks the pieces that survive. That is a real algorithm with real edge cases at tangents and self-intersections, and one written in an afternoon would be wrong on the first awkward shape and wrong silently.

Flatten, and saving part of a board

Flatten turns a group into one path. Same machinery as Add and the same caveat — one path has one fill, so it asks before throwing the other colours away.

Save as asset on the right-click menu writes just what is selected, cropped to its own box. That is how an icon set actually gets made: draw them all on one board, then save each mark out of it with its own viewBox.

Layers

The same panel the design canvas draws, through the same code — so a chevron, a thumbnail, a double-click rename and a right-click behave identically on both.

Front of the drawing at the top, the way every graphics app shows it. SVG paints in document order, so the list is drawn backwards rather than the model stored backwards — the model has to match the file.

A guide sits under the thing that uses it. A circle you set text around, or a shape cutting another one, is indented beneath its owner rather than listed beside it as though the two were unrelated — with a badge saying which job it is doing: ↷ text runs along this, ✂ cutting. In the file they are still siblings in paint order, because that is what the file has to say; the panel is free to show the relationship you actually made.

Delete removes what is selected — the ⌫ key, or the right-click menu. Clicking a layer or the artboard takes the caret out of whatever panel field you were last in, so ⌫ reaches the drawing rather than the number you had been editing.

Double-click a name to rename it. The name is yours; it does not appear in the markup. A shape being used to cut another is marked with ✂ — it is not painting as itself, and that is confusing enough to say in the list.

The library

Saved graphics live in your project under assets/, as plain .svg files — in whichever folder you choose. The chips at the top of the library say where the next save goes, and + Folder makes a new one: assets/icons, assets/backgrounds, whatever the project needs. It reads the folders the project already has rather than a list this app invented, and the library groups what it finds by folder.

The preview in the list is the file itself, rendered — not a generated thumbnail, which would be a second copy of the truth that goes stale.

Place puts it on the design canvas, inlined as <svg> rather than linked with <img src>. That is not a preference: a linked SVG is a separate document with its own root, so var(--primary) inside it cannot see the page’s tokens and the logo would paint its saved fallback for ever. Inline markup inherits.

What is not here yet

• Textured brushes. The brush varies its width; it does not vary its edge. A dry-media or bristle edge is raster, and this canvas is vector.
• Merged outlines. The booleans look right and are one element; they do not recompute the geometry. See above.
• Arcs and quadratic curves. An SVG drawn elsewhere that uses them opens here and can be moved, scaled and coloured, but its points are left alone rather than guessed at. The panel says so when it happens.
• Multiple-selection scaling, and skew.

Several at once

Shift-click to add to the selection. The set gets a dashed box around it, each shape keeps its own outline, and the panel offers Fill and Stroke for all of them — set a colour, a stroke, a width or an opacity once and every shape in the set takes it.

What it does not offer is where and how big, because those are each shape’s own. Select one for those. There are no grips on the set either: scaling several shapes about a shared centre is a real piece of work and is not built, and a handle that looked draggable and was not would be worse than none.

A gradient is a single-shape control for the same reason — each shape needs its own geometry for it, so one gradient across a set is a different question.

Combining shapes

Add and Xor make one path with several subpaths; Subtract and Intersect are a mask and a clip. All four keep the result movable, including when the parts were rectangles or ellipses: those have arcs in their corners, which a node cannot hold, so their geometry is carried as a path string and translated directly.