Reference
Everything css-doodle adds on top of CSS. Anything not listed here is passed through to the browser as plain CSS.
On the element
Attributes written in HTML on the <css-doodle> tag.
Attributes
HTML attributes on the <css-doodle> element.
-
gridNumber of columns and rows, and an optional depth. -
seedStarting value for random functions such as @r and @p. Same seed, same image. -
useLoad rules from CSS custom properties, or pass the code as the attribute value. -
click:updateRe-render the doodle when it is clicked, with a new random seed. -
auto:updateRe-render the doodle on an interval. -
experimentalRaise the grid limit from 64 to 256 per axis.
In the doodle code
Written between the tags: the directives that set up the grid, the selectors that pick cells, and the functions that give each cell its value.
Properties
Directives that css-doodle handles instead of emitting as CSS.
-
@gridGrid dimensions plus size, fill, gap, scale, rotation and more. -
@sizeWidth and height in one declaration, with paper size presets. -
@placeTake a cell out of the grid and position its center at a point. -
@gapGap between cells, optionally with a rule drawn inside it. -
@contentPut text, SVG, a nested doodle or a shader canvas inside a cell. -
@shapeClip the cell to a preset shape. -
@seedSet the random seed from inside the code. -
@useInsert rules stored in CSS custom properties.
Selectors
Target the component, the grid container, or a subset of cells.
-
:doodleThe component element itself. -
:containerThe grid element that holds the cells. -
@nthCells by index, like :nth-child. -
@atThe cell at a column and row. -
@rowCells in a row. -
@colCells in the given columns. @x is an alias. -
@evenCheckerboard: cells where column + row is odd. -
@oddCheckerboard: cells where column + row is even. -
@randomCells picked by probability or count. -
@matchCells where an expression is true. -
@cellOne selector for index, expression and random rules. -
Nesting & pseudo:hover, ::after, descendants and the & selector. -
At-rules@keyframes, @media, @font-face and friends.
Functions
Values computed per cell: position, sequences, randomness, SVG and more.
Cell
-
@i, @ICell index from 1, and the cell count. -
@x, @XColumn from 1, and the number of columns. -
@y, @YRow from 1, and the number of rows. -
@z, @ZDepth from 1, and the depth count. A third grid number nests cells inside cells. -
@iI, @IiIndex as a 0–1 ratio for linear interpolation, forward and backward. -
@xX, @XxColumn as a 0–1 ratio, forward and backward. -
@yY, @YyRow as a 0–1 ratio, forward and backward. -
@dx, @dy, @dr …Offsets, distances and angle from the grid center. -
@idThe id of the cell element; a class of the same name on a depth tree.
Sequence
Random
-
@r, @riRandom number in a range; @ri keeps the integer part. -
@RSmooth 2D noise that varies across the grid. @rn is an alias. -
@p, @PPick one value at random; @P never repeats the last pick at that call. -
@pn, @pnrPick values in order, or backwards. -
@pdPick values in a shuffled order, each once per round. -
@PN, @PNR, @PDLike @pn, @pnr and @pd, but they follow the enclosing sequence step. -
@lp, @lrReuse the last picked or last random value.
Values
-
@cycleAll rotations of a list, for use with a pick function. -
@mirror, @MirrorA list followed by its reverse. -
@reverseA list, or an SVG path, backwards. -
@stripeHard-edged gradient stops from a list of colors. -
@onceEvaluate once and share the value across cells. -
@matchChoose a value by condition. -
$ (calc)Evaluate an arithmetic expression with variables. -
@varA var() that css-doodle leaves alone. -
@rawText that css-doodle passes through untouched. -
@codeCharacters from UTF-16 code units. -
@hexA number in hexadecimal. -
@<Math>Every JavaScript Math function and constant, plus π. -
@google-fontLoad a Google font by name.
SVG
-
@svgCreates an SVG image from XML or a CSS-like syntax. -
@svg-filterAn SVG filter for filter and backdrop-filter. -
@svg-polygonAn SVG image of a polygon drawn from shape commands. -
@svg-patternA tiled SVG pattern. -
@linearGradient, @radialGradientSVG linear and radial gradients for fill or stroke inside @svg. -
@arcThe path data of an arc, for a path d. -
@invertSwap the axes of an SVG path. -
@flip, @flipH, @flipVMirror an SVG path.
Shapes
Nested
From JavaScript
Reach a doodle that is already on the page, and listen to what it reports.
JS APIs
Methods and properties on the element, and the package exports.
-
update()Re-render, optionally with new code. -
export()Export the doodle as SVG or PNG. -
pause(), resume()Pause and resume the animations. -
autoUpdate()Start or stop periodic re-rendering. -
gridRead the grid dimensions, or set the grid attribute. -
seedRead the seed in use, or set the seed attribute. -
useRead or set the use attribute. -
diagnosticsWarnings from the last render. -
Package exportscss-doodle/component, /generator, /parser and /meta.
Events
Custom events dispatched on the element.
No results found
Try a different search term