🎨 A web component for drawing patterns with CSS.
MIT License
Bot releases are visible (Hide)
Use native mod
function for variables.
/* mod(@t, 360deg) */
transform: rotate(@t(%360deg));
Support calc chain.
@content: @i(*2, +10, *100);
Add @PN
and @PD
for outside bouding to @doodle
.
background: @m2.doodle(
@grid: @PN(2x1, 3x1);
);
Enable uniform value debugging through content
.
:after {
content: @ux;
}
Add grid border[:color]
for debugging purposes.
@grid: 1 / 100% border:red;
Add support viewbox padding
inside @svg-polygon
.
@content: @svg-polygon(
paddng: .2;
);
Add @xX
and @yY
similar to @iI
.
Remove the feature of adding vendor prefixes to properties.
Published by yuanchuan 10 months ago
Last release of 2023
umd
to iife
.@x
, @y
selectors.@keyframes
step names.@cycle()
grouping.@nth
.@once
.@canvas()
because I barely used it.Published by yuanchuan about 1 year ago
New $
function for reading and evaluating numeric variables.
--a: 2;
--b: $(a * 2);
--c: $b;
/* 30px */
--d: $px(10 + 20);
Variables can be put directly inside @svg()
now.
@content: @svg(
--size: 10;
viewBox: 0 0 $size $size;
);
Add repeatCount to draw
.
draw: 10s indefinite;
draw: 10s infinite; /* CSS way */
Published by yuanchuan about 1 year ago
Add @hover
selector.
@hover {
/* same as :hover */
}
@hover(-1, 1) {
/* previous and next */
}
@hover(0 -1, 0 1) {
/* top and bottom cells. Targeting by `dx dy` pairs */
}
Round the values generated by @shape
to a maximum of six decimal places."
Published by yuanchuan about 1 year ago
Support nested css-doodle element via @content: @doodle()
.
@grid: 2 / 400px;
@content: @doodle(
@grid: 2 / 100%;
background: @p(red, blue);
);
Add path animation with property draw
in normal SVG element.
https://css-doodle.com/svg/?name=drawing%20ring
@conent: @svg(
path {
/* .. */
draw: 5s;
}
);
Change property animate
to draw
inside @svg-polygon
.
Change default @svg-polygon
stroke color to currentColor
.
Fix sequence generator index.
Fix negative calculation in generator functions.
Published by yuanchuan about 1 year ago
New function @svg-polygon()
, similar to @shape()
but using SVG <polygon />
intead of clip-path. Now both the style of background and stroke can be set. Also an extra animate
property for animation.
background: @svg-polygon(
points: 360;
r: .8 + cos(5t)*.15;
fill: red;
stroke: yellow;
stroke-linecap: round;
stroke-width: .1;
/* animate */
animate: 2s;
);
Decode uri format for @content
property automatically. The @Svg()
function (Uppercase form) is no longer needed.
@content: @svg(
viewBox: 0 0 1 1;
);
Or using @raw()
for choosing format explicitly.
--svg: @raw.svg(
viewBox: 0 0 1 1;
);
@content: @p(--svg);
Support not
condition for selectors.
@match not (i < 10) {
}
Add support for translate command ~.
/* translateX */
@grid: 1 / 400px ~ 20px;
/* translateX and translateY */
@grid: 1 / 400px ~ 20px 30px;
Add support dimenstion for @doodle
element.
/* will generate an image with width of 1000px and height 2000px */
background: @doodle1000x2000(
);
Add svg.element() to svg generator.
import { svg } from 'css-doodle/generator';
let svgElement = svg.element(`
viewBox: 0 0 10 10;
`)
Add shortcut p
alias for viewBox padding
.
@content: @svg(
viewBox: 0 0 10 10 p 1;
)
Support unit calculation inside generator functions.
transition: @i(* 1s);
background-positon: @m10(
@n(* 1%) @n(* 2%)
)
Published by yuanchuan over 1 year ago
The css-doodle
element now by default restricts the visible area to its dimension,
which means it's overflow hidden. There are two ways to change this behavior:
Append the noclip keyword to the @grid
property:
@grid: 1 / 400px noclip;
Overide the contain
property:
:doodle {
@grid: 1 / 400px;
contain: none;
}
Extended @grid
to support doodle background color, after the second /
symbol.
@grid: 1 / 400px / #000;
Extended @grid
and @size
to support aspect-ratio if one of the width
and width
is auto
.
@grid: 1 / 400px auto 2;
@grid: 1 / 400px auto (4/3);
@size: 100px auto 1.5;
Extended @grid
to support rotate and scale to :container.
@grid: 1 / 400px + 2; /* + means scale */
@grid: 1 / 400px * 45deg; /* * means rotate */
@grid: 1 / 400px + 2 * 45deg;
Extended @grid
to change the layout to Flex
layout.
@grid: - 8x2 / 400px; /* - means using flex */
@grid: | 8x2 / 400px; /* | means using flex and vertical direction */
Added support for 0 index value in @m
function.
/* 0 1 2 3 4 */
@content: @M0-4.n
Added @gap
property.
@grid: 10 / 400px;
@gap: 1px;
Added @dx
and @dy
functions.
/* -2,-2 -1,-2 0,-2 1,-2 2,-2
-2,-1 -1,-1 0,-1 1,-1 2,-1
-2,0 -1,0 0,0 1,0 2,0
-2,1 -1,1 0,1 1,1 2,1
-2,2 -1,2 0,2 1,2 2,2 */
@grid: 5 / 400px;
@content: @dx, @dy;
Adjust offset.
/* -3,-3 -2,-3 -1,-3 0,-3 1,-3
-3,-2 -2,-2 -1,-2 0,-2 1,-2
-3,-1 -2,-1 -1,-1 0,-1 1,-1
-3,0 -2,0 -1,0 0,0 1,0
-3,1 -2,1 -1,1 0,1 1,1 */
@grid: 5 / 400px;
@content: @dx(1), @dy(1);
Published by yuanchuan over 1 year ago
@pn
index and its behavior inside @m
function.@Svg
function detection in the parser.Published by yuanchuan over 1 year ago
Added padding
value for SVG viewBox
property.
viewBox: -1 -1 2 2 padding 1;
/* equals to */
viewBox: -2 -2 4 4;
Added new @svg-pattern
function for reducing boilerplate code of SVG pattern.
background: @svg-pattern(
width, height: 10%;
viewBox: 0 0 10 10;
circle { }
);
Added new @Svg
function to return raw SVG code rather than encoded URI value.
@content: @Svg(
viewBox: -1 -1 2 2;
circle {
r: 1;
}
);
Published by yuanchuan almost 2 years ago
Add @unicode
function to insert Unicode characters and can be used both in HTML and CSS.
/* in HTML */
@content: @unicode(0x2500);
/* in CSS */
:after {
content: @unicode(0x2500);
}
A sequence of Unicode characters.
@content: @pn.unicode(0x2500, 0x257f, 0x2588);
Add @mirror/@Mirror
function to transform input items, similar to @cycle
and @reverse
.
/* 1, 2, 3, 4, 5, 5, 4, 3, 2, 1 */
@mirror(1, 2, 3, 4, 5);
/* 1, 2, 3, 4, 5, 4, 3, 2, 1 */
@Mirror(1, 2, 3, 4, 5);
All index functions, @i/I
, @x/X
, @y/Y
, and @n/N/nx/ny
accept extra arguments to do calculations.
@i5 === @calc(@i + 5)
@i(*10) === @calc(@i * 10)
@i(-10) === @calc(@i - 10)
@i(/10) === @calc(@i / 10)
@i(%10) === @calc(@i % 10)
@i(10/) === @calc(10 / @i)
@i(10-) === @calc(10 - @i)
An interesting pattern:
@calc(360/@I*@i) === @i(/@I(/360));
Reduce imports of the exported svg function.
Improve @cycle
to support comma-separated values.
Fix grid build for @content
.
Fix parsing quotes in content.
/* There used to be bugs */
content: '");';
Published by yuanchuan almost 2 years ago
Support variables in standalone SVG export function.
--color: red, blue;
svg {
circle {
fill: @p(--color);
}
}
The @
symbol can be ommited if the functions are being chained together.
@flip.invert.reverse.p
@round.r100;
Add @content
property for text content so that they can be selectable.
@content: hello;
Patch @reverse
function to support both SVG path commands and general arguments.
@pn.reverse(1, 2, 3, 4);
Add @pnr
function for picking values from right to left.
@pnr(1, 2, 3, 4);
Add @cycle()
function for cycling through input items.
/* Before */
inset: @pn(
10% auto auto 10%,
10% 10% auto auto,
auto 10% 10% auto,
auto auto 10% 10%,
);
/* After */
inset: @pn.cycle(
10% auto auto 10%
);
@place
transformation.@pn
and @position
as aliases.background-size
value for pattern
, canvas
, and shader
.Published by yuanchuan about 2 years ago
@m
function.
::after {
/* 5 4 3 2 1 */
content: @M5-1.@n;
}
Published by yuanchuan about 2 years ago
Add exports.
import CSSDoodle from 'css-doodle';
import { svg, shape } from 'css-doodle/generator';
import { tokenizer } from 'css-doodle/parser';
document.body.appendChild(CSSDoodle`
@grid: 10 / 200px;
background: @p(red, blue);
margin: 1px;
`);
let code = svg(`
viewBox: 0 0 10 10;
circle {
cx, cy, r: 5;
}
`);
let polygon = shape(`
points: 200;
r: sin(t);
`);
let tokens = tokenizer.scan(`
color: red
`);
Published by yuanchuan about 2 years ago
Add Emmet-like syntax for generating SVG element.
line*10 {
}
Which equals to:
@M10(line {
})
Published by yuanchuan over 2 years ago
seed
value directly in the rules (#96)
<css-doodle>
@seed: 2022;
@grid: 10 / 400px;
background: @p(red, blue);
</css-doodle>
@svg-filter
and @rn
(#95)
/* It's hard to remember the order */
filter: @svg-filter(.2, 2, 10, 2);
/* Now each argument has a name, so that the order doesn't master */
filter: @svg-filter(frequency=.2, scale=2, octave=10, seed=2);
filter: @svg-filter(seed=2, frequency=.2, scale=2, octave=10);
/* And It's optional */
filter: @svg-filter(.2, 100, seed=2020);
title
and desc
element in SVG (#92)64x64
. It can be up to 256x256
only when the experimental
attribute is provided (#91)
<css-doodle experimental>
@grid: 256 / 600px;
</css-doodle>
Published by yuanchuan over 2 years ago
pattern
function caused by missing CSS vars (#84)Add t
variable to represent u_time
for pattern
function (#85)
Add vec2 u_seed
to shader (#80) by @akira-cn
Simplify calc in random
selector (#83)
@random(1-y/Y-x/X/3) {
background: #fff;
}
Group SVG elements with identical id (#82)
g#id {
circle {}
}
g#id {
rect {}
}
Which will expose:
<g id="id">
<circle />
<rect />
</g>
Published by yuanchuan over 2 years ago
pause/resume
to Shader and CSS animations. (#78)update
or disconnected
. (#76)Published by yuanchuan over 2 years ago
u_time
uniform to @shaders
. Now it supports animation in shaders. (#70)shadertoy
. (#73)256x256
. (#73)@offset
to @position
.r
property caused by wrong unit detection. (#72)href
property.textPath
as the text element.Expose
.Huge thanks to @akira-cn for helping to add these new features!
Published by yuanchuan over 2 years ago
Added support for reading CSS variables directly inside functions.
--color: red, blue;
background: @p(--color);
The @p
function with no arguments will use the arguments from last @p
function.
background: @p(red, blue);
color: @p;
Added @P
(uppercase) function for picking a different value from last one.
100%
for doodle background.Math.ceil
for sequence generators.Published by yuanchuan over 2 years ago
Added uniform variables ux
and uy
for mouse positions, uw
and uh
for container resolution.
Added support for tspan
and multiple text nodes.
Added support for style tags and inline styles.
/* inline styles */
background: @svg(
style border: 1px solid red;
);
/* style tag */
background: @svg(
circle {}
style {
circle { fill: red }
}
);
Added support for attribute expanding.
circle {
cx, cy: 4 5;
}
Added support for inline SVG filters or gradients.
background: @svg(
viewBox: -5 -5 10 10;
circle {
r: 4;
fill: linearGradient {}
}
)
i
to the the default shape context.cross
option for even/odd
selector because it's now handled by default.r
small enough when it equals to 0.