css-doodle.com valid

css-doodle

css-doodle is a web component for visual art and creative coding with CSS. Rules written inside a `<css-doodle>` element are applied to every cell of a grid, and functions such as `@i`, `@r` and `@p` give each cell its own value.

For agents: css-doodle web component for generative visual art and creative coding with CSS; guides, syntax reference, CLI and an MCP server for AI assistants.

css-doodleweb componentcss artcreative codinggenerative art

Their llms.txt

The beginning of the file, from our validated copy saved 2026-10-21T06:22:31.540Z. Cached copy · Source on css-doodle.com

# css-doodle

> css-doodle is a web component for visual art and creative coding with CSS. Rules written inside a `<css-doodle>` element are applied to every cell of a grid, and functions such as `@i`, `@r` and `@p` give each cell its own value.

Load it from a CDN, or install it with `npm install css-doodle` and `import 'css-doodle'`:

```html
<script type="module" src="https://esm.sh/css-doodle"></script>

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

Notes:

- `@grid` takes the cell count (`5` or `10x8`, columns x rows), then optionally a size and a background after `/`, e.g. `@grid: 5x5 / 60vmin / #96c`.
- Functions are evaluated once per cell; all other declarations are regular CSS.
- A doodle clips its cells by default, so `overflow: hidden` is not needed; `@grid: 5 noclip` lets them overflow.

## Guides

- [Getting started](https://css-doodle.com/getting-started): Install css-doodle and write your first doodle.
- [Start from a grid](https://css-doodle.com/start-from-grid): A short walk from one grid to a finished piece.
- [Avatars](https://css-doodle.com/avatars): One picture per name, drawn from the seed.
- [Syntax overview](https://css-doodle.com/syntax-overview): The language map: statements, functions, selectors and expressions.
- [CLI tool](https://css-doodle.com/cli): Preview, render and export doodles from the terminal.
- [MCP server](https://css-doodle.com/mcp-server): Let an AI assistant read these docs and check its code.
- [Resources](https://css-doodle.com/resources): Articles, tutorials and talks, plus the tools around css-doodle.

## Attributes

HTML attributes on the <css-doodle> element.

- [grid](https://css-doodle.com/reference/attribute-grid): Number of columns and rows, and an optional depth.
- [seed](https://css-doodle.com/reference/attribute-seed): Starting value for random functions such as @r and @p. Same seed, same image.
- [use](https://css-doodle.com/reference/attribute-use): Load rules from CSS custom properties, or pass the code as the attribute value.
- [click:update](https://css-doodle.com/reference/attribute-click-update): Re-render the doodle when it is clicked, with a new random seed.
- [auto:update](https://css-doodle.com/reference/attribute-auto-update): Re-render the doodle on an interval.
- [experimental](https://css-doodle.com/reference/attribute-experimental): Raise the grid limit from 64 to 256 per axis.
- [ignore-reduced-motion](https://css-doodle.com/reference/attribute-ignore-reduced-motion): Keep animating when the user prefers reduced motion.

## Selectors

Target the component, the grid container, or a subset of cells.

- [:doodle](https://css-doodle.com/reference/selector-doodle): The component element itself.
- [:container](https://css-doodle.com/reference/selector-container): The grid element that holds the cells.
- [@nth](https://css-doodle.com/reference/selector-nth): Cells by index, like :nth-child.
- [@at](https://c
…

Related sites

Other listed sites in Developer tools. See the whole category →

Machine-readable: GET /v1/resolve?q=css-doodle.com · GET /v1/domain/css-doodle.com · this page as Accept: application/json or text/markdown · MCP lookup_domain

Automatically discovered from public files. Inclusion does not imply endorsement or publisher participation.

Claim my listing on Agent Web Map for css-doodle.com:
1. POST https://agentwebmap.com/v1/sites/css-doodle.com/claims and keep claim_id and claim_secret private.
2. Publish the proof: add the line "AgentWebMap ownership: <token>" (token from step 1) to https://css-doodle.com/llms.txt, or use the DNS, meta-tag or well-known method the response describes.
3. POST https://agentwebmap.com/v1/sites/css-doodle.com/verify with {"claim_id": "...", "claim_secret": "..."}.
4. Save the api_key from the answer; it manages the listing (PATCH https://agentwebmap.com/v1/sites/css-doodle.com).
MCP equivalent: tools begin_ownership_claim, then verify_domain, at https://agentwebmap.com/mcp. Docs: https://agentwebmap.com/docs#verify

Corrections or removal requests: contact the directory.