SVG Shapes
SVG shapes are vector elements you can add to your card templates. They scale perfectly at any size and work well as decorative accents, content separators, category markers, or background elements.
Adding a shape
In the template designer, click the + button to add a new element, then choose SVG Shape.
A circle is added by default. Select the shape and use the toolbar to change it and style it.
The toolbar
When a shape is selected, the toolbar shows these buttons from left to right:
- Shape preset: pick from 17 ready-to-use shapes or enter a custom shape.
- Sketchy style: toggle a hand-drawn look and fine-tune it.
- Fill color: set the shape's interior color.
- Stroke color: set the outline color.
- Stroke width: control the outline thickness.
- Opacity: adjust transparency.
- More options: copy, duplicate, or delete the shape.
Preset shapes
Click the shape preset button to open the shape picker. 17 shapes are available:
| Category | Shapes |
|---|---|
| Basic | Circle, Rectangle, Triangle, Diamond |
| Polygons | Pentagon, Hexagon |
| Decorative | Star, Heart, Drop, Cloud |
| Functional | Speech bubble, Arrow, Lightning, Shield, Bookmark, Banner, Cross |
Click any preset to apply it. You can switch shapes at any time.
Custom shapes
Select Custom to enter your own SVG data. Three formats are supported:
- Circle:
circle:50(radius from 0 to 100) - Rectangle:
rect:0,0,100,100(x, y, width, height) - SVG path: any path starting with
M, e.g.M 50 0 L 100 100 L 0 100 Zfor a triangle
Styling a shape
Use the toolbar buttons to control how the shape looks.
- Fill color: the shape's interior color. Supports all color tokens including primary color and category colors.
- Stroke color: the outline color.
- Stroke width: the outline thickness.
- Opacity: transparency of the entire shape.
Shapes use the same color system as other template elements.
Sketchy style
Click the sketchy style button (pencil icon) to give the shape a hand-drawn look. Lines become imperfect and organic, great for playful, informal, or workshop-style card decks.
Fill styles
When sketchy mode is on, you can pick how the shape interior is drawn:
- Hachure (default): parallel sketchy lines
- Solid: filled in, still with rough edges
- Zigzag: zigzag pattern
- Cross Hatch: crossing hatch lines
- Dots: dotted fill
- Sunburst: radial lines
- Dashed: dashed line pattern
- Zigzag Line: zigzag line pattern
Fine-tuning
Five sliders let you dial in the exact feel:
- Roughness: how wobbly the lines are. Lower = cleaner, higher = more hand-drawn.
- Bowing: how much curved lines bend. Only noticeable on shapes with curves (circles, hearts, clouds).
- Hachure Angle: the direction of fill lines.
- Fill Weight: thickness of the fill pattern lines.
- Hachure Gap: spacing between fill lines. Larger values make the pattern more open.
Start with the defaults and adjust from there. Small changes go a long way.
Layout
Shapes resize freely. Drag the handles to stretch them to any proportion. You can also rotate shapes by any angle.
For absolute and background shapes, you can also control position and z-index.
Tips
- Use a large, low-opacity shape behind your content as a background accent.
- Speech bubbles pair naturally with quote or discussion cards.
- Combine sketchy shapes with handwritten fonts for a cohesive whiteboard look. Good matches available in the font picker: Caveat, Patrick Hand, Indie Flower, Architects Daughter, Sue Ellen Francisco, and Permanent Marker.
- Shapes respond to the card's primary color when you use color tokens, so each card in a deck can show the shape in its own color.