Getting started

Make your first doodle

Create a file named index.html with the code below and open it in a browser. The script loads css-doodle and registers the <css-doodle> element. The code inside the element draws the pattern.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>My first css-doodle</title>
    <script type="module" src="https://esm.sh/css-doodle"></script>
  </head>
  <body>
    <css-doodle>
      @grid: 7 / 60vmin / #333;
      border-radius: @pn(100% 0, 0 100%);
      background: #fff;
    </css-doodle>
  </body>
</html>

How it works

A doodle is a grid of elements, one per cell. Its code is CSS for one cell, plus rules and functions that know which cell they are in. These three lines are the whole pattern:

Properties without @ are ordinary CSS. The ones with @ belong to css-doodle: the syntax overview explains how they fit together, and the reference lists every one.

Make it random

Change @pn to @p and each cell picks a value at random. @r(.5, 1) gives each cell a random number in that range, here its scale. Click the preview to draw it again with new picks.

@grid: 7 / 60vmin / #333;
border-radius: @p(100% 0, 0 100%);
background: #fff;
scale: @r(.5, 1);

Add the click:update attribute to your own doodle to get the same behavior. To keep a result, give it a seed: the same seed makes the same picks every time.

Add it to a project

The script in the first example loads the latest release. On a site you publish, pin the version so a new release cannot change your pages:

<script type="module" src="https://esm.sh/[email protected]"></script>

With a bundler

If your project uses a bundler such as Vite, install css-doodle from npm and import it once:

npm install css-doodle

import 'css-doodle';

The import registers the element, so <css-doodle> works in any HTML the page renders. To host the script yourself, copy css-doodle.min.js from the package; it loads with a plain <script> tag.

Frameworks and editors

React and JSX

JSX reads braces as JavaScript. Put the doodle code in a template literal so it reaches the element as text:

export function Pattern() {
  return (
    <css-doodle>{`
      @grid: 7 / 60vmin / #333;
      border-radius: @pn(100% 0, 0 100%);
      background: #fff;
    `}</css-doodle>
  );
}

If a tool parses the doodle as HTML

Some templates and bundlers try to read the doodle code as markup. Wrap it in a <template> element to keep it intact:

<css-doodle>
  <template>
    @grid: 7 / 60vmin / #333;
    border-radius: @pn(100% 0, 0 100%);
    background: #fff;
  </template>
</css-doodle>

A <style> element works the same way and gets CSS highlighting in editors and on CodePen. If neither wrapper suits your tooling, pass the code in the use attribute.

<css-doodle>
  <style>
    @grid: 7 / 60vmin / #333;
    border-radius: @pn(100% 0, 0 100%);
    background: #fff;
  </style>
</css-doodle>

<css-doodle use="
  @grid: 7 / 60vmin / #333;
  border-radius: @pn(100% 0, 0 100%);
  background: #fff;
"></css-doodle>

Render from the terminal

With Node.js installed, the css-doodle CLI renders a doodle to an image without a web page. This command saves a PNG in the current folder:

echo '@grid: 8 / 20em _1px; background: #e6437d' \
  | npx @css-doodle/cli render

To ship doodles in your own pages without loading css-doodle, prerender() turns them into HTML at build time.

Next steps

• Start from a grid: build a finished pattern in five steps.
• Syntax overview: statements, functions, selectors and expressions.
• Reference: every property, function, selector and JS method.
• Discover: doodles by other people, each one open to remix.