Create

JS API

shape(code)

A polygon() value, or a shape() when round curves the corners, from the same code as @shape, as a string, without a doodle. It comes from css-doodle/generator, with the other generator exports.

Syntax

  • import { shape } from 'css-doodle/generator'
  • shape('<preset> [<k>]')
  • shape('<command>: <value>; ...')

The presets and commands are those of @shape. Several arguments are joined with commas, so shape('star', 6) is shape('star 6'). Between commands a comma starts a contour list instead, so write the commands in one string. Other @ functions such as @r do not run, so the same code always gives the same shape. text needs a browser to trace its letters, and draws nothing without one. A web font that has not loaded yet traces as the fallback font, so load it first, as with await document.fonts.load('1em Pacifico'). Without code, or with an unknown name, the result is a triangle.

Examples

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

shape('clover 4');
// 'polygon(100% 50%,…)'

shape('square; round: .5');
// 'shape(from …,curve to … with …,…,close)'

element.style.clipPath = shape(`
  points: 300;
  r: cos(5t);
`);

See also