`svg(code[, options])`

SVG markup from the same code as @svg, as a string, without a doodle. It runs in Node as well as in the browser. It comes from css-doodle/generator, with the other generator exports.

Syntax

import { svg } from 'css-doodle/generator'
svg(code[, { seed }])
svg.element(code[, { seed }])

code: The code you would put inside @svg().
seed: Fixes the values of random functions such as @r. Without it, every call picks new ones.

@ functions run as in a doodle of one cell, so @i, @x and @y are 1. Code that does not parse gives an empty <svg>.

svg.element() returns the same SVG as an element. It needs a browser, and returns undefined when the markup does not parse.

Examples

import { svg } from 'css-doodle/generator';

const code = `
  viewBox: 0 0 10 10;
  circle*5 {
    cx: @r(10);
    cy: @r(10);
    r: @r(1, 3);
    fill: @p(#e6437d, #ebbf4d);
  }
`;

svg(code, { seed: 7 });
// '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">…</svg>'

document.body.append(svg.element(code, { seed: 7 }));

See also