🎨 A web component for drawing patterns with CSS.
MIT License
Bot releases are visible (Hide)
Published by yuanchuan almost 3 years ago
@min-size
, @max-size
, @path()
, @nrand()
, and @reflect()
since I never used them.place-cell
to offset
in favor of a shorter name.Added Perlin noise function @rn()
and @noise()
.
/* The @rn() function is combined with noise and mapping at the same time */
scale: @rn(0, 1);
rotate: @rn(360deg);
/* while the @noise() function is the raw noise function */
rotate: calc(@noise(x/X, y/Y) * 360deg);
Added support for direction
inside @plot()
function. Each element will rotate towards the curve direction or with custom angles.
@offset: @plot(
/* the syntax is similar to offset-rotate */
direction: auto 90deg;
);
Added support for unit
inside @plot()
function. Now the box-shadow
value can be plotted.
box-shadow: @m10(
@plot(r: 10, unit: em) 0 0 #000
);
Or simply put the unit at the end of r
.
box-shadow: @m10(
@plot(r: 10em) 0 0 #000
);
Published by yuanchuan almost 3 years ago
Added @pattern
function for pixel patterns drawing.
background: @pattern(
grid: 72;
match((int(x+y)%2) == 0) {
fill: #000;
}
)
Published by yuanchuan almost 3 years ago
Now use WebGL2 and GLSL3.0 for shader programs.
Added @paint
function for quick CSS painting API experiment.
background: @paint(
paint(ctx, {width, height}) {
let x = width / 2;
let y = height / 2;
let r = Math.min(x, y);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
}
);
If the inner paint
function is missing it will try to autocomplete the code.
background: @paint(
let x = width / 2;
let y = height / 2;
let r = Math.min(x, y);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
);
Published by yuanchuan almost 3 years ago
update()
.Math.random
inside match()
.Published by yuanchuan almost 3 years ago
plot()
for point()
.Published by yuanchuan almost 3 years ago
scale
in two directions.frame
value.vertices
alias for points
.scale
value to be 0.frame
calculation logic.Published by yuanchuan almost 3 years ago
frame
width based on turn
value.Published by yuanchuan almost 3 years ago
&
operator computation.I
into @match
.Published by yuanchuan almost 3 years ago
&&
, ||
, |
, &
, ∧
, ∨
.Published by yuanchuan almost 3 years ago
Add the general @match
selector.
/* match the first 5 elements */
@match( i <= 5 ) {
background: red;
}
/* other math calculations */
/* see https://twitter.com/yuanchuan23/status/1451564386192031748 */
@match( gcd(x, y) ≠ 1 ) {
background: red;
}
fill
for fill-rule
.Published by yuanchuan about 3 years ago
frame
calculation on graph transformations.Published by yuanchuan about 3 years ago
calc
.Published by yuanchuan about 3 years ago
Support left-handed negative commands or variables inside shape
function.
clip-path: @shape(
-x: cos(t) - .2
);
/* equals to */
clip-path: @shape(
x: -1 * (cos(t) - .2)
);
Add range
function within shape context so that it's easy to draw Math equations.
@grid: 11x1 / 200px;
@place-cell: @point(
x: range(-1, 1); /* -1, -.8, 0, ... , .8, 1 */
y: x^2;
);
origin
to move
.Published by yuanchuan about 3 years ago
svg
functionAdd support for nested selectors shorthand.
g circle {
}
/* equals to */
g {
circle {
}
}
Resolve id
property on selectors.
circle#my-circle {
}
/* equals to */
circle {
id: my-circle;
}
Handle special properties in SVG.
use {
xlink:href: #my-circle;
}
Fix for semicolons as value separators.
animate {
values: 50; 490; 350; 450;
keyTimes: 0; 0.5; 0.8; 1;
}
Published by yuanchuan over 3 years ago
@reverse
function for svg paths.Published by yuanchuan over 3 years ago
@canvas
function for generating background with JS.flip/invert
support for H
and V
commands.flipv
and fliph
aliases.offset
to point
for a better name.Published by yuanchuan over 3 years ago
@flip
and @revert
function for svg path.Published by yuanchuan over 3 years ago
@n-
modifiable with an extra argument.Published by yuanchuan over 3 years ago
turn
option for shape commands.Published by yuanchuan over 3 years ago
@svg-filter
.