🎨 A web component for drawing patterns with CSS.
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.
Last release of 2023
umd
to iife
.@x
, @y
selectors.@keyframes
step names.@cycle()
grouping.@nth
.@once
.@canvas()
because I barely used it.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 */
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."
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.
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%)
)
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);
@pn
index and its behavior inside @m
function.@Svg
function detection in the parser.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;
}
);
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: '");';