125 lines
2.9 KiB
Raku
125 lines
2.9 KiB
Raku
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
|
|
}
|