index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>&lt;css-doodle /&gt;</title>
  <meta name="keywords" content="css, web components">
  <meta name="description" content="A web component for drawing patterns with CSS">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href=favicon.png type="image/png">
  <link rel="stylesheet" href="lib/codemirror/style.css">
  <link rel="stylesheet" href="style.css?fbc4e9ea0c35466f02ad5a4e811ec7ae">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">
  <script>(window.customElements && document.head.attachShadow) || (document.querySelector('html').className += ' oldie')</script>
  <script type="module">import 'https://esm.sh/css-doodle@0.42.2'</script>
</head>
<body>

  <div class="cover">
    <css-doodle use="var(--flags)"></css-doodle>
    <header>
      <h1>
        <span class="title">
          &lt; <em>css-doodle</em> /&gt;
          <a class="version" href="https://esm.sh/css-doodle@0.42.2/css-doodle.min.js?raw">v0.42.2</a>
        </span>
        </span>
      </h1>
      <p>A web component for drawing patterns with CSS</p>
      <nav>
        <a href="#usage">Usage ↓</a>
        <a href="https://codepen.io/collection/XyVkpQ/">CodePen</a>
        <a href="https://github.com/css-doodle/css-doodle">GitHub</a>
      </nav>
    </header>
    <div class="wrap">
      <div class="playground">
        <div class="doodle" front></div>
        <div class="source"></div>
        <div class="switcher"></div>
      </div>
    </div>
  </div>

  <div class="docs">

    <!-- intro -->
    <section class="intro wrap">
      <h2><a name="intro"></a>Introduction</h2>
      <div class="intro-body">
        <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7DCKJM&placement=css-doodlecom" id="_carbonads_js"></script>
        <article class="intro-content">
          <p>
            <em>&lt;css-doodle /&gt; </em> is based on
            <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom">Shadow DOM v1</a> and
            <a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">Custom Elements v1</a>.
            You can use it on all major browsers right now without polyfills.
          </p>
          <p>
            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.
          </p>
          <p>
            <strong>The limit is the limit of CSS itself</strong>.
          </p>
        </article>
      </div>
      <div class="support">
        <h3>
          <css-doodle use="var(--heart)"></css-doodle>
          <span>Donate</span>
          <css-doodle use="var(--heart)"></css-doodle>
        </h3>
        <p>
          Support us by becoming a <a href="https://opencollective.com/css-doodle#backer">Backer</a>
          or <a href="https://opencollective.com/css-doodle#sponsors">Sponsor</a> on <a href="https://opencollective.com/css-doodle">open collective</a>.
        </p>
      </div>
    </section>

    <!-- getting started -->
    <section class="gettting-started wrap">
      <h2><a name="getting-started"></a>Getting Started</h2>
      <p>
        Download the <a href="https://esm.sh/css-doodle/css-doodle.min.js?raw">latest version</a> or include it directly from a CDN:
      </p>
      <p class="first-code-sample">
        <textarea code>
          <script src="https://esm.sh/css-doodle/css-doodle.min.js?raw"></script>
        </textarea>
      </p>
      <p>You can also use ES Modules in modern browsers:</p>
      <p>
        <textarea code>
          <script type="module">
            import 'https://esm.sh/css-doodle'
          </script>
        </textarea>
      </p>

      <p>If you're using a build tool, you can install it via <a href="http://npmjs.org/package/css-doodle">npm</a> and import it in JavaScript:</p>

      <p>
        <textarea code>
          npm install css-doodle

          /* index.js */
          import 'css-doodle'
        </textarea>
      </p>

      <p>Start creating!</p>

      <p>
        <textarea code>
          <css-doodle>
            /* put your code here */
          </css-doodle>
        </textarea>
      </p>

    </section>

    <!-- usage -->
    <section class="usage">

      <div class="wrap">
        <h2><a name="usage"></a>Usage</h2>
        <p>
          The syntax of <em>css-doodle</em> is based on CSS and provides several extra utility
          functions and shorthand properties.
        </p>

        <ul class="nav">
          <li>
            <a href="#attributes">Attributes</a>
            <ul>
              <li><a href="#attribute-grid">grid</a></li>
              <li><a href="#attribute-use">use</a></li>
              <li><a href="#attribute-seed">seed</a></li>
            </ul>
          </li>
          <li>
            <a href="#selectors">Selectors</a>
            <ul>
              <li> <a href="#selector-:doodle">:doodle</a></li>
              <li> <a href="#selector-:container">:container</a></li>
              <li> <a href="#selector-@nth">@nth</a></li>
              <li> <a href="#selector-@even">@even</a></li>
              <li> <a href="#selector-@odd">@odd</a></li>
              <li> <a href="#selector-@at">@at</a></li>
              <li> <a href="#selector-@random">@random</a></li>
              <li> <a href="#selector-@row">@row</a></li>
              <li> <a href="#selector-@col">@col</a></li>
              <li> <a href="#selector-@match">@match</a></li>
            </ul>
          </li>
          <li>
            <a href="#properties">Properties</a>
            <ul>
              <li> <a href="#property-@grid">@grid</a></li>
              <li> <a href="#property-@use">@use</a></li>
              <li> <a href="#property-@size">@size</a></li>
              <li> <a href="#property-@place">@place</a></li>
              <li> <a href="#property-@shape">@shape</a></li>
            </ul>
          </li>
          <li>
            <a href="#functions">Functions</a>
            <ul>
              <li> <a href="#function-@index">@index</a></li>
              <li> <a href="#function-@row">@row</a></li>
              <li> <a href="#function-@col">@col</a></li>
              <li> <a href="#function-@size-row">@size-row</a></li>
              <li> <a href="#function-@size-col">@size-col</a></li>
              <li> <a href="#function-@size">@size</a></li>
              <li> <a href="#function-@pick">@pick</a></li>
              <li> <a href="#function-@pick-n">@pick-n</a></li>
              <li> <a href="#function-@pick-d">@pick-d</a></li>
              <li> <a href="#function-@rand">@rand</a></li>
              <li> <a href="#function-@last">@last-*</a></li>
              <li> <a href="#function-@repeat">@repeat</a></li>
              <li> <a href="#function-@multiple">@multiple</a></li>
              <li> <a href="#function-@n">@n,nx,ny,N</a></li>
              <li> <a href="#function-@stripe">@stripe</a></li>
              <li> <a href="#function-@svg">@svg</a></li>
              <li> <a href="#function-@svg-filter">@svg-filter</a></li>
              <li> <a href="#function-@Math">@&lt;Math&gt;</a></li>
              <li> <a href="#function-@calc">@calc</a></li>
              <li> <a href="#function-@var">@var</a></li>
              <li> <a href="#function-@hex">@hex</a></li>
              <li> <a href="#function-@doodle">@doodle</a></li>
              <li> <a href="#function-@shaders">@shaders</a></li>
              <li> <a href="#function-@shape">@shape</a></li>
              <li> <a href="#function-@plot">@plot</a></li>
            </ul>
          </li>
          <li>
            <a href="#js-api">JS API</a>
            <ul>
              <li> <a href="#js-api-grid">grid</a></li>
              <li> <a href="#js-api-use">use</a></li>
              <li> <a href="#js-api-seed">seed</a></li>
              <li> <a href="#js-api-update">update</a></li>
              <li> <a href="#js-api-export">export</a></li>
            </ul>
          </li>
        </ul>
      </div>

      <!-- example -->
      <section class="example">
        <div class="container">
          <css-doodle>
            @grid: 18 / 100vmax / #0a0c27;
            --hue: calc(180 + 1.5 * @x * @y);
            background: hsl(var(--hue), 50%, 70%);
            margin: -.5px;
            transition: @r(.5s) ease;
            clip-path: polygon(@pick(
              '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>
        </div>
        <textarea code data-link="https://codepen.io/yuanchuan/pen/MWjxRrL"></textarea>
      </section>

      <article class="wrap attributes">
        <h3><a name="attributes"></a>Attributes</h3>

        <section>
          <h4><a name="attribute-grid"></a><span>Grid</span></h4>

          <p>
            The number of rows and columns in the grid is defined by the <code>grid</code> attribute on the element,
            ranged from <em>1</em> to <em>64</em>. It's default to be <em>1x1</em> when no value or 0 is given.
          </p>

          <p class="has-preview">
            <textarea code>
              <css-doodle grid="5">
                :doodle {
                  width: 8em; height: 8em;
                  gap: 1px;
                }
                background: #60569e;
              </css-doodle>
            </textarea>
            <css-doodle grid="5">
              :doodle {
                gap: 1px;
                @size: 8em;
              }
              background: #60569e;
            </css-doodle>
          </p>

          <p>The row or column is limited up to <em>4096</em> only when the grid is 1-dimensional: </p>
          <p class="has-preview">
            <textarea code>
              <css-doodle grid="1x35">
                :doodle {
                  @size: 8em 12em; /* width: 8em; height: 12em; */
                  gap: 1px;
                }
                background: #60569e;
                width: @rand(5%, 100%); /* from 5% to 100% by random */
              </css-doodle>
            </textarea>
            <css-doodle grid="1x35" click-to-update>
              :doodle {
                @size: 8em 12em;
                gap: 1px;
              }
              transition: .2s ease @rand(500ms);
              background: #60569e;
              will-change: width;
              width: @rand(5%, 100%);
            </css-doodle>
          </p>

          <p>
            The <code>n x m</code> follows the order of <em>(col, row)</em> or <em>(x, y)</em>.
            The following formats of <code>grid</code> value are all recognizable:
          </p>
          <div class="list-items">
            <ul>
              <li><code>grid = "0"</code></li>
              <li><code>grid = "5"</code></li>
              <li><code>grid = "20"</code></li>
              <li><code>grid = "5x7"</code></li>
              <li><code>grid = "5 x 7"</code></li>
              <li><code>grid = "5,7"</code></li>
            </ul>
          </div>

          <p>
            There's an alternative way to set up the <code>grid</code> by using the <a href="#property-@grid">@grid</a> property.
          </p>
          <p class="has-preview">
            <textarea code>
              <css-doodle>
                :doodle {
                  @grid: 5 / 8em;
                }
                background: #60569e;
                transform: scale(@rand(.2, .9));
              </css-doodle>
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle {
                @grid: 5;
                @size: 8em;
              }
              background: #60569e;
              transform: scale(@r(.2, .9));
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="attribute-use"></a><span>use</span></h4>
          <p>
            Import rules from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">CSS custom properties</a> (CSS variables).
          </p>

          <p class="has-preview">
            <textarea code>
              <style>
                css-doodle {
                  --rule: (
                    @grid: 5 / 8em;
                    --d: @p(45deg, -45deg, 135deg, -135deg);
                    --lg: linear-gradient(@var(--d),#60569e 50%,#0000 0);
                    background:
                      @var(--lg) 0 0 / 100% 100%,
                      @var(--lg) 0 0 / 50% 50%;
                  );
                }
              </style>
              <css-doodle use="var(--rule)"></css-doodle>
            </textarea>
            <style>
              css-doodle {
                --rule-use: (
                  @grid: 5 / 8em;
                  --deg: @p(45deg, -45deg, 135deg, -135deg);
                  --lg: linear-gradient(@var(--deg), #60569e 50%, #0000 0);
                  background:
                    @var(--lg) 0 0 / 100% 100%,
                    @var(--lg) 0 0 / 50% 50%;
                );
              }
            </style>
            <css-doodle click-to-update use="var(--rule-use)"></css-doodle>
          </p>
          <p>
            It's highly recommended to write the rules this way if you want to use css-doodle in production websites.
            So it won't break when the network is slow or when the browser does not support Web Component.
          </p>

        </section>

        <section>
          <h4><a name="attribute-seed"></a><span>seed</span></h4>
          <p>
            All random values will be regenerated to the same value as last time based on the <em>seed</em> value.
            It's quite useful if you want to keep a snapshot.
          </p>
          <p class="has-preview">
            <textarea code>
              <css-doodle seed="2020">
                :doodle {
                  @grid: 5 / 8em;
                }
                background: #60569e;
                transform: scale(@rand(.2, .9));
              </css-doodle>
            </textarea>
            <css-doodle seed="2020" click-to-update>
              @grid: 5 / 8em;
              background: #60569e;
              transform: scale(@rand(.2, .9));
            </css-doodle>
          </p>

          <p>
            A random <code>seed</code> will be generated by default if you don't specify explictly, and
            you can always get the generated value with <a href="#js-api-seed">JS API</a> later.
          </p>
        </section>

      </article>

      <!-- example -->
      <section class="example">
        <div class="container">
          <css-doodle>
            @grid: 1 / 100vw 100vh / #0a0c27;
            background-size: 200px 200px;
            background-image: @doodle(
              @grid: 6 / 100%;
              @size: 4px;
              font-size: 4px;
              color: hsl(@r240, 30%, 50%);
              box-shadow: @m3x5(
                calc(4em - @nx*1em) @ny(*1em)
                  @p(@m3(currentColor), @m2(#0000)),
                calc(2em + @nx*1em) @ny(*1em)
                  @lp
              );
            );
          </css-doodle>
        </div>
        <textarea code data-link="https://codepen.io/yuanchuan/pen/OJRqGvz"></textarea>
      </section>

      <article class="wrap selectors">
        <h3><a name="selectors"></a>Selectors</h3>

        <section>
          <h4><a name="selector-:doodle"></a><span>:doodle</span></h4>
          <p>
            The <code>:doodle</code>
            is a special selector indicates to the component element itself.
            Note that the styles would be over-written by your normal CSS files outside.
            <span class="tip">(try to hover on the doodle)</span>
          </p>
          <p class="has-preview">
            <textarea code>
              :doodle { --s: 0 }
              :doodle(:hover) { --s: 1 }

              transition: .5s cubic-bezier(.175, .885, .32, 1.275);
              transition-delay: @rand(500ms);
              transform: translateY(calc(var(--s) * 100%));
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @grid: 5 / 8em;
                --s: 0;
                gap: 1px;
              }
              :doodle(:hover) {
                --s: 1;
              }
              --offset: calc(var(--s) * 100%);
              transform: translateY(var(--offset));
              transition: .5s cubic-bezier(.175, .885, .32, 1.275);
              transition-delay: @rand(500ms);

              transform-origin: 50% 50%;
              background: #60569e;
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-:container"></a><span>:container</span></h4>
          <p>
            The <code>:container</code>
            is the container element that holds all the cells, which is using <a href="https://www.w3.org/TR/css-grid-1/">Grid Layout</a>.
            You may want to set <code>gap</code> inside it.
          </p>
          <p class="has-preview">
            <textarea code>
              :doodle {
                overflow: hidden;
              }
              :container {
                gap: 1px;
                transform: rotate(45deg) scale(1.5);
              }
            </textarea>
            <css-doodle>
              :doodle {
                @grid: 8 / 8em;
                overflow: hidden;
              }
              :container {
                gap: 1px;
                transform: rotate(45deg) scale(1.5);
              }
              background: #60569e;
            </css-doodle>
          </p>
          <p>
            It inherits all the grid properties from <code>:doodle</code> so that's why this also works:
          </p>
          <p class="no-preview">
            <textarea code>
              :doodle {
                gap: 1px;
              }
            </textarea>
          </p>
        </section>

        <section>
          <h4><a name="selector-@nth"></a><span>@nth(n, ...)</span></h4>
          <p> Select the nth cell like <code> :nth-child(n)</code> does.</p>
          <p class="has-preview">
            <textarea code>
              /* :nth-child is still valid though */
              :nth-child(1) {
                background: #60569e;
              }
              @nth(5) {
                background: #60569e;
              }
              @nth(3n + 8) {
                background: #e6437d;
              }
              @nth(1, 5, 3n + 8) {
                :after {
                  content: @index;
                  color: #fff;
                }
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
                gap: 1px;
              }
              background: #f5f5f5;
              :nth-child(1) {
                background: #60569e;
              }
              @nth(5) {
                background: #60569e;
              }
              @nth(3n + 8) {
                background: #e6437d;
              }
              @nth(1, 5, 3n + 8) {
                :after {
                  content: @index;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@even"></a><span>@even</span></h4>
          <p>Select cells like <code> :nth-child(even)</code> but shorter.</p>
          <p class="has-preview">
            <textarea code>
              @even {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              @even {
                background: #60569e;
                :after {
                  content: @index;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@odd"></a><span>@odd</span></h4>
          <p>Select cells like <code> :nth-child(odd)</code>.</p>
          <p class="has-preview">
            <textarea code>
              @odd {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              @odd {
                background: #60569e;
                :after {
                  content: @index;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@at"></a><span>@at(col, row)</span></h4>
          <p>Select cell at specific column and row.</p>
          <p class="has-preview">
            <textarea code>
              @at(4, 2) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
                gap: 1px;
              }
              background: #f5f5f5;
              @at(4, 2) {
                background: #60569e;
                :after {
                  content: @x, @y;
                  font-size: .5em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@random"></a><span>@random([ ratio ])</span></h4>
          <p>Select cells randomly. The <code>ratio</code> accepts value between <code>0</code> and <code>1</code>. Defaults to <code>0.5</code>.</p>
          <p class="has-preview">
            <textarea code>
              @random {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle {
                @size: 8em;
                gap: 1px;
              }
              background: #f5f5f5;
              transition: .2s;
              @random {
                background: #60569e;
                :after {
                  content: @index;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
          <p>The selector can be applied multiple times.</p>
          <p class="has-preview">
            <textarea code>
              @random { border-top: 1px solid #60569e; }
              @random { border-left: 1px solid #60569e; }
              @random(.2) {
                :after {
                  content: '';
                  background: hsl(@rand(360), 60%, 70%);
                  @size: @rand(3px);
                }
              }
            </textarea>
            <css-doodle click-to-update>
              :doodle {
                @grid: 16 / 8em;
              }
              margin: -.5px;
              @random {
                border-top: 1px solid #60569e;
              }
              @random {
                border-left: 1px solid #60569e;
              }
              @random(.2) {
                :after {
                  content: '';
                  background: hsl(@rand(360), 60%, 70%);
                  @size: @rand(3px);
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@row"></a><span>@row(n, ...)</span></h4>
          <p> Select the nth row of the grid.</p>
          <p class="has-preview">
            <textarea code>
              @row(3) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @row(3) {
                background: #60569e;
                :after {
                  content: @row;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
          <p>
            The <code>odd</code> and <code>even</code> is supported.
          </p>
          <p class="has-preview">
            <textarea code>
              @row(even) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @row(even) {
                background: #60569e;
                :after {
                  content: @row;
                  font-size: .8em;
                  color: #fff;
                }
              }
              @row(even) {
                :after {
                  content: @row;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@col"></a><span>@col(n, ...)</span></h4>
          <p> Select the nth column of the grid.</p>
          <p class="has-preview">
            <textarea code>
              @col(3) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @col(3) {
                background: #60569e;
                :after {
                  content: @col;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
          <p>
            You can use <code>odd</code> and <code>even</code> too.
          </p>
          <p class="has-preview">
            <textarea code>
              @col(odd) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @col(odd) {
                background: #60569e;
                :after {
                  content: @col;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="selector-@match"></a><span>@match(expression)</span></h4>
          <p>
            Target the cells based on general Math expressions.
            The variable
            <code>i</code>, <code>I</code>,
            <code>x</code>, <code>X</code>,
            <code>y</code> and <code>Y</code> can be used without prefix <code>@</code> symbol for calculation.
          </p>
          <p class="has-preview">
            <textarea code>
              @match(i <= 8 || i >= 18) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @match(i <= 8 || i >= 18) {
                background: #60569e;
                :after {
                  content: @i;
                  font-size: .8em;
                  color: #fff;
                }
              }
            </css-doodle>
          </p>
          <p>
            For convenience the symbols <code>≤</code> and <code>≥</code>
            have the meanings of <code>&lt;=</code> and <code>&gt;=</code> respectively.
          </p>
          <p class="has-preview">
            <textarea code>
              @match(x ≤ y) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="10">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @match(x ≤ y) {
                background: #60569e;
              }
            </css-doodle>
          </p>
          <p>The equal sign can be both <code>=</code> and <code>==</code>.</p>
          <p class="has-preview">
            <textarea code>
              @match(x = y) {
                background: #60569e;
              }
              @match(X-x+1 == y) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="10">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              margin: .5px;
              @match(x = y) {
                background: #60569e;
              }
              @match(X-x+1 == y) {
                background: #60569e;
              }
            </css-doodle>
          </p>
          <p>A more complex example.</p>
          <p class="has-preview">
            <textarea code>
              @grid: 21 / 8em;
              @match(tan.cos.sin(x*y) > 1) {
                background: #60569e;
              }
            </textarea>
            <css-doodle grid="21">
              :doodle {
                @size: 8em;
              }
              background: #f5f5f5;
              @match(tan.cos.sin(x*y) > 1) {
                background: #60569e;
              }
            </css-doodle>
          </p>
        </section>
      </article>

      <section class="example hide-code">
        <div class="container">
          <css-doodle>
            /* Fibonacci spiral */

            @grid: 1 / 100vw 100vh / #125cde;
            @content: @Svg(
              viewBox: -50 -50 100 100 padding -20;
              circle*500 {
                fill: hsl(@calc(120-90*@sin.n), 80%, 50%);
                r: @sqrt(@n/60);
                cx: @calc(@n*.618^4 * cos(2π*@n*.618));
                cy: @calc(@n*.618^4 * sin(2π*@n*.618));
              }
            );
          </css-doodle>
        </div>
        <textarea code data-link="https://codepen.io/yuanchuan/pen/KKgEYBb"></textarea>
      </section>

      <article class="wrap properties">
        <h3><a name="properties"></a>Properties</h3>

        <section>
          <h4><a name="property-@grid"></a><span>@grid</span></h4>
          <p>This is another way to define the <code>grid</code> value and it has higher priority.</p>
          <p class="has-preview">
            <textarea code>
              <css-doodle grid="5">
                :doodle {
                  /* will be 3x3 instead of 5x5 */
                  @grid: 3x3;
                  @size: 8em;
                }
              </css-doodle>
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @grid: 3 / 8em;
              }
              background: #60569e;
              margin: .5px;
            </css-doodle>
          </p>

          <p>Set grid and doodle size at the same time: </p>
          <p class="has-preview">
            <textarea code>
              <css-doodle>
                :doodle {
                  @grid: 8 / 8em;
                }
              </css-doodle>
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @grid: 8 / 8em;
                gap: 1px;
              }
              background: #60569e;
            </css-doodle>
          </p>

          <p>The <code>:doodle</code> selector can be ommited if there's no other rules for it.
          <p class="has-preview">
            <textarea code>
              <css-doodle>
                @grid: 8 / 8em;
                background: #60569e;
              </css-doodle>
            </textarea>
          </p>

        </section>

         <section>
          <h4><a name="property-@use"></a><span>@use</span></h4>
          <p>Like <a href="#attribute-use">@use</a> attribute but as part of the rule.</p>
          <p class="has-preview">
            <textarea code>
              <style>
                :root {
                  --rule-a: (
                    @grid: 5 / 8em;
                    clip-path: circle(100% at 0 0);
                  );
                  --rule-b: (
                    background-image: radial-gradient(#fff 50%, #0000 0);
                    background-position: -25% -25%;
                    background-size: @r(40%, 80%) @lr();
                    background-repeat: no-repeat;
                  );
                }
              </style>

              <css-doodle>
                @use: var(--rule-a), var(--rule-b);
                /* or */
                @use: var(--rule-a);
                @use: var(--rule-b);

                /* more rules */
                background-color: #60569e;
              </css-doodle>
            </textarea>
            <style>
              :root {
                --rule-a: (
                  @grid: 5 / 8em;
                  clip-path: circle(100% at 0 0);
                  background: #60569e;
                );
                --rule-b: (
                  background-image: radial-gradient(#fff 50%, #0000 0);
                  background-position: -25% -25%;
                  background-size: @r(40%, 80%) @lr();
                  background-repeat: no-repeat;
                );
              }
            </style>
            <css-doodle>
              @use: var(--rule-a), var(--rule-b);
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="property-@size"></a><span>@size</span></h4>
          <p>Set width and height in one place.</p>
          <p class="has-preview">
            <textarea code>
              @size: 10em;
              /* width: 10em; height: 10em; */

              @size: 8em 6em;
              /* width: 8em; height: 6em; */

            </textarea>
            <css-doodle>
              @grid: 1 / 8em;
              @size: 8em 6em;
              background: #60569e;
              :after {
                content: 8em x 6em;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="property-@place"></a><span>@place</span></h4>
          <p>Place cells relative to the grid. </p>
          <p class="has-preview">
            <textarea code>
              @size: 1.6em;
              @nth(1) { @place: 0 top }
              @nth(2) { @place: right 25% }
              @nth(3) { @place: center }
              @nth(4) { @place: .8em calc(100% - .8em) }
              @nth(5) { @place: 75% 80% }
            </textarea>

            <css-doodle>
              :doodle {
                @grid: 1x5 / 8em noclip;
                border: 1px solid #60569e;
              }
              @size: 1.6em;
              background: rgba(72, 74, 142, .8);
              @nth(1) { @place: 0 top; }
              @nth(2) { @place: right 25%; }
              @nth(3) { @place: center; }
              @nth(4) { @place: .8em calc(100% - .8em); }
              @nth(5) { @place: 75% 80%; }
              :after {
                content: @index;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="property-@shape"></a><span>@shape</span></h4>
          <p>Turns the element into a shape which is generated with <code>clip-path</code> and <code>polygon()</code>.</p>
          <p class="has-preview">
            <textarea code>
              :doodle {
                @grid: 7 / 8em;
                @shape: circle;
              }
              @even {
                @shape: hypocycloid 4;
                background: #60569e;
                transform: scale(2) rotate(-60deg);
              }
            </textarea>
            <css-doodle>
              :doodle {
                @grid: 7 / 8em;
                @shape: circle;
              }
              @even {
                @shape: hypocycloid 4;
                background: #60569e;
                transform: scale(2) rotate(-60deg);
              }
            </css-doodle>
          </p>
          <div class="basic-shapes">
            <h5><a name="basic-shape"></a>Basic shapes</h5>
            <div class="shapes">
              <!-- shapes -->
            </div>

            <p>
              For more shapes you can use <a href="#function-@shape">@shape()</a> function.
            </p>
          </div>
        </section>
      </article>

      <section class="example">
        <div class="container">
          <css-doodle>
            @grid: 7 / 100vmax / #0a0c27;
            @shape: clover 5;
            background: hsla(-@i(*4), 70%, 68%, @r.8);
            transform:
              scale(@r(.2, 1.5))
              translate(@m2.@r(±50%));
          </css-doodle>
        </div>
        <textarea code data-link="https://codepen.io/yuanchuan/pen/VwKRNGP"></textarea>
      </section>

      <article class="wrap functions">
        <h3><a name="functions"></a>Functions</h3>
        <section>
          <h4><a name="function-@index"></a><span>@index</span></h4>
          <p>Returns the current index value of the cell.</p>
          <p class="has-preview">
            <textarea code>
              :after {
                content: @index();
                color: #fff;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #60569e;
              margin: .5px;
              :after {
                content: @index;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p>
            The parentheses can be omitted if the function has no parameters.
          </p>
          <p class="has-preview">
            <textarea code>
              @grid: 5x1 / 8em;
              @place: center;
              @size: calc(100% / 5 * @index);
              opacity: calc(1.1 - 1 / 5 * @index);
              z-index: calc(5 - @index);
              background: #60569e;
            </textarea>
            <css-doodle grid="5">
              @grid: 5x1 / 8em;
              @place: center;
              @size: calc(100% / @size() * @i);
              z-index: calc(@size - @i);
              opacity: calc(1.1 - 1 / @size * @i);
              background: #60569e;
              :after {
                content: @index();
                position: absolute;
                top: .2em; right: .2em;
                color: #fff;
                font-size: .6em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@i</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@row"></a><span>@row</span></h4>
          <p>Returns the current row number of the cell.</p>
          <p class="has-preview">
            <textarea code>
              :after {
                content: @row;
                color: #fff;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle {
                @size: 8em;
              }
              background: #60569e;
              margin: .5px;
              :after {
                content: @row;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@y</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@col"></a><span>@col</span></h4>
          <p> Returns the current column number of the cell.</p>
          <p class="has-preview">
            <textarea code>
              :after {
                content: @col;
                color: #fff;
              }
            </textarea>
            <css-doodle grid="5">
              :doodle { @size: 8em; }
              background: #60569e;
              margin: .5px;
              :after {
                content: @col;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@x</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@size-row"></a><span>@size-row</span></h4>
          <p> Returns the max row number of the grid.</p>
          <p class="has-preview">
            <textarea code>
              @grid: 4x3 / 8em;
              :after {
                content: @row / @size-row;
              }
            </textarea>
            <css-doodle>
              @grid: 4x3 / 8em;
              background: #60569e;
              margin: .5px;
              :after {
                content: @row/@size-row;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@Y</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@size-col"></a><span>@size-col</span></h4>
          <p> Returns the max column number of the grid.</p>
          <p class="has-preview">
            <textarea code>
              @grid: 4x3 / 8em;
              :after {
                content: @col / @size-col;
              }
            </textarea>
            <css-doodle>
              @grid: 4x3 / 8em;
              background: #60569e;
              margin: .5px;
              :after {
                content: @col/@size-col;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@X</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@size"></a><span>@size</span></h4>
          <p>Returns the total cells count of the grid.</p>
          <p class="has-preview">
            <textarea code>
              @grid: 3 / 8em;
              :after {
                content: @i / @size;
              }
            </textarea>
            <css-doodle>
              @grid: 3 / 8em;
              background: #60569e;
              margin: .5px;
              :after {
                content: @i / @size;
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p>
            These numbers can be used to generate dynamic values together with <code>calc()</code>.
          </p>
          <p class="has-preview">
            <textarea code>
              background: rgba(
                96, 86, 158,
                calc(@row * @col / @size)
              );
            </textarea>
            <css-doodle grid="5">
              @grid: 5/8em;
              --alpha: calc(@row * @col / @size);
              background: rgba(96, 86, 158, var(--alpha));
              :after {
                content: @calc(@row * @col);
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@I</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@pick"></a><span>@pick(v1, v2,...)</span></h4>
          <p>
            Randomly pick a value from the given list.
            <br/><span class="tip">(try to click on the doodle)</span>
          </p>
          <p class="has-preview">
            <textarea code>
              opacity: @pick(1, .6, .3, .1);
              :after {
                content: @pick(1, 2, 3, 4);
              }
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle { @size: 8em; }
              opacity: @pick(1, .6, .3, .1);
              background: #60569e;
              :after {
                content: @pick(1, 2, 3, 4);
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p>
            It supports range format like this: <code>[0-9a-z]</code>
          </p>
          <p class="has-preview">
            <textarea code>
              opacity: @pick(1, .6, .3, .1);
              :after {
                content: @pick([a-z]);
              }
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle { @size: 8em; }
              opacity: @pick(1, .6, .3, .1);
              background: #60569e;
              :after {
                content: @pick([a-z]);
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@p</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@pick-n"></a><span>@pick-n(v1, v2,...)</span></h4>
          <p>
            Pick a value from the given list one by one.
          </p>
          <p class="has-preview">
            <textarea code>
              opacity: @pick-n(1, .6, .3, .1);
              :after {
                content: @pick-n([1-4]);
              }
            </textarea>
            <css-doodle grid="5">
              :doodle { @size: 8em; }
              opacity: @pick-n(1, .6, .3, .1);
              background: #60569e;
              :after {
                content: @pick-n([1-4]);
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@pn</code>
          </p>
        </section>
        <section>
          <h4><a name="function-@pick-d"></a><span>@pick-d(v1, v2,...)</span></h4>
          <p>
            Pick a value like <code>@pick-n()</code>, but with distinct random order.
          </p>
          <p class="has-preview">
            <textarea code>
              opacity: @pick-d(1, .6, .3, .1);
              :after {
                content: @pick-d([a-z]);
              }
            </textarea>
            <css-doodle click-to-update grid="5">
              :doodle { @size: 8em; }
              opacity: @pick-d(1, .6, .3, .1);
              background: #60569e;
              :after {
                content: @pick-d([a-z]);
                color: #fff;
                font-size: .8em;
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@pd</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@rand"></a><span>@rand(start [,end])</span></h4>
          <p>
            Returns a random value between two numbers.
            <br/><span class="tip">(try to click the doodle)</span>
          </p>
          <p class="has-preview">
            <textarea code>
              background: rgba(96, 86, 158, @rand(.9));
              transition: .2s ease @rand(200ms);
              transform: rotate(@rand(360deg));
              clip-path: polygon(
                @rand(100%) 0, 100% @rand(100%), 0 @rand(100%)
              );
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle { @size: 8em; }
              background: rgba(96, 86, 158, @rand(.9));
              transition: .2s ease @rand(200ms);
              will-change: transform;
              transform: rotate(@rand(360deg));
              clip-path: polygon(
                @rand(100%) 0, 100% @rand(100%), 0 @rand(100%)
              );
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@r</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@last"></a><span>@last-pick, @last-rand</span></h4>
          <p>
            Returns the last value of <code>@pick</code>, <code>@pick-n</code>, <code>@pick-d</code> and <code>@rand</code>.
          </p>
          <p class="has-preview">
            <textarea code>
              background: linear-gradient(
                @pick-d(45deg, -45deg),
                @pick(#60569e, #e6437d),
                rgba(255, 255, 255, 0),
                @last-pick()
              );
            </textarea>
            <css-doodle grid="5" click-to-update>
              @grid: 5 / 8em;
              background: linear-gradient(
                @pick-d(45deg, -45deg),
                @pick(#60569e, #e6437d),
                rgba(255, 255, 255, 0),
                @last-pick()
              );
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@lp</code> and <code>@lr</code>, respectively.
          </p>
        </section>

        <section>
          <h4><a name="function-@repeat"></a><span>@repeat(times, value)</span></h4>
          <p>
            Compose the given value multiple times.
            <br/><span class="tip">(try to click the doodle)</span>
          </p>
          <p class="has-preview">
            <textarea code>
              border-radius: @repeat(4, @rand(40%, 60%));

              /* dots */
              :after {
                background: #@repeat(6, @pick([0-9a-f]));
                /* ... */
              }
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle { @size: 8em; gap: 1px }
              background: #60569e;
              transition: .2s;
              transform: scale(.95);
              border-radius: @repeat(4, @rand(40%, 60%));
              :after {
                content: '';
                position: absolute;
                transition: .2s;
                left: @rand(20%, 80%);
                top: @rand(20%, 80%);
                @size: 5px;
                border-radius: 50%;
                background: #@repeat(6, @p([0-9a-f]));
              }
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@rep</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@multiple"></a><span>@multiple(times, value)</span></h4>
          <p>
            Same as <code>@repeat()</code>, but seperated with <em>commas</em>.
            Use capitalized <code>@Multiple</code> to make the values seperated with <em>spaces</em>.
          </p>
          <p class="has-preview">
            <textarea code>
              background: linear-gradient(
                @rand(360deg),
                @m(3, (
                  @pick-n(#60569e, #e6437d, #ebbf4d)
                    calc(@n(-1) * 100% / 3),
                  @lp
                    calc(@n * 100% / 3)
                ))
              );
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle {
                @size: 8em;
              }
              background: linear-gradient(
                @rand(360deg),
                @m3(
                  @pick-n(#60569e, #e6437d, #ebbf4d)
                    calc(@n(-1) * 100% / 3),
                  @lp calc(@n * 100% / 3)
                )
              );
            </css-doodle>
          </p>
          <p>
            The number closely after the function name will be regarded as the first parameter of the function,
            which will make the code more concise.
          </p>
          <p class="has-preview">
            <textarea code>
              background: #60569e;
              box-shadow: @m5(
                calc(@n * 2px) calc(@n * 2px) 0 0 #e6437d
              );
            </textarea>
            <css-doodle grid="5">
              :doodle { @size: 8em; }
              background: #60569e;
              margin: 20%;
              box-shadow: @m5(
                calc(@n() * 2px) calc(@n * 2px) 0 0 #e6437d
              );
            </css-doodle>
          </p>
          <p class="alias">
            Alias: <code>@m</code>, <code>@M</code>
          </p>
        </section>

        <section>
          <h4><a name="function-@n"></a><span>@n, @nx, @ny, @N</span></h4>
          <p>
            Used only inside <code>@repeat</code> and <code>@m</code> function to indicate the
            current repeating count: <code>@n</code>,
            current column count: <code>@nx</code>,
            current row count: <code>@ny</code>
            and the max count value: <code>@N</code>.
          </p>

          <p class="has-preview">
            <textarea code>
              background: radial-gradient(
                circle at @r(100%) @r(100%),
                @m20(
                  @p(#60569e, #ebbf4d) calc(@n(-1) * 100% / @N),
                  @lp calc(@n * 100% / @N)
                )
              );
            </textarea>
            <css-doodle grid="1" click-to-update>
              :doodle {
                @size: 8em;
              }
              background: radial-gradient(
                circle at @r(100%) @r(100%),
                @m20(
                  @p(#60569e, #ebbf4d)
                    calc(@n(-1) * 100% / @N),
                  @lp calc(@n * 100% / @N)
                )
              );
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="function-@stripe"></a><span>@stripe(color [size], ...)</span></h4>
          <p>
            Make stripe with gradients.
          </p>

          <p class="has-preview">
            <textarea code>
              @grid: 5 / 8em;
              background: linear-gradient(
                @rand(360deg),
                @stripe(#60569e, #e6437d, #ebbf4d)
              );
            </textarea>
            <css-doodle grid="1" click-to-update>
              @grid: 5 / 8em;
              background: linear-gradient(
                @r(360deg),
                @stripe(
                  #60569e, #e6437d, #ebbf4d
                )
              );
            </css-doodle>
          </p>

          <p>
            The size for each step is optional.
          </p>

          <p class="has-preview">
            <textarea code>
              background: linear-gradient(
                45deg,
                @stripe(
                  #60569e 50%, #e6437d, #ebbf4d, #60569e
                )
              );
            </textarea>
            <css-doodle grid="1" click-to-update>
              :doodle {
                @size: 8em;
              }
              background: linear-gradient(
                45deg,
                @stripe(
                  #60569e 50%, #e6437d, #ebbf4d, #60569e
                )
              );
            </css-doodle>
          </p>

          <p class="has-preview">
            <textarea code>
              border-radius: 50%;
              background: conic-gradient(
                @stripe(
                  #60569e 10%,
                  #e6437d 20%,
                  #ebbf4d 30%,
                  #321f35
                )
              );
            </textarea>
            <css-doodle grid="1" click-to-update>
              :doodle { @size: 8em; }
              border-radius: 50%;
              background: conic-gradient(
                @stripe(
                  #60569e 10%,
                  #e6437d 20%,
                  #ebbf4d 30%,
                  #321f35
                )
              );
            </css-doodle>
          </p>

          <p>
            See more about
            <a href="https://observablehq.com/@yuanchuan/stripe-function-in-css-doodle">stripe function in css-doodle</a>.
          </p>

        </section>


        <section>
          <h4><a name="function-@svg"></a><span>@svg(svg)</span></h4>
          <p>Use SVG directly as background image. </p>
          <p class="has-preview">
            <textarea code>
              <css-doodle>
                @grid: 1 / 8em 14em;
                background-size: 100%;
                background-image: @svg(
                  <svg viewBox="0 0 100 175">
                    @M50(<path
                      stroke-width="@r.5"
                      stroke="@p(#60569e, #e6437d)"
                      d="M0 0 L@r100 @r175"
                    />)
                  </svg>
                );
              </css-doodle>
            </textarea>
            <style>
              :root {
                --svg-example: (
                :doodle {
                  @grid: 1 / 8em 14em;
                  background-size: 100%;
                  background-image: @svg(
                    <svg viewBox="0 0 100 175">
                      @M50(<path
                        stroke-width="@r.5"
                        stroke="@pick(#60569e, #e6437d)"
                        d="M 0 0 L@r100 @r175"
                      />)
                    </svg>
                  );
                }
              );
            </style>
            <css-doodle click-to-update use="var(--svg-example)"></css-doodle>
          </p>
          <p>You can also write SVG with the syntax of CSS.</p>
          <p>
            <textarea code>
              background-image: @svg(
                viewBox: 0 0 100 175;
                path*50 {
                  stroke-width: @r.5;
                  stroke: @p(#60569e, #e6437d);
                  d: M0 0 L@r100 @r175;
                };
              );
            </textarea>
          </p>
          <p>
            See <a href="https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg">https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg</a>.
          </p>
        </section>

        <section>
          <h4><a name="function-@svg-filter"></a><span>@svg-filter(filter)</span></h4>
          <p>Apply SVG filters.</p>
          <p class="has-preview">
            <textarea code>
              filter: @svg-filter(
                feTurbulence {
                  type: fractalNoise;
                  baseFrequency: .01 .5;
                }
                feDisplacementMap {
                  in: SourceGraphic;
                  scale: 50;
                }
              );
            </textarea>
            <style>
              :root {
                --svg-filter-example: (
                  :doodle {
                    @grid: 1 / 8em;
                    background: #60569e;
                    border-radius: 50%;
                    filter: @svg-filter(
                      feTurbulence {
                        type: fractalNoise;
                        baseFrequency: .01 .5;
                      }
                      feDisplacementMap {
                        in: SourceGraphic;
                        scale: 50;
                      }
                    );
                  }
                );
              }
            </style>
            <css-doodle use="var(--svg-filter-example)"></css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="function-@Math"></a>@<span>&lt;Math&gt;</span></h4>
          <p>
            All Math functions and constants are available prefixed with <code>'@'</code>.
          </p>
          <p class="has-preview">
            <textarea code>
              --alpha: calc(
                @abs(@abs(@row - 3) + @abs(@col - 3) - 5) / 5
              );
              background: rgba(96, 86, 158, var(--alpha));
            </textarea>
            <css-doodle grid="5">
              :doodle { @size: 8em; }
              --alpha: calc(@abs(@abs(@row - 3) + @abs(@col - 3) - 5) / 5);
              background: rgba(
                96, 86, 158, var(--alpha)
              );
              will-change: transform;
              transform: rotate(15deg) scale(var(--alpha));
            </css-doodle>
          </p>

          <p>You can also use <code>π</code> directly.</p>

          <p class="has-preview">
            <textarea code>
              @grid: 1x60 / 8em 15em;
              @size: 75.8% 1px;
              justify-self: center;
              background: #e6437d;
              opacity: calc(1 - @i / @size);
              transform:
                rotate(-15deg)
                translateX(calc(@sin(@i / 4) * π * 10px));
            </textarea>
            <css-doodle>
              @grid: 1x60 / 8em 15em;
              @size: 65% 1px;
              justify-self: center;
              background: #60569e;
              opacity: calc(1 - @i / @size());
              transform:
                rotate(-15deg)
                translateX(calc(@sin(@i / 4) * π * 10px));
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="function-@calc"></a><span>@calc(expr)</span></h4>
          <p>
            Evaluate calculations.
          </p>
          <p class="has-preview">
            <textarea code>
              :after {
                content: @calc(@i * @i);
              }
            </textarea>
            <css-doodle>
              @grid: 5 / 8em;
              background: #60569e;
              :after {
                content: @calc(@i * @i);
                color: #fff;
                font-size: .5em;
              }
              @odd {
                transform: scale(.75);
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="function-@var"></a><span>@var(expr)</span></h4>
          <p>
            Same as native <code>var()</code>. Used to prevent the browser from evaluating the value inside nested vars.
            The example below won't work since the <code>var(--bg)</code> has no definition outside.
          </p>
          <p>
            <textarea code>
              <style>
                :root {
                  --rule: (
                    --bg: #60569e;
                    background: linear-gradient(
                      @rand(360deg),
                      /* --bg is not recognizable */
                      var(--bg) 50%, #0000 0
                    );
                  );
                }
              </style>
              <css-doodle use="var(--rule)"></css-doodle>
            </textarea>
          </p>
          <p>
            Use <code>@var()</code> instead.
          </p>
          <p class="has-preview">
            <textarea code>
              <style>
                --rule: (
                  --bg: #60569e;
                  background: linear-gradient(
                    @rand(360deg),
                    @var(--bg) 50%, #0000 0
                  );
                );
              </style>
            </textarea>
            <css-doodle click-to-update>
              :doodle {
                @grid: 5 / 8em;
              }
              --bg: #60569e;
              background: linear-gradient(
                @r(360deg),
                @var(--bg) 50%, #0000 0
              );
            </css-doodle>
          </p>

        </section>

        <section>
          <h4><a name="function-@hex"></a><span>@hex(num)</span></h4>
          <p>
            Transform a number into hex format.
          </p>
          <p class="has-preview">
            <textarea code>
              :after {
                content: \@hex(@rand(9632, 9687));
              }
            </textarea>
            <css-doodle grid="5" click-to-update>
              :doodle { @size: 8em; gap: 1px }
              :after {
                content: \@hex(@rand(9632, 9687));
                color: #60569e;
              }
            </css-doodle>
          </p>
        </section>

        <section>
          <h4><a name="function-@doodle"></a><span>@doodle(code)</span></h4>
          <p>
            Generate <code>url()</code> image with css-doodle code.
          </p>
          <p class="has-preview">
            <textarea code>
              @grid: @p(2, 3) / 8em;
              background-image: @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: #60569e;
                    }
                  );
                );
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: @p(2, 3) / 8em;
              background-image: @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: #60569e;
                    }
                  );
                );
              );
            </css-doodle>
          </p>
          <p>
            See: <a href="https://yuanchuan.dev/whats-new-in-css-doodle">https://yuanchuan.dev/whats-new-in-css-doodle</a>
          </p>
        </section>

        <section>
          <h4><a name="function-@shaders"></a><span>@shaders(code)</span></h4>
          <p>
            Generate <code>url()</code> image with GLSL code. Currently only one uniform value is added: </code><code>u_resolution</code></code>.
          </p>
          <p class="has-preview">
            <textarea code>
              background: @shaders(
                void main() {
                  vec2 p = gl_FragCoord.xy / u_resolution.xy;
                  FragColor = vec4(p.yx, .8, 1.);
                }
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: 1 / 8em;
              background: @shaders(
                void main() {
                  vec2 p = gl_FragCoord.xy / u_resolution.xy;
                  FragColor = vec4(p.yx, .8, 1.);
                }
              );
            </css-doodle>
          </p>

          <p>
            The function accepts three parts. If there's no explict <code>fragment</code> part,
            all the code will be treated as fragment shader like the example above.
          </p>
          <p>
            <textarea code>
              background: @shaders(
                fragment { /* fragment shader */ }
                vertex   { /* vertex shader */ }
                texture  { /* textures in css-doodle */ }
              );
            </textarea>
          </p>

          <p>
            Multiple texture are accepted if they prefix with <code>texture</code> and
            the texture uniform names will be injected automatically.
          </p>
          <p class="has-preview">
            <textarea code>
              background: @shaders(
                texture_0 {
                  @grid: 1 / 100%;
                  background: linear-gradient(45deg, @stripe.@m20.@p(
                    #FFF4E0, #F8B501, #06ACB5, #17191D, #FC3D3C
                  ));
                }
                fragment {
                  void main() {
                    /* ... */
                    vec2 coords = vec2(r * cos(angle), r * sin(angle)) + c;
                    FragColor = texture(texture_0, coords);
                  }
                }
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: 1 / 8em;
              background: @shaders(
                texture1 {
                  @grid: 1 / 100%;
                  background: linear-gradient(
                    45deg,
                    @stripe.@m20.@p(#FFF4E0, #F8B501, #06ACB5, #17191D, #FC3D3C)
                  );
                }
                fragment {
                  void main() {
                    vec2 p = gl_FragCoord.xy / u_resolution.xy;
                    vec2 c = vec2(.5, .5);
                    vec2 uv = p.xy - c;
                    float R = 3.141593;
                    float len = length(uv * vec2(u_resolution.x / u_resolution.y, 1.));
                    float angle = atan(uv.y, uv.x) + R * smoothstep(.75, 0., len);
                    float r = length(uv) + .1;
                    vec2 coords = vec2(r * cos(angle), r * sin(angle)) + c;
                    FragColor = texture(texture1, coords);
                  }
                }
              );
            </css-doodle>
          </p>

          <p>
            See: <a href="https://yuanchuan.dev/add-shaders">https://yuanchuan.dev/add-shaders</a>
          </p>

        </section>


        <section>
          <h4><a name="function-@shape"></a><span>@shape(commands)</span></h4>

          <p>
            Generate <code>polygon()</code> in string used by <code>clip-path</code>. For example, to make a hexagon:
          </p>
          <p class="has-preview">
            <textarea code>
              clip-path: @shape(
                points: 6;
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: 1 / 8em;
              background: #60569e;
              clip-path: @shape(
                points: 6;
                scale: .8;
              );
            </css-doodle>
          </p>

          <p>
            If the <code>points</code> value is big enough it approximately to be a circle.
          </p>
          <p class="has-preview">
            <textarea code>
              clip-path: @shape(
                points: 100;
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: 1 / 8em;
              background: #60569e;
              clip-path: @shape(
                points: 100;
                scale: .8;
              );
            </css-doodle>
          </p>

          <div class="option-list" style="margin-top: 2em;">
            <h5>All commands</h5>
            <ul>
              <li><p><code>fill-rule</code> nonzero | evenodd; </p></li>
              <li><p><code>frame</code> number for frame size; </p></li>
              <li><p><code>points</code> number between 3 - 3600;   </p></li>
              <li><p><code>rotate</code> number in degree for rotation; </p></li>
              <li><p><code>scale</code> number for scale factor; </p></li>
              <li><p><code>move</code> a pair of value for translating <code>x, y</code> coords;</p></li>
              <li><p><code>turn</code> the angle between start/end point, defaults to be 1;</p></li>
              <li><p><code>x</code> x coordinate for cartesian equation;</p></li>
              <li><p><code>y</code> y coordinate for cartesian equation;  </p></li>
              <li><p><code>r</code> polar equation;</p></li>
            </ul>
          </div>

          <div class="option-list">
            <h5>Operations in equations</h5>
            <ul>
              <li>
                <p>
                  Operations available:
                  <code>+</code>,
                  <code>-</code>,
                  <code>*</code>,
                  <code>/</code>,
                  <code>%</code>,
                  <code>^</code>.
                </p>
              </li>
              <li>
                <p>
                  All JavaScript Math functions and constants are supported.
                  Such as
                  <code>sin</code>,
                  <code>cos</code>,
                  <code>tan</code>,
                  <code>abs</code>,
                  <code>pow</code>,
                  <code>PI</code> or <code>π</code> etc.
                </p>
              </li>
            </ul>
          </div>

          <p class="has-preview">
            <textarea code>
              clip-path: @shape(
                points: 300;
                r: cos(4t);
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: 1 / 8em;
              background: #60569e;
              clip-path: @shape(
                points: 300;
                r: cos(4t);
                scale: .8;
              );
            </css-doodle>
          </p>

          <p>
            See more examples here: <a href="https://css-doodle.com/shapes/">https://css-doodle.com/shapes</a>.
          </p>

        </section>

        <section>
          <h4><a name="function-@plot"></a><span>@plot(commands)</span></h4>

          <p>
            Generate two values in percent and seperated with space.
            The syntax is the same with <a href="#function-@shape"#>@shape</a>.
          </p>
          <p class="has-preview">
            <textarea code>
              background: @m50(
                radial-gradient(#60569e 50%, #0000 0)
                @plot(r: .8) / 5px 5px
                no-repeat
              );
            </textarea>
            <css-doodle>
              @grid: 1 / 8em;
               background: @m50(
                radial-gradient(#60569e 50%, #0000 0)
                @plot(r: .8) / 5px 5px
                no-repeat
              );
            </css-doodle>
          </p>

          <p>
          </p>
          <p class="has-preview">
            <textarea code>
              @grid: 100x1 / 200px;
              @size: 5px;
              border-radius: 50%;
              border: 1px solid #60569e;

              @place: @plot(
                r: sin(-t/2);
                move: 0 -.3;
                rotate: 90;
              );
            </textarea>
            <css-doodle click-to-update>
              @grid: 50x1 / 8em;
              @size: 5px;
              border-radius: 50%;
              border: 1px solid #60569e;

              @place: @plot(
                r: sin(-t/2);
                move: 0 -.3;
                rotate: 90;
              );
            </css-doodle>
          </p>
        </section>

      </article>

      <section class="example">
        <div class="container">
          <css-doodle>
            @grid: 20 / 100vmax / #0a0c27;
            @content: @unicode.r(0x2500, 0x257f);
            color: hsla(@r360, 70%, 70%, @r.9);
            font-size: 8vmin;
            font-family: sans-serif;
          </css-doodle>
        </div>
        <textarea code data-link="https://codepen.io/yuanchuan/pen/dyprLgO"></textarea>
      </section>

      <article class="wrap js-api">
        <h3><a name="js-api"></a>JS API </h3>
        <section>
          <h4><a name="js-api-grid"></a><span>grid</span></h4>
          <p>Getter/setter for the <code>grid</code> attribute on the element. </p>
          <p>
            <textarea code>
              const doodle = document.querySelector('css-doodle');

              /* Note that the grid value inside the :doodle selector has higher
                 priority than the attribute value on the element. So this setter
                 operation may not have an affect on the final grid value. */
              doodle.grid = "5";

              console.log(doodle.grid);
              /* { x: 5, y: 5, size: 25 } */
            </textarea>
          </p>
        </section>
        <section>
          <h4><a name="js-api-use"></a><span>use</span></h4>
          <p>Getter/setter for the <code>use</code> attribute on the element. </p>
          <p>
            <textarea code>
              const doodle = document.querySelector('css-doodle');
              doodle.use = 'var(--my-rule)';

              console.log(doodle.use);
              /* var(--my-rule) */
            </textarea>
          </p>
        </section>
        <section>
          <h4><a name="js-api-seed"></a><span>seed</span></h4>
          <p>Getter/setter for the <code>seed</code> attribute on the element. </p>
          <p>
            <textarea code>
              const doodle = document.querySelector('css-doodle');
              doodle.seed = 'my random seed';

              console.log(doodle.seed);
              /* my random seed */
            </textarea>
          </p>
        </section>
        <section>
          <h4><a name="js-api-update"></a><span>update([styles])</span></h4>
          <p>Re-render the component (with given styles).</p>
          <p>
            <textarea code>
              const doodle = document.querySelector('css-doodle');

              /* update styles and refresh */
              doodle.update(`
                @grid: 6 / 8em;
                background: rebeccapurple;
                margin: .5px;
              `);

              /* just refresh */
              doodle.update();
            </textarea>
          </p>
        </section>
        <section>
          <h4><a name="js-api-export"></a><span>export([options])</span></h4>
          <p>
            Export <code>css-doodle</code> element as an image.
            Returns a <code>Promise</code> object which holds the information of the exported image.</p>
          <div class="option-list">
            <h5>Options</h5>
            <ul>
              <li>
                <p>
                  <code>scale: Integer</code> Scale factor of the exported image. Default <code>1</code>.
                </p>
              </li>
              <li>
                <p>
                  <code>detail: Boolean</code> Returns detailed information of the image, eg. blob size. Default <code>false</code>.
                </p>
              </li>
              <li>
                <p>
                  <code>download: Boolean</code> Download the image or not. Default <code>false</code>.
                </p>
              </li>
              <li>
                <p>
                  <code>name: String</code> Saved name for download. Defaults to be the current timestamp.
                </p>
              </li>
            </ul>
          </div>

          <div class="has-preview example-export">
            <textarea code>
              button.addEventListener('click', async e => {
                let result = await doodle.export({
                  scale: 8,
                  download: true
                });
                /* open Dev tools to see the result */
                console.log(result);
              });
            </textarea>
            <div class="example-export__preview">
              <css-doodle click-to-update>
                @grid: 7 / 8em;
                --c: #FFF4E0, #F8B501, #06ACB5, #17191D, #FC3D3C;
                background: @p(--c);
                @content: @Svg(
                  viewBox: -5 -5 10 10;
                  circle {
                    r: @r(1, 2);
                    fill: @p(--c);
                  }
                  circle*4 {
                    r: 6;
                    cx, cy: @pd(-6 -6, 6 6, 6 -6, -6 6);
                    fill: @p(--c);
                  }
                );
              </css-doodle>
              <button type="button" aria-label="save to png">Save to PNG</button>
              <script>
                let doodle = document.querySelector('.example-export css-doodle');
                let button = document.querySelector('.example-export button');
                if (button) {
                  button.addEventListener('click', e => {
                    button.disabled = true;
                    doodle.export({ download: true, scale: 8 })
                      .then(data => {
                        console.log(data);
                        setTimeout(() => {
                          button.disabled = false;
                        }, 800);
                      })
                      .catch(err => {
                        console.error(err);
                        button.disabled = false;
                      });
                  });
                }
              </script>
            </div>
          </div>
        </section>
      </article>
    </section>

  </div>

  <footer>
    <div class="about wrap">
      <div class="info">
        <h2>Dedicated to people who <span><css-doodle use="var(--heart)"></css-doodle> CSS.</span></h2>

        <p class="info__copyright">
          Project by <a href="https://yuanchuan.dev">yuanchuan</a>. MIT Licensed.
        </p>
        <ul class="info__social">
          <li>
            <a href="https://twitter.com/css_doodle" aria-label="link to css-doodle twitter account">
              <svg viewBox="0 0 24 24"><path fill="currentColor" d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13 4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568 4.692 4.692 0 0 1-2.104.08 4.661 4.661 0 0 0 4.352 3.234 9.348 9.348 0 0 1-5.786 1.995 9.5 9.5 0 0 1-1.112-.065 13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41z"> </path> </svg>
            </a>
          </li>

          <li>
            <a href="https://github.com/css-doodle/css-doodle" aria-label="link to css-doodle github repo">
              <svg viewBox="0 0 16 16" version="1.1"> <path fill="currentColor" fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"> </path> </svg>
            </a>
          </li>
          <li>
            <a href="https://codepen.io/collection/XyVkpQ/" aria-label="link to codepen collection of css-doodle">
              <svg viewBox="0 0 100 100">
                <path
                  fill="currentColor"
                  d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z">
                </path>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://discord.gg/PWCAbyNg7j" aria-label="link to discord">
              <svg viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="currentColor">
                <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero" />
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <css-doodle use="var(--flags2)" grid="30x1"></css-doodle>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/mode/css/css.min.js"></script>
  <script src="main.js?f6d367ed67e79dca2aae2cc22f551a87"></script>
</body>
</html>