Lmst

#cssdoodle

2026 马年 (Year of the Horse) logo
https://css-doodle.com/svg/?code=svg+%7B%0A++viewBox%3A+0+0+42+25+p+4%3B%0A++style+background%3A+%2375211f%3B%0A++path+%7B%0A++++fill%3A+none%3B%0A++++stroke%3A+%40linearGradient%2845%2C+%23daca8a+30%25%2C+%23fbfbc0+80%25%29%3B%0A++++stroke-width%3A+1.15%3B%0A++++stroke-linecap%3A+square%3B%0A++++d%3A+%40M0-3%28%0A++++++M+%40n%28*8%2C+5%29+%40n%28*4%2C+15-%29+%0A++++++v2+h-2+v-4+h4+v6+h-6+v4+h2+v-2+h8+v3+h2+v-5+h4%0A++++%29%0A++%7D%0A%7D

svg {
viewBox: 0 0 42 25 p 4;
style background: #75211f;
path {
fill: none;
stroke: @linearGradient(45, #daca8a 30%, #fbfbc0 80%);
stroke-width: 1.15;
stroke-linecap: square;
d: @M0-3(
M @n(*8, 5) @n(*4, 15-)
v2 h-2 v-4 h4 v6 h-6 v4 h2 v-2 h8 v3 h2 v-5 h4
)
}
}

https://css-doodle.com/svg/?name=gradient

svg {
viewBox: -5 -5 10 10;
ellipse*100 {
fill: none;
rx, ry: 4 $(@nN(ease-out, *4));
transform: rotate(-@nN(ease-out, *240));
stroke: @linearGradient(
#fff, #f9a828, #07617d, #2e383f
);
}
}

https://css-doodle.com/svg/?name=classic%20pattern

A classic geometric pattern

"Whirling" by @yuanchuan featured on CodePen

https://fosstodon.org/@codepen/115695933051841872

#cssdoodle #codepen #css

border animation
#cssdoodle

I've improved the performance of shaders in css-doodle , it now can use a separate canvas element via `@ content` instead of background-image.

https://codepen.io/yuanchuan/pen/qEZYKpv

Added a match function
#cssdoodle

FizzBuzz in css-doodle, sample code:

@grid: 10 / 90%;
font-size: .6em;

@content: @match(
@i % 15 = 0, FizzBuzz,
@i % 3 = 0, Fizz,
@i % 5 = 0, Buzz,
@i
);

CSS letters created with border-radius

$css-doodle code to generate the cover image: --s: @m3x5($(2^@ny(-1))); --x: @pn.m14($(@pr(--s) *6)); --a: ((#fff, #000)); --b: ((#000, #fff)); --c: @pn(@m12(@pn(--a, --b, --a)), --b, --a); :doodle { @grid: 1x14 / 480px auto (96/77); grid-template-rows: @M14(@pn(--s)fr); } background: @doodle( @grid: @p(--x)x1; background: @pn(--c); );$

Book cover of The Game Development Strategy Guide

I'm trying to find some old images to use as examples on the website. They look so good!

I can't even find the source code for some of them.

Some old artwork created with css-doodle

Love this curve

A butterfly curve

A logo I keep seeing but never learned the name of it

text-decoration-thickness

Mark number from 1 to 12 with text-decoration-thickness and wavy style

I prefer static images

1200 bluring circles

1200 bluring circles

1200 bluring circles

Rotating
https://codepen.io/yuanchuan/pen/jEOXdLJ

Fibonacci Sphere
https://codepen.io/yuanchuan/pen/dPyjjPy

#cssdoodle #GENUARY 01, 02

Vertical or horizontal lines only.

Layers upon layers upon layers.

😴 Servo Logo
https://css-doodle.com/svg/?code=svg+%7B%0A++viewBox%3A+-50+-50+100+100+p+12%3B%0A%0A++--r%3A+50%3B%0A++--x%3A+-2.4%3B%0A++--d%3A+.618r%3B%0A++--y%3A+1.618x%3B%0A++%0A++path*5+%7B%0A++++transform-origin%3A+%24x+%24y%3B%0A++++transform%3A+translate%28%24%28-1x%29+%24%28-1y%29%29+rotate%28%40n%28*72%29%29%3B%0A++++fill%3A+%40pn.Mirror%28%231292e8%2C%23009d9a%2C%2342be65%29%3B%0A++++d%3A+M+0+%24d+0+%24r%0A+++++++A+%24r+%24r+0+0+0+%24%28r*cos%28%CF%80%2F10%29%29+%24%28r*sin%28%CF%80%2F10%29%29%0A+++++++L+%24%28d*sin%28%CF%80%2F2.5%29%29+%24%28d*cos%28%CF%80%2F2.5%29%29%3B%0A++%7D%0A%7D

3D rotate #cssdoodle

Client Info

Server: https://mastodon.social

Version: 2025.07

Repository: https://github.com/cyevgeniy/lmst