Lmst

@karlcow It seems the issue is still there. I don’t have an iPhone to check the latest Safari on mobile, but on desktop Safari it still fails to recognize data-URI SVG filters in CSS.

As shown in the screenshot , Chrome renders the noisy effect (right), while Safari does not (left).

https://bugs.webkit.org/show_bug.cgi?id=104169

Screenshot comparison between Safari (left) and Chrome (right)

yuanchuan boosted:

In which @yuanchuan reconstructs the generative images that (used to) accompany OpenAI's blog posts:

https://yuanchuan.dev/daily-sketch-4

Amazing stuff.

My favorite reconstructions are 3 and 15 - which how much can with so little

@jack hope I’ve got this right.

svg {
viewBox: -100 -100 200 200;
path {
fill: none;
stroke: black;
stroke-linejoin: round;
d: m 50 -50 @M90.p.Plot(
points: 2;
r: 10;
rotate: $(@ri5 * 60)
)
}
}

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

#cssdoodle

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

#cssdoodle

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

#cssdoodle

#css text-stroke

Ubuntu logo https://css-doodle.com/svg/?name=ubuntu+logo

I just realized my feed.xml was misconfigured, causing RSS readers to think every build was a new update and bring old posts back into the feed...

@AmeliaBR https://yuanchuan.dev/remove-black-color-with-shaders

@AmeliaBR

Ah I can remove the black background color with shaders! It can be transparent!

SVG polygons

@fasnix You can think of @ content as ::after { content: "text" } in CSS, and @ match as a kind of switch–case statement.

That part outputs fizz buzz according to current index value.

For FizzBuzz:
https://en.wikipedia.org/wiki/Fizz_buzz

@fasnix Hope it helps!

/* Creates a 10x10 grid (100 cells total) and sets the container size to 90%. */
/* In this demo, the container is 400px, so the grid is 360px in both width and height. */

@grid: 10 / 90%;

/* The default font-size is 1em (16px). */
/* I made it a little smaller so the long text (FizzBuzz) doesn't wrap. */

font-size: .6em;

/* @content adds text to the cell. @match returns specific text based on conditions. */
/* @i is the built-in 1-based index for grid cells (1, 2, ..., 100). */

@content: @match(
/* When @i % 15 == 0, return FizzBuzz */
@i % 15 = 0, FizzBuzz,
/* When @i % 3 == 0, return Fizz */
@i % 3 = 0, Fizz,
/* When @i % 5 == 0, return Buzz */
@i % 5 = 0, Buzz,
/* Otherwise, return @i itself */
@i
)

@kristinHenry chrome only :) https://codepen.io/yuanchuan/pen/MYyRwBB

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

#cssdoodle

Another version, both supported:

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

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
);

@leaverou I’d lean toward Option A — it’s more consistent with other multi-value properties. But for border, it’s not immediately clear whether layers stack inward or outward.

Extending outline is simpler since it already supports outline-offset.

Client Info