# doodled.dev

> Draw with plain SVG shapes; the site adds the hand-drawn look. The drawing travels inside the
> URL, so the link is the file. No encoding, no API key, nothing to install. Everything you need
> is in this file.

To draw something and hand back a link:

1. Write plain SVG shapes. No `<svg>` wrapper. The canvas is 900 x 620.
2. Percent-encode these eight characters, `%` first:

   | char | write |   | char | write |
   |---|---|---|---|---|
   | `%` | `%25` |  | `#` | `%23` |
   | space | `%20` |  | `(` | `%28` |
   | `<` | `%3C` |  | `)` | `%29` |
   | `>` | `%3E` |  | `"` | `%22` |

3. Return `https://doodled.dev/canvas#` followed by the encoded markup.

Nothing else needs encoding. Do not base64 it, do not call an API.

Step 2 exists because a URL containing a raw `<`, `"` or space gets truncated when someone
pastes it into Slack, Mail or a chat client, and a raw `(` breaks a markdown `[link](url)`.
Give the finished URL on its own line or in a code block rather than as a markdown link.

Example. `<ellipse cx="450" cy="300" rx="78" ry="88"/>` becomes:

```
https://doodled.dev/canvas#%3Cellipse%20cx=%22450%22%20cy=%22300%22%20rx=%2278%22%20ry=%2288%22/%3E
```

Put shared attributes on one wrapping `<g>` rather than repeating them on every shape. It is
shorter to write and it keeps the link small. Keep the whole URL under about 2000 characters:
Messages drops one near 5000, and Slack, Mail and QR codes cut lower.

Do not make the shapes look shaky. A filter does that, and hand-wobbled coordinates fight it.
An `<ellipse>` for a head is correct.

To make it read as drawn rather than generated:

- Give paired features different sizes. Two eyes, two windows, two wheels, each with its own
  radius and offset. This matters more than everything else here combined.
- Pick one wrong proportion and commit to it. Correct proportions look traced.
- Leave empty space. Features crowded into the middle read as a smiley.
- Use solid `fill="#1b1917"` paths for mass such as hair. No hatching.
- Default stroke: `fill="none" stroke="#1b1917" stroke-width="3.4"`, round caps and joins.
- A face is 8 to 12 shapes. More is usually worse.

Allowed elements: `g path rect circle ellipse line polyline polygon text tspan use title`

Allowed attributes: `d x y x1 y1 x2 y2 cx cy r rx ry width height points transform fill stroke
stroke-width stroke-linecap stroke-linejoin stroke-dasharray stroke-opacity fill-opacity opacity
font-size font-family font-weight text-anchor href id`

Anything else is dropped. `href` must be a local `#id`. No script, no external references.

A link is a still drawing. The canvas drops `<style>`, `<script>` and `<animate>`, so nothing
animated travels as a link. A drawing that draws itself, stroke by stroke, is a standalone page:
<https://doodled.dev/examples/self-attention.html> is one, <https://doodled.dev/examples/neuron.html>
and <https://doodled.dev/examples/seasons.html> two more, and their source is the technique.

Shorter links, if you have the tools for it and only then: base64url the markup and use
`#s1.<payload>`, or raw-deflate then base64url and use `#d1.<payload>`, which is about 2.5 times
smaller. Base64url is `+` to `-`, `/` to `_`, `=` stripped. Both are optional; the page rewrites
whatever you send into the compact form on arrival.

## Docs

- [The technique](https://doodled.dev/index.md): what the filter does and what each part costs
- [The canvas](https://doodled.dev/canvas): the editor a link opens into