Replies

yuanchuan, 23 days ago to random

Sometimes I'm struggled with the performance and inconsistent behaviour between browsers while using css-doodle. This often leads me to consider switching to other tools.

But I really like the syntax of css-doodle. So maybe I could reimplement it using another render layer other than CSS, like canvas?

yuanchuan, 23 days ago

@kristinHenry Right, the only problem is when I want to export and save the result, a headless browser is needed to take the screenshot programatically.

yuanchuan, 1 month ago to random

📝 Time-based CSS Animations
https://yuanchuan.dev/time-based-css-animations

yuanchuan, 1 month ago

@kizu That's a strange bug, fixed by wrapping with a calc()

counter-reset: t calc(var(--t));

simevidas, 5 months ago to random

CSS quiz: Style <div> to produce a staircase design

The only limitation is that you can’t use numerical digits in the CSS code.

Try it out here: https://jsbin.com/cuyuyik/edit?html,css,output

yuanchuan, 5 months ago

@simevidas
width: 97%

yuanchuan, 6 months ago to random

New cover image From: https://openai.com/blog/data-partnerships

Code: https://css-doodle.com/svg/?code=svg+%7B%0A++viewBox%3A+0+0+5+5+p+.3%3B%0A++style+background%3A+%23013131%3B%0A++defs+g%23rect+rect

yuanchuan, 6 months ago

Interesting

background pattern with circles
background patterns with squares
background patterns with circles in different sizes

yuanchuan, 6 months ago to CSS

#CSS #SVG

A bottle on the beach

yuanchuan, 6 months ago

@sarajw They are already originals :)

yuanchuan, 6 months ago

@sarajw Ah I see. It's hard to share them right now since the original size of the canvas is 2000x and bigger. I have to ship my tool along with them in order to preview in the browser :D

I will open source it one day.

yuanchuan, 8 months ago to random

New post: Fun with stroke-dasharray
https://yuanchuan.dev/fun-with-stroke-dasharray

yuanchuan, 8 months ago

@simevidas

Oh, thank you for the feedback, I'll think about it!

yuanchuan, 8 months ago

Just found another way to add colors.

https://css-doodle.com/svg/?code=svg+%7B%0A++viewBox%3A+-50+-50+100+100%3B%0A++style+background%3A+%2304195a%3B%0A++fill%3A+none%3B%0A++stroke-linecap%3A+round%3B%0A++stroke-width%3A+1.5%3B%0A++polyline

Use 4 polylines to generate dots in different colors
Use 2 polylines to generate dots in different colors

yuanchuan, 7 months ago

@schizanon https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg

yuanchuan, 9 months ago to random

Maintaining a tailwind website is painful.

yuanchuan, 9 months ago

@iamdtms My eyes hurt at those long class names

yuanchuan, 9 months ago to random

css-doodle 0.35.0

https://github.com/css-doodle/css-doodle/releases/tag/v0.35.0

SVG stroke animation

yuanchuan, 9 months ago

@iamdtms Thank you :)

yuanchuan, 9 months ago to random

https://css-doodle.com/svg/?code=svg+%7B%0A++viewBox%3A+0+0+20+20+p+.2%3B%0A++path+%7B%0A++++stroke%3A+%23000%3B++%0A++++stroke-linecap%3A+round%3B%0A++++stroke-linejoin%3A+round%3B%0A++++stroke-width%3A+.2%3B%0A++++fill%3A+none%3B%0A++++d%3A+M+0+0%0A+++++++++%40M20.pn%280+%40n+%40n+0%2C+%40n+0+0+%40n%29+%0A+++++++++%40M20.pn%28%40n+%40N+%40N+%40n%2C+%40N+%40n+%40n+%40N%29%0A++%7D%0A%7D

yuanchuan, 9 months ago

@simevidas

Ah maybe it was caused by the DNS server cache. I just transferred all my domains out of Google today.

yuanchuan, 9 months ago

@simevidas Fixed! Thank you :)