<css-doodle /> is based on Shadow DOM v1 and Custom Elements v1. You can use it on all major browsers right now without polyfills.
The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph.
The limit is the limit of CSS itself.
Download the latest version or include it directly from a CDN:
You can also use ES Modules in modern browsers:
If you're using a build tool, you can install it via npm and import it in JavaScript:
Start creating!
The syntax of css-doodle is based on CSS and provides several extra utility functions and shorthand properties.
The number of rows and columns in the grid is defined by the grid attribute on the element,
ranged from 1 to 64. It's default to be 1x1 when no value or 0 is given.
The row or column is limited up to 4096 only when the grid is 1-dimensional:
The n x m follows the order of (col, row) or (x, y).
The following formats of grid value are all recognizable:
grid = "0"grid = "5"grid = "20"grid = "5x7"grid = "5 x 7"grid = "5,7"
There's an alternative way to set up the grid by using the @grid property.
Import rules from CSS custom properties (CSS variables).
It's highly recommended to write the rules this way if you want to use css-doodle in production websites. So it won't break when the network is slow or when the browser does not support Web Component.
All random values will be regenerated to the same value as last time based on the seed value. It's quite useful if you want to keep a snapshot.
A random seed will be generated by default if you don't specify explictly, and
you can always get the generated value with JS API later.
The :doodle
is a special selector indicates to the component element itself.
Note that the styles would be over-written by your normal CSS files outside.
(try to hover on the doodle)
The :container
is the container element that holds all the cells, which is using Grid Layout.
You may want to set gap inside it.
It inherits all the grid properties from :doodle so that's why this also works:
Select the nth cell like :nth-child(n) does.
Select cells like :nth-child(even) but shorter.
Select cells like :nth-child(odd).
Select cell at specific column and row.
Select cells randomly. The ratio accepts value between 0 and 1. Defaults to 0.5.
The selector can be applied multiple times.
Select the nth row of the grid.
The odd and even is supported.
Select the nth column of the grid.
You can use odd and even too.
Target the cells based on general Math expressions.
The variable
i, I,
x, X,
y and Y can be used without prefix @ symbol for calculation.
For convenience the symbols ≤ and ≥
have the meanings of <= and >= respectively.
The equal sign can be both = and ==.
A more complex example.
This is another way to define the grid value and it has higher priority.
Set grid and doodle size at the same time:
The :doodle selector can be ommited if there's no other rules for it.
Like @use attribute but as part of the rule.
Set width and height in one place.
Place cells relative to the grid.
Turns the element into a shape which is generated with clip-path and polygon().
Returns the current index value of the cell.
The parentheses can be omitted if the function has no parameters.
Alias: @i
Returns the current row number of the cell.
Alias: @y
Returns the current column number of the cell.
Alias: @x
Returns the max row number of the grid.
Alias: @Y
Returns the max column number of the grid.
Alias: @X
Returns the total cells count of the grid.
These numbers can be used to generate dynamic values together with calc().
Alias: @I
Randomly pick a value from the given list.
(try to click on the doodle)
It supports range format like this: [0-9a-z]
Alias: @p
Pick a value from the given list one by one.
Alias: @pn
Pick a value like @pick-n(), but with distinct random order.
Alias: @pd
Returns a random value between two numbers.
(try to click the doodle)
Alias: @r
Returns the last value of @pick, @pick-n, @pick-d and @rand.
Alias: @lp and @lr, respectively.
Compose the given value multiple times.
(try to click the doodle)
Alias: @rep
Same as @repeat(), but seperated with commas.
Use capitalized @Multiple to make the values seperated with spaces.
The number closely after the function name will be regarded as the first parameter of the function, which will make the code more concise.
Alias: @m, @M
Used only inside @repeat and @m function to indicate the
current repeating count: @n,
current column count: @nx,
current row count: @ny
and the max count value: @N.
Make stripe with gradients.
The size for each step is optional.
See more about stripe function in css-doodle.
Use SVG directly as background image.
You can also write SVG with the syntax of CSS.
See https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg.
Apply SVG filters.
All Math functions and constants are available prefixed with '@'.
You can also use π directly.
Evaluate calculations.
Same as native var(). Used to prevent the browser from evaluating the value inside nested vars.
The example below won't work since the var(--bg) has no definition outside.
Use @var() instead.
Transform a number into hex format.
Generate url() image with css-doodle code.
Generate url() image with GLSL code. Currently only one uniform value is added: u_resolution.
The function accepts three parts. If there's no explict fragment part,
all the code will be treated as fragment shader like the example above.
Multiple texture are accepted if they prefix with texture and
the texture uniform names will be injected automatically.
Generate polygon() in string used by clip-path. For example, to make a hexagon:
If the points value is big enough it approximately to be a circle.
fill-rule nonzero | evenodd;
frame number for frame size;
points number between 3 - 3600;
rotate number in degree for rotation;
scale number for scale factor;
move a pair of value for translating x, y coords;
turn the angle between start/end point, defaults to be 1;
x x coordinate for cartesian equation;
y y coordinate for cartesian equation;
r polar equation;
Operations available:
+,
-,
*,
/,
%,
^.
All JavaScript Math functions and constants are supported.
Such as
sin,
cos,
tan,
abs,
pow,
PI or π etc.
See more examples here: https://css-doodle.com/shapes.
Generate two values in percent and seperated with space. The syntax is the same with @shape.
Getter/setter for the grid attribute on the element.
Getter/setter for the use attribute on the element.
Getter/setter for the seed attribute on the element.
Re-render the component (with given styles).
Export css-doodle element as an image.
Returns a Promise object which holds the information of the exported image.
scale: Integer Scale factor of the exported image. Default 1.
detail: Boolean Returns detailed information of the image, eg. blob size. Default false.
download: Boolean Download the image or not. Default false.
name: String Saved name for download. Defaults to be the current timestamp.