@yuanchuan@vis.social
@yuanchuan@vis.social avatar

yuanchuan

@yuanchuan@vis.social

Keep it simple, sweetie.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

yuanchuan, to random
@yuanchuan@vis.social avatar

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,
@yuanchuan@vis.social avatar

@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, to CSS
@yuanchuan@vis.social avatar

Chrome has a different behaviour from FF and Safari.

They used be the same. I'm not sure if the spec changes or Chrome has a bug in recent releases

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

Source code grid { display: grid; width: 600px; height: 200px; background: ; grid-template-columns: repeat(10, 1fr); } grid > div { border: 2px solid ; width: 50%; aspect-ratio: 1; }

yuanchuan, to random
@yuanchuan@vis.social avatar

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

yuanchuan,
@yuanchuan@vis.social avatar

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

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

yuanchuan, to CSS
@yuanchuan@vis.social avatar

#svg #css 3D rotation

Like a shining treasure spinning

yuanchuan, to random
@yuanchuan@vis.social avatar

font-size: 100cqmin

yuanchuan, to random
@yuanchuan@vis.social avatar

FIreworks
https://codepen.io/yuanchuan/pen/QWoWByr

CSS animation looks like fireworks

simevidas, to random
@simevidas@mastodon.social avatar

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,
@yuanchuan@vis.social avatar

@simevidas
width: 97%

yuanchuan, to random
@yuanchuan@vis.social avatar

R.I.P. Vera Molnár
https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r

yuanchuan, to random
@yuanchuan@vis.social avatar

Is there a better way in SVG to prevent ID collisions among multiple inline SVG elements (e.g. gradients), other than randomizing or adding prefixes to IDs?

yuanchuan, to random
@yuanchuan@vis.social avatar

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,
@yuanchuan@vis.social avatar

Interesting

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

yuanchuan, to CSS
@yuanchuan@vis.social avatar

#CSS #SVG

A bottle on the beach

yuanchuan,
@yuanchuan@vis.social avatar

@sarajw They are already originals :)

yuanchuan,
@yuanchuan@vis.social avatar

@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, to random
@yuanchuan@vis.social avatar

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

yuanchuan,
@yuanchuan@vis.social avatar

@simevidas

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

yuanchuan,
@yuanchuan@vis.social avatar

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,
@yuanchuan@vis.social avatar

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

yuanchuan, to random
@yuanchuan@vis.social avatar

📝 New Post

Simplifying CSS Variable Calculations
https://yuanchuan.dev/simplifying-css-variable-calculations

yuanchuan, to random
@yuanchuan@vis.social avatar

SVG animation

SVG animation

yuanchuan, to random
@yuanchuan@vis.social avatar

Maintaining a tailwind website is painful.

yuanchuan,
@yuanchuan@vis.social avatar

@iamdtms My eyes hurt at those long class names

yuanchuan, to random
@yuanchuan@vis.social avatar

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

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • provamag3
  • rosin
  • ngwrru68w68
  • Durango
  • DreamBathrooms
  • mdbf
  • magazineikmin
  • thenastyranch
  • Youngstown
  • khanakhh
  • slotface
  • everett
  • vwfavf
  • kavyap
  • megavids
  • osvaldo12
  • GTA5RPClips
  • ethstaker
  • tacticalgear
  • InstantRegret
  • cisconetworking
  • cubers
  • tester
  • anitta
  • modclub
  • Leos
  • normalnudes
  • JUstTest
  • All magazines
    •