css-doodle

Create

Your first pattern

Getting started

Make your first generative pattern with css-doodle. Start in the browser without a build step, then learn the few lines that make it work.

Create an HTML page Try it in the playground

Make your first doodle

Create a file named index.html, paste in the following code, and open the file in a browser. The module script registers the <css-doodle> custom element; everything inside that element describes the grid below. 

<!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>
Open in playground

How it works

A doodle is a grid of HTML elements. Its code looks like CSS, with a small set of extra rules and functions for working with that grid. These three lines are the whole pattern:

  1. Grid

    @grid: 7 / 60vmin / #333;

    Creates a 7 × 7 grid, sets its size to 60vmin, and paints the canvas behind the cells.

  2. Shape

    border-radius: @pn(100% 0, 0 100%);

    Alternates the corner radii between two values so neighboring cells point in opposite directions.

  3. Fill

    background: #fff;

    Applies a white background to every cell, just as it would in regular CSS.

The resulting pattern

Install with a package manager

If your project uses a bundler such as Vite, install css-doodle from npm instead of loading it from a CDN:

Install

npm install css-doodle

Import

import 'css-doodle';

The import registers the custom element. You can then use <css-doodle> anywhere in your HTML:

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

You can also download a browser build from the latest GitHub release.

Frameworks and editors

React and JSX

JSX tries to interpret braces as JavaScript. Put the doodle code inside a template literal to pass it to the custom 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 may try to parse 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>

For CSS syntax highlighting in an editor or on CodePen, you can use a <style> element instead. If neither wrapper works with your tooling, pass the code through 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 can render a doodle without a browser page: 

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