<style>
  css-doodle {
    --color: @p(#fa4659, #feffe4, #a3de83, #2eb872);
    --bg-color: #2a0d5f;
    --border-style: 2px @p(dashed, solid, dotted) var(--color);
    --rule: (
      :doodle {
        @grid: 200x1 / 80vmin 60vmin;
        @max-size: 800px 600px;
        background: var(--bg-color);
        overflow: hidden;
      }
      :container {
        transform: rotateX(45deg) rotate(45deg) scale(2);
        grid-template-rows: auto;
        grid-template-columns: repeat(auto-fill, calc(.5em + 1vmin));
        grid-auto-rows: calc(.5em + 1vmin);
        grid-auto-flow: dense;
      }

      grid-row-end: span @p(2, 4);
      grid-column-end: span @lp();
      margin: -1px;
      border: var(--border-style);
      outline: var(--border-style);
      outline-offset: -8px;
      background:
        linear-gradient(@r(360deg), var(--color), var(--color))
        50% 50% / calc(8% + 1px) calc(8% + 1px) no-repeat;

      :after, :before {
        content: '';
        position: absolute;
        margin: auto;
        outline: var(--border-style);
        outline-offset: 2px;
        @size: @pn(25%, 50%);
      }
    )
  }
</style>

<graph>
  <css-doodle click-to-update use="var(--rule)"></css-doodle>
</graph>