The SVG <path> syntax is a beast. There are all sorts of commands that make up a mini-language all of its own — so powerful that it’s capable of drawing anything. Don’t be too scared of it, though, because some of the commands are very straightforward to understand. They read like “put pen here, draw 2 over, draw 3 down, draw 1 up, done.” Yuan Chuan starts there and demonstrates:
If you take that design and, as the title of the article suggests, flip, invert, and reverse it, you can build some really neat patterns.
That syntax you see is part of CSS Doodle and you can see the result here:
If that type of aesthetic appeals to you, it might be because you used to doodle this way as a kid, like Clive Thompson.
When I was in grade school, I used to have a very particular style of doodling.
I’d draw a pattern that was governed by five rules, rather like the ones governing an Etch-A-Sketch. They were:
1. You draw one single line. It can be as long as you like.
2. To start the line, you put your pen down.
3. You can make right-angle turns only, either 90 degrees or -90 degrees.
4. You cannot back up. You must always move forward.
5. You don’t lift your pen until you’re ready to stop. When you lift the pen, the doodle is done.
He made a Right-Angle Doodling Machine because, of course, as adults we can’t just be nostalgic — we have to throw technology and time at it to try to re-summon whatever made the thing feel special originally. But it’s never quite the same:
Does doodling with an app tickle our brains in the same way?
I don’t think so. When I mess around with this right-angle drawing-machine, my brain doesn’t feel quite as activated, nor as rested, as when I make the same drawings by hand.
