Tag Archives: pattern

Unicode Patterns with <css-doodle />

<css-doodle /> is a web component for drawing patterns with CSS.

The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself.

Combine <css-doodle /> with generated content and Unicode characters, and you can create nice decorative patterns as shown above.

<css-doodle>
  :doodle {
    @grid: 21 / 35em 20em;
    overflow: hidden;
  }

  --c: @pick(
    #11CBD7, #C6F1E7, #FA4659
  );

  :after {
    content: '\@hex(@rand(0x1401, 0x141b))';
    font-size: 2em; 
    background: linear-gradient(
      @rand(360deg),
      transparent 50%, var(--c) 50%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: var(--c);
    -webkit-text-stroke-width: .5px;
    color: transparent;
  } 
</css-doodle>

Unicode Patterns →
Unicode Patterns demos →
<css-doodle /> →