css-doodle — A web component for visual art & creative coding

css-doodle

A web component for
Visual Art & Creative Coding

Empowering CSS as an artistic language

:doodle { position: absolute; pointer-events: none; @grid: 1 / 24em ~ -50% -7em noclip; inset: 0; } background: radial-gradient(#ef8e4666, #fff0 61.8%); clip-path: @shape( fill: evenodd; points: 400; x: cos(5t)^2 * sin(t); y: sin(2t)^2 * cos(5t); );

Graphic patterns, visual backgrounds, handcrafted icons, and generative decorations

A CSS-like language

<css-doodle>

  @grid: 16x9 / 100% auto _1px;
  transition: @r(1s) ease;
  background:@p(
    #ff8830, #d1b8a0, #aeced2, #cbdcdf
  );
  clip-path: polygon(@p(
    '0 0, 100% 0, 100% 100%',
    '0 0, 100% 0, 0 100%',
    '0 0, 100% 100%, 0 100%',
    '100% 0, 100% 100%, 0 100%'
  ));

</css-doodle>

@grid: 16x9 / 100% auto _1px; background:@p( #ff8830, #d1b8a0, #aeced2, #cbdcdf ); clip-path: polygon(@p( '0 0, 100% 0, 100% 100%', '0 0, 100% 0, 0 100%', '0 0, 100% 100%, 0 100%', '100% 0, 100% 100%, 0 100%' )); transition: @r(1s) ease;

Browse examples

:doodle { @grid: 1 / 24em ~ -50% -7em noclip; position: absolute; pointer-events: none; inset: 0; } background: radial-gradient(#e91e634d, #fff0 61.8%); clip-path: @shape( points: 360; r: abs.sin.tan(sin(2.5t)*1.14); );

Write SVG with the same CSS-like syntax.

Nested, readable, no XML

<css-doodle>

  @grid: 16x9 / 100% auto;
  background: @svg(
    viewBox: -3 -3 6 6;
    fill: none;
    stroke-width: .25;
    stroke: #e91e63;
    g {
      transform: rotate($(90 * @p.m4.n));
      circle*4 {
        cx, cy: @pn.cycle(3 -3);
        r: @pn(2, 4, 4, 2)
      }
    }
  )

</css-doodle>

@grid: 16x9 / 100% auto; background: @svg( viewBox: -3 -3 6 6; fill: none; stroke-width: .25; stroke: #e91e63; g { transform: rotate($(90 * @p.m4.n)); circle*4 { cx, cy: @pn.cycle(3 -3); r: @pn(2, 4, 4, 2); } } );

SVG playground Learn more

:doodle { @grid: 1 / 24em ~ -50% -7em noclip; position: absolute; pointer-events: none; inset: 0; } background: radial-gradient(#89dc1266, #fff0 61.8%); clip-path: @shape( fill: evenodd; points: 300; scale: .5; rotate: 180; x: cos(6t) + cos(7t); y: sin(6t) + sin(7t); );

A tiny DSL that compiles to a shader.

No GLSL, runs on the GPU

<css-doodle>

  @grid: 1 / 100% auto (16/9);
  @content: @pattern(
    grid: 48x27;
    shape: circle;
    size: sin(3*log(dr) - 2t - da);
    fill: hsl(sin(dr/100 + 2t/100) .75 .65)
  );

</css-doodle>

@grid: 1 / 100% auto (16/9); @content: @pattern( grid: 48x27; shape: circle; size: sin(3*log(dr) - 2t - da); fill: hsl(sin(dr/100 + 2t/100) .75 .65); );

Learn more

:doodle { @grid: 1 / 24em ~ -50% -7em noclip; position: absolute; pointer-events: none; inset: 0; } background: radial-gradient(#7149d166, #fff0 61.8%); clip-path: @shape( points: 30; r: cos(4t) * sin(2t); );

A shape generator from equations.

clip-path: @shape()

<css-doodle>

  @grid: 1 / 100% auto (16/9) ß1px ;
  background: #07121f;
  clip-path: @shape(
    points: 2000;
    scale: .061 .06;
    -x: 1.81(11cos(.6t) + cos(55t) - 2.8);
    -y: 2.5(11sin(9.03t) - sin(77t)) + 17;
  );

</css-doodle>

@grid: 1 / 100% auto (16/9) border; background: #07121f; clip-path: @shape( points: 2000; scale: .061 .06; -x: 1.81(11cos(.6t) + cos(55t) - 2.8); -y: 2.5(11sin(9.03t) - sin(77t)) + 17; );

Shape playground Learn more

:doodle { @grid: 1 / 24em ~ -50% -7em noclip; position: absolute; pointer-events: none; inset: 0; } background: radial-gradient(#ffffff6e, #fff0 61.8%); clip-path: @shape( fill: evenodd; points: 200; scale: .6; rotate: 30; r: cos(3t)^2 + sin(3t) + .3; );

Render from the terminal.

cssd render

# generate image from css-doodle code
$ cssd render code.css

# make image larger
$ cssd render code.css -x 10

# generate image from codepen
$ cssd render codepen.io/yuanchuan/pen/MQEeJo

# custom selectors
$ cssd render index.html -s '.container'

Learn more

:doodle { @grid: 1 / 24em ~ -50% -7em noclip; position: absolute; pointer-events: none; inset: 0; } background: radial-gradient(#ff6c6caa, #fff0 61.8%); mask: @svg( svg { viewBox: -50 -50 100 100; stroke-linecap: round; stroke-width: 1.5; stroke: #000; path*6 { transform: rotate(@n(*60)); d: M 0 0 0 44 @M2x3(M 0 @ny(* -9) L @pn(±9) $(-10*@ny - 5.8)); } } );

Doodles shared by community

Open one to see how it was made

Explore more Create

Support css-doodle

Donations keep the library going. If you’ve found it valuable, consider backing it.

Thanks to all our backers.

Donate