artful drawing
Open the studio

Draw anything with a few blocks and a few rules.

Every picture in artful drawing is a stack of simple shapes. The magic comes from repeats: small algorithms that mirror, spin, step, scatter and spiral one shape into many. This guide shows how each one works, why it looks good, and how artists have used the same ideas for centuries.

Every example below is live. Press Open in studio under any picture to take it apart, and drag the sliders in the playgrounds to feel what each number does.

1. Blocks: the only thing you draw

A block is one shape with a position, a size, a turn, a color and a handful of settings of its own. That is the whole vocabulary.

You never draw lines point by point. You pick a block from the shelf, then adjust it. A circle becomes a sun, a head, a spot on a wing or a snowball depending on where it sits and what color it is. Blocks further down the Layers list are drawn first, so later blocks sit on top, just like cut paper on a table.

The shelf has four families:

Easiest start: open the studio’s Draw along tab. A faint copy of the finished picture shows where each part goes, and every step has a “Do this step” button. Or press P and doodle with the pen: every line can be mirrored into a kaleidoscope.

Tip: give blocks names (the text box at the top of the inspector). “Left ear” is much easier to find in Layers than “Circle copy copy”.

2. Mirror: draw half, get the whole

Most living things are bilaterally symmetric: the left side mirrors the right. Butterflies, faces, leaves, beetles and people all share this.

Add a Mirror repeat (or press M) and the block is copied and flipped across a fold line. The fold is the center of the canvas unless you choose This block or A point I choose. Place your block beside the fold, not on it, or the copy lands exactly on top of the original.

Designers call this a reflection. Because our brains read symmetry as health and order, a mirrored drawing instantly looks intentional. A small, deliberate break in symmetry (a tilted head, one raised antenna) adds life. To do that, give the one part that differs its own block with no mirror.

3. Spin around: flowers, mandalas, snowflakes

Spin around copies a block around a center point, evenly spaced, like petals on a daisy or spokes on a wheel. Mathematicians call this rotational symmetry.

Six copies of one petal is a flower. Twelve copies with Color shift per copy turned up walk around the color wheel and give you a rainbow. Turn on Kaleidoscope and every other copy is mirrored too, which is exactly how a kaleidoscope’s two mirrors work. That combination of turning and flipping is called dihedral symmetry, and it is the symmetry of snowflakes, rose windows and most mandalas.

Rule of thumb: odd counts (5, 7) feel natural and floral; even counts (6, 8, 12) feel architectural and calm. Snow crystals always have 6 arms because of how water molecules lock together in ice.

4. Step and repeat: growth and rhythm

Step and repeat makes copies one after another. Each copy moves, turns, resizes and shifts color by the same amount as the last. It is the simplest kind of iteration: do the same small thing again and again.

Small numbers matter a lot here. A resize of 0.9 shrinks slowly and gives you dozens of visible steps; 0.6 disappears in four. The swirl above is the classic “whirling squares” sketch artists have drawn since the Bauhaus. Try changing only the turn from 8° to 3° and watch it turn into a tunnel.

5. Grid: wallpaper and textiles

Grid fills rows and columns. With Brick offset every other row shifts half a step, which is how bricks, honeycombs and many fabric prints are laid out.

Mathematicians have proven there are exactly 17 ways to repeat a pattern across a flat surface using shifts, turns and mirrors. These are the wallpaper groups, and every one of them appears in the tile work of the Alhambra in Spain. You can build many of them in artful drawing by stacking Grid with Mirror or Spin around (see section 8).

6. Scatter and seeds: controlled randomness

Scatter sprinkles copies around at random, with a bit of variety in size, turn and color. Stars, snow, confetti, freckles and grass all look better scattered than lined up.

Computers cannot really roll dice. They use a formula that produces numbers that look random, starting from a number called the seed. The same seed always gives the same sprinkle, which means your picture never changes by itself, and a share link opens exactly what you saw. Change the seed to reshuffle.

Generative artists call this idea seeded randomness. It is how an artist can make ten thousand unique variations of a design and still reproduce any one of them.

7. The golden angle: how sunflowers pack seeds

Turn by 137.5° between each seed, move a little further out each time, and you get the famous sunflower spiral. That angle is the golden angle, and it packs seeds with almost no gaps.

Why that number? If the turn were a simple fraction of a circle, such as 1/3 or 2/5, the seeds would line up in straight spokes with empty wedges between them. 137.5° is 360° divided by the golden ratio squared (about 2.618). The golden ratio is the “most irrational” number, the hardest to approximate with a fraction, so no two seeds ever line up. Nudge the angle by even a few tenths of a degree and the packing breaks.

If you count the spirals curving each way in a real sunflower, pine cone or pineapple, you usually get two neighboring Fibonacci numbers (1, 1, 2, 3, 5, 8, 13, 21, 34, 55…). The pattern is called phyllotaxis, from the Greek for “leaf arrangement”. You can use it as a block (Seed spiral) or as a repeat (Golden spiral) that works on any shape:

8. Stacking repeats: order matters

A block can have several repeats. Each one repeats everything above it in the list. That is how three simple ideas become intricate.

Both pictures below use the same two repeats on the same circle: a Spin around with 10 copies, and a Step that shrinks each copy. In the first, the Step comes first and makes a little line of shrinking dots, which Spin then copies ten times. In the second, the Spin comes first and makes a ring, which Step then copies into smaller and smaller rings.

Use the ↑ and ↓ buttons on each repeat card to change the order. Programmers would call this composition of transformations; in plain words, the recipe runs top to bottom.

Performance note: copies multiply. Twelve spins of twenty steps of a grid of 36 is 8,640 shapes. artful drawing stops at 3,000 copies per block to keep your browser responsive.

9. Fractals and recursion: rules that call themselves

A recursive rule uses itself inside itself. “A branch is a stick with two smaller branches on its end” is a complete description of a tree, because each smaller branch follows the same rule.

The Fractal tree block applies that rule a set number of times (its levels). Two levels look like a slingshot. Five levels look like a winter tree. Nine levels, a little randomness and some leaves look alive. Every extra level doubles the number of tips, which is why going past nine gets slow.

The Koch snowflake (Helge von Koch, 1904) starts as a triangle. Every straight edge is replaced by an edge with a bump in the middle, then every edge of that shape gets a bump, and so on. Its outline grows longer forever while the area stays finite.

The Sierpinski triangle (Wacław Sierpiński, 1915) does the opposite: cut the middle out of a triangle, then cut the middle out of each of the three triangles left, forever. Long before Sierpiński, Cosmati stone floors in 13th-century Italian churches used the same design.

The Snowflake arm is a recursive branch too: the main arm grows side branches at an angle, and each side branch grows its own. Spin one arm around six times and you get a crystal much like the ones Wilson Bentley photographed in Vermont starting in 1885.

The botanist Aristid Lindenmayer formalized branching rules like these in 1968 as L-systems, now used to grow plants in films and games. See the References page for his free book.

10. Clipping: painting through a stencil

Clip inside hides every part of a block that falls outside another block. It works exactly like a stencil or masking tape.

This is the secret to Easter eggs: a Pattern block (stripes, zigzags, dots, waves, scallops or checks) is much bigger than the egg, then clipped inside it. The same trick puts a garland inside a Christmas tree, stripes inside a fish, or a shadow inside a round cheek.

Ukrainian pysanky eggs are traditionally decorated in bands: a line around the middle, then lines around the ends, then each band filled with its own motif. Try that with three clipped Pattern blocks, each moved to a different height.

11. Shape language: what shapes say

Before anyone sees a face, they read the outline. Animators and character designers rely on three basic shapes.

This is why heroes in cartoons are often built from circles, sturdy sidekicks from boxes, and villains from sharp triangles. Mixing them tells a story: a round character with one pointy detail (a spiky hairdo, a sharp tail) reads as “cute, with an edge”.

12. Why cute is cute

In 1943 the scientist Konrad Lorenz described the Kindchenschema (“baby schema”): the features that make babies, puppies and kittens look adorable to us. Designers have used it ever since.

The recipe is simple: a big round head, a small body, large eyes set low on the face, a tiny mouth, soft rounded edges and rosy cheeks. Both drawings below use exactly the same blocks.

This is also why Japanese kawaii characters feel so friendly. For your own creatures: start with a Circle, Blob or Ghost block, drop a Cute face a little below center, turn Eye size up, and keep the Rosy cheeks on.

13. Color: hue, value and saturation

Every color has three parts. Hue is its name on the color wheel (red, blue, teal). Value is how light or dark it is. Saturation is how vivid or gray it is.

Value does most of the work. If a picture looks muddy, it is almost always because the colors are too close in lightness, not because the hues are wrong. A quick check: squint at your picture. The main subject should stand out as a clearly lighter or darker shape.

Color harmonies

Harmonies are dependable combinations picked by their positions on the color wheel:

In the studio, Shuffle colors swaps every color in your picture for one from a curated palette, and the palette row in the inspector lets you click to fill, Shift+click for a gradient’s second color, and Alt+click for the outline. Gradients and Glow fills add easy depth: use a lighter color where light hits and a deeper one in shadow.

Accessibility: about 1 in 12 men and 1 in 200 women have some color vision deficiency. Don’t rely on red versus green alone to separate things; a difference in value reads for everyone.

14. Composition: where things go

Composition is the arrangement of shapes in the frame. A few habits make almost any picture stronger.

15. Recipes

Each of these matches a starter picture in the studio. Follow the steps from a blank canvas, or open the finished version and click its parts to see the settings.

Butterfly

  1. Add a Wing. Move it to the right of center (arrow keys with Shift move 10 pixels at a time).
  2. Press M to mirror it. Set its Fill to Gradient and pick two colors.
  3. Add a Circle for a spot, place it on the upper wing, add Step and repeat (3 copies, shrinking), then Mirror.
  4. Add a tall, thin Circle in the center for the body, a round one for the head, and a Cute face on top.
  5. Add a Curve for one antenna and mirror it. Finish with scattered 4-point Stars behind everything.

Open the finished butterfly →

Cute ghost

  1. Set the canvas background to Glow with a deep purple and a near-black.
  2. Add a Ghost block. Fill: Glow, white to pale lavender. Adjust Waves and Wiggle for the hem.
  3. Add a Cute face slightly above the ghost’s middle. Try the Joyful expression.
  4. Add a Drop for one arm, turn it about 110°, and mirror it. Send it backward ([) so it sits behind the body.
  5. Add a Moon, then tiny 4-point Stars with Scatter.

Open the finished ghost →

Christmas tree

  1. Add a Triangle near the bottom. Add Step and repeat: 4 copies, move up about 90, resize 0.76.
  2. Add a brown Box for the trunk and send it behind the tree.
  3. Add a Wave line in yellow, give it the same Step settings as the tree, and set Clip inside to the tree. Instant garland.
  4. Add ornaments: a small Circle with Step (color shift 35) and Mirror.
  5. Top it with a Star and scatter white circles for snow.

Open the finished tree →

Snowflake

  1. Set a dark blue Glow background.
  2. Add a Snowflake arm at the canvas center. Add Spin around with 6 copies.
  3. Adjust Side branches, Branch angle and Sub-branch size. Every combination is a different crystal, just like real snow.
  4. Add a Polygon with 6 sides in the middle. For the background, add a tiny faded arm with Spin around (This block) and then Scatter.

Open the finished snowflake →

Easter egg

  1. Add an Egg and name it “Egg”.
  2. Add a Pattern block that is larger than the egg. Choose Zigzags, pick colors, then set Clip inside to Egg.
  3. Add a second Pattern (Polka dots), shrink it to a band across the top, and clip it to the egg as well.
  4. Duplicate the egg and its patterns (Ctrl+D) and move them for a basket of eggs, or try Shuffle colors for a new set.

Open the finished eggs →

More to open and study

The studio’s Start from a picture tab also has a flower, a sunny day, an autumn tree, a mandala, a pumpkin, a golden spiral, a heart pattern and a kitty. Open one and press . repeatedly to step through its blocks one by one.

16. Keyboard and accessibility

Everything in artful drawing works with a keyboard alone, a mouse alone, or both together. No drawing tablet and no steady hand required.

The interface uses the Atkinson Hyperlegible typeface, designed by the Braille Institute for low-vision readers, keeps visible focus outlines on every control, announces actions to screen readers, and respects your system’s reduced-motion setting.

17. Going further

Ready for more? The References page collects free museum collections, nature photography, pattern books, color tools and the books behind the algorithms on this page. If you write code, the project’s docs/ folder explains how to add your own blocks and repeats.