Selectors
:doodle
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)
:container
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:
@nth(n, ...)
Select the nth cell like :nth-child(n) does.
@even
Select cells like :nth-child(even) but shorter.
@odd
Select cells like :nth-child(odd).
@at(col, row)
Select cell at specific column and row.
@random([ ratio ])
Select cells randomly. The ratio accepts value between 0 and 1. Defaults to 0.5.
The selector can be applied multiple times.
@row(n, ...)
Select the nth row of the grid.
The odd and even is supported.
@col(n, ...)
Select the nth column of the grid.
You can use odd and even too.
@match(expression)
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.
Functions
@index
Returns the current index value of the cell.
The parentheses can be omitted if the function has no parameters.
Alias: @i
@row
Returns the current row number of the cell.
Alias: @y
@col
Returns the current column number of the cell.
Alias: @x
@size-row
Returns the max row number of the grid.
Alias: @Y
@size-col
Returns the max column number of the grid.
Alias: @X
@size
Returns the total cells count of the grid.
These numbers can be used to generate dynamic values together with calc().
Alias: @I
@pick(v1, v2,...)
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-n(v1, v2,...)
Pick a value from the given list one by one.
Alias: @pn
@pick-d(v1, v2,...)
Pick a value like @pick-n(), but with distinct random order.
Alias: @pd
@rand(start [,end])
Returns a random value between two numbers.
(try to click the doodle)
Alias: @r
@last-pick, @last-rand
Returns the last value of @pick, @pick-n, @pick-d and @rand.
Alias: @lp and @lr, respectively.
@repeat(times, value)
Compose the given value multiple times.
(try to click the doodle)
Alias: @rep
@multiple(times, value)
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
@n, @nx, @ny, @N
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.
@stripe(color [size], ...)
Make stripe with gradients.
The size for each step is optional.
See more about stripe function in css-doodle.
@svg(svg)
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.
@svg-filter(filter)
Apply SVG filters.
@<Math>
All Math functions and constants are available prefixed with '@'.
You can also use π directly.
@calc(expr)
Evaluate calculations.
@var(expr)
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.
@hex(num)
Transform a number into hex format.
@doodle(code)
Generate url() image with css-doodle code.
@shaders(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.
@shape(commands)
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.
All commands
fill-rulenonzero | evenodd;framenumber for frame size;pointsnumber between 3 - 3600;rotatenumber in degree for rotation;scalenumber for scale factor;movea pair of value for translatingx, ycoords;turnthe angle between start/end point, defaults to be 1;xx coordinate for cartesian equation;yy coordinate for cartesian equation;rpolar equation;
Operations in equations
-
Operations available:
+,-,*,/,%,^. -
All JavaScript Math functions and constants are supported. Such as
sin,cos,tan,abs,pow,PIorπetc.
See more examples here: https://css-doodle.com/shapes.
@plot(commands)
Generate two values in percent and seperated with space. The syntax is the same with @shape.