unit sub MAIN($out);


my $doc = q:to/EOP/;
  <?xml version="1.0" encoding="utf-8"?>
  <svg xmlns="http://www.w3.org/2000/svg"
       width="1152" height="179"
       viewBox="-53 -1 1151 175"
       preserveAspectRatio="xMinYMin meet">

  <style><![CDATA[
    @import url(../fonts/muller/muller.css);

    :root { --hue: 300; }

    rect, .textbg {
      filter:       drop-shadow(6px 6px 2px oklch(0.4 0.2 var(--hue) / 0.45));
      transition:   fill 0.2s ease;
      fill:         lightgray;
      stroke:       black;
      stroke-width: 1;
    }

    text {
      font-family: 'Muller', sans-serif;
      text-anchor: end;
    }

    .item { --text: black; }
    .item :is(text, use) { fill: var(--text); }

    .name {
      font-weight: 700;
      font-size:   25px;
    }

    .hex {
      font-family: monospace;
      font-weight: 500;
      font-size:   15px;
    }
  ]]></style>
  EOP

sub make-item($layer, :$display = $layer, :$use-vit?, :$vit?) { ... }

make-item 'outer', upper => 'vitiligo1';
make-item 'spines', use => 'vitiligo1';
make-item 'stripes', upper => 'cuffs', display => 'socks';
make-item 'belly1', upper => 'vitiligo2';
make-item 'belly2', upper => 'vitiligo3';
make-item 'fins1', upper => 'vitiligo4';
make-item 'fins2', use => 'vitiligo4';
make-item 'fins3', use => 'vitiligo4';
make-item 'masks';
make-item 'claws';
make-item 'eyes';

$doc ~= '</svg>';

$out.IO.spurt: $doc;




sub make-item($layer, :$display = $layer, :$use?, :$upper?) {
  state $index = 0;
  my $str =
    qq[<g class="item" id="i-$layer" transform="translate({$index * 100} 0)">\n];
  with $upper {
    $str ~= qq{
      <rect width="80" height="25" id="s-$upper" />
      <rect width="80" height="50" y="30" id="s-$layer" />
    };
  } orwith $use {
    $str ~= qq{
      <use href="#s-$use" />
      <rect width="80" height="50" y="30" id="s-$layer" />
    };
  } else {
    $str ~= qq{ <rect width="80" height="80" id="s-$layer" /> };
  }

  $str ~= qq{
    <polygon id="p-$layer" class="textbg" points="0,85 80,85 28,175 -52,175" />
  };

  with $upper {
    $str ~= qq{
      <text class="name" x="20" y="100" transform="rotate(-60 20 100)">
        $display
      </text>
      <text id="c-$layer" class="hex" x="42" y="102" transform="rotate(-60 42 102)">
        #??????
      </text>
      <text id="c-$upper" class="hex" x="64" y="102" transform="rotate(-60 64 102)">
        #??????
      </text>
    };
  } orwith $use {
    $str ~= qq{
      <text class="name" x="20" y="100" transform="rotate(-60 20 100)">
        $layer
      </text>
      <text id="c-$layer" class="hex" x="42" y="102" transform="rotate(-60 42 102)">
        #??????
      </text>
      <use href="#c-$use" />
    };
  } else {
    $str ~= qq{
      <text class="name" x="25" y="100" transform="rotate(-60 25 100)">
        $layer
      </text>
      <text id="c-$layer" class="hex" x="47" y="102" transform="rotate(-60 47 102)">
        #??????
      </text>
    };
  }
  $str ~= qq{ </g> };

  $index++;

  $doc ~= $str
}