css-doodle

Create

Function

@doodle

A doodle inside a doodle. The nested code is rendered to an image for use as a background, or inserted as a real <css-doodle> element with @content.

Syntax

  • @doodle(<code>), @doodle<width>x<height>(<code>)
code
A complete doodle. Its @grid size should be in percentages, so it fills whatever it is drawn into.
width, height
Digits glued to the name set the pixel size of the rendered image: @doodle200x100(…). One number is used for both.

As a background the image is sized to cover unless a background-size follows. Each nested doodle gets its own random seed, and time uniforms like @t keep working inside. Cells with identical nested code share one image.

Examples

@grid: 3 / 60vmin _2px;
background: @doodle(
  @grid: 4 / 100%;
  background: @p(#000, #e6437d, #ebbf4d);
  margin: 1px;
);
Open in playground

Recursion, two levels deep:

@grid: @p(2, 3) / 60vmin;
background: @doodle(
  @grid: @r4 / 100%;
  background: @doodle(
    @grid: @r4 / 100%;
    background: @svg(
      viewBox: 0 0 1 1;
      path {
        d: M 0 0 L 1 0 L 1 1;
        fill: #000;
      }
    );
  );
);
Open in playground

As an element, so the nested cells stay interactive:

@grid: 1 / 60vmin auto;
@content: @doodle(
  @grid: 5 / 100%;
  background: #000;
  clip-path: polygon(@m3.M2.r(100%));
);
Open in playground

See also