`image(code[, options])`

Render a doodle to one SVG image, in Node or any JavaScript runtime. It works as an <img>, a CSS background or a file, and CSS animations keep playing in it. Returns a promise. It comes from css-doodle/generator, with the other generator exports.

Syntax

import { image } from 'css-doodle/generator'
await image(code[, { seed, width, height }])

code: The doodle source, the same text you would put inside <css-doodle>.
seed: The seed. Without one, a seed derived from the code, so every build renders the same picture.
width, height: The size in pixels, as a number or a px length. Without them the image has no size of its own and takes the size it is drawn at.

The result is { svg, seed, needs, warnings }. needs has 'shader' when @shaders, @pattern and @scene images were left out; warnings are the diagnostics of the render.

Example

import { writeFile } from 'node:fs/promises';
import { image } from 'css-doodle/generator';

const { svg } = await image(`
  @grid: 12x4 / 600px 200px;
  @size: 60%;
  margin: auto;
  background: #000;
  animation: spin 2s ease-in-out infinite;
  animation-delay: @i(*.08s);
  @keyframes spin {
    50% { rotate: 90deg; scale: .5; }
    to  { rotate: 90deg; }
  }
`, { width: 600, height: 200 });

await writeFile('banner.svg', svg);

See also