css-doodle — Visual art & creative coding with CSS

: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-rule: 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(#422abf55, #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: 1 / 100% auto (16/9);
  --c: #b6a8f2, #f2a7b8, #422abf x3, #1c1b1b;
  @content: @svg(
    viewBox: -57 -57 114 114;
    stroke-linejoin: round;
    circle*2400 {
      fill: @p(--c);
      r: $(.37 + abs.sin(8π/@N*@n(-1)*2));
      cx, cy: @Plot(
        r: 50 + 8*(sin(9t)*tan(14t) + tan(3t));
      );
    };
  );
</css-doodle>

@grid: 1 / 100% auto (16/9); --c: #b6a8f2, #f2a7b8, #422abf x3, #1c1b1b; @content: @svg( viewBox: -57 -57 114 114; stroke-linejoin: round; circle*2400 { fill: @p(--c); r: $(.37 + abs.sin(8π/@N*@n(-1)*2)); cx, cy: @Plot( r: 50 + 8*(sin(9t)*tan(14t) + tan(3t)); ); }; );

SVG playground @svg reference

:doodle { @grid: 1 / 24em ~ -50% -7em noclip; position: absolute; pointer-events: none; inset: 0; } background: radial-gradient(#ee446677, #fff0 61.8%); clip-path: @shape( fill-rule: 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(
    d: 0;
    repeat(60) {
      p: vec3(rot(pos, t/4) * d, d + t);
      d: d + .7length(fract(p) - .5) - .1;
    }
    fill: ramp(d / 10,
      #fff, #fd7 .1, #e46 .3, #07121f
    );
  );

</css-doodle>

@grid: 1 / 100% auto (16/9); @content: @pattern( d: 0; repeat(60) { p: vec3(rot(pos, t/4) * d, d + t); d: d + .7length(fract(p) - .5) - .1; } fill: ramp(d / 10, #fff, #fd7 .1, #e46 .3, #07121f ); );

@pattern reference

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

A shape generator from equations.

@plot, @shape

<css-doodle>

  @grid: 1x2400 / 100% auto (16/9);
  font-familiy: monospace;
  font-size: 1.6vmin;
  color: #999;
  @content: @p('O', 'o');
  @random(.05) {
    @content: '⬮';
    font-size: .8em;
    color: @p(#d15c49, #372f96);
  }
  @place: @plot.scatter(
    scale: .061 .065;
    -x: 1.81(11cos(.6t) + cos(55t) - 2.8);
    -y: 2.5(11sin(9.03t) - sin(77t)) + 16;
  );
</css-doodle>

@grid: 1x2400 / 100% auto (16/9); font-familiy: monospace; font-size: 1.6vmin; @content: @p('O', 'o'); color: #999; @random(.05) { @content: '⬮'; font-size: .8em; color: @p(#d15c49, #372f96); } @place: @plot.scatter( scale: .061 .065; -x: 1.81(11cos(.6t) + cos(55t) - 2.8); -y: 2.5(11sin(9.03t) - sin(77t)) + 16; );

Shape playground @shape reference

: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-rule: 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'