# Draw me a shape

The game shapez.io has a lot of shapes. In my previous challenge, the object was to generate a random code for a shape. Now, your challenge is to render a shape.

# Specs

## Shapes

Each shape has a unique shortcode, for example:

is CrWgRuSp - clockwise from top right, red circle, green wedge, uncolored rectangle, purple star.

A quadrant is one of Rectangle (R), Circle (C), Star (S) or Wedge (W) painted with one of the below colours. The shortcode for these quadrants is the code for the shape concatenated to the code for the color, so a yellow star would be Sy. A quadrant can also be empty, with the code --.

Four quadrants concatenated together make a layer, the quadrants going clockwise from top-right. Layers will never be empty (--------).

Finally, between one and four layers stacked on top of each other (joined by :, lowest first) make a shape. For example, CyCyCyCy:SrSrSrSr looks like:

## Colours

The colours are as follows:

• uncolored / u / grey - #AAAAAA
• red / r - #FC666A
• blue / b - #66A7FF
• green / g - #78FF65
• purple / p - #DD66FF
• yellow / y - #FDF52A
• cyan / c - #87FFF5
• white / w - #FFFFFF
• border - #555555

## Sizes

Given a constant $$\a\$$, the width of a single border, the shape sizes are as follows:

Shape Spec Image
Circle A perfectly circular arc going out to 9a each way
Rectangle A square with side 9a
Wedge A shape with one side going out to 9a, the other going along the base to 5.75a before going diagonally to 9a.
Star Both edges going out to 5.75a before going diagonally out to 9a and meeting up.

These need to be multiplied by the scale factor for the correct layer:

• layer 1 (bottom) - 1
• layer 2 - $$\\frac{7}{9}\$$
• layer 3 - $$\\frac{19}{36}\$$
• layer 4 - $$\\frac{5}{18}\$$

You should render your shape with a value of $$\a ≥ 10\$$ pixels - your choice of the size.

Note: All sizes are approximations - If you have a better estimate, let me know.

All sizes are flexible within 1%.

You may take either a shape shortcode (layers joined by :), a list of layer shortcodes, or a list of lists of quadrant shortcodes.

# Scoring

This is , shortest wins!

# Testcases

CyCyCyCy:SrSrSrSr -

CuCuCuCu:------Cy -

------Cg:------Cr -

CrSyWgRb -

Cr------:------Cr:Cr------:------Cr -

Note that you don't have to render the pale-grey circle in the background.

• Will a ascii art approximation be valid?
– jdt
Aug 30 '21 at 1:39
• @JohanduToit No, has to be graphical. You can output as, say, PBM or SVG though. Aug 30 '21 at 1:39
• In java, when using lambdas, can you prep the window in advance and in the function only do the graphical stuff or do you need to also create the window in the function itself? Aug 30 '21 at 5:52
• @Jadefalke I don't think so, as it needs to be a full function/ program which draws a shape when run. Aug 30 '21 at 7:10

## JavaScript (ES10) + SVG (HTML5), 407387365 340 bytes

g=s=>s.split:.map(s=>s.match(/../g)||[]);f=
l=>'<svg viewBox=-1350,-1350,2700,2700 stroke=#555>'+l.map((q,i)=>q.map(([s,c],o)=><path d=M0,0v-${{C:'36a36,36,0,0,1,36,',R:'36h36v',W:'23l36,-13v',S:'23l36,-13l-13,'}[s]}36z fill=#${"FDF52A/FC666A/66A7FF/87FFF5/AAA//FFF/78FF65/D6F".split/[parseInt(c,36)%17%9]} transform=rotate(${o*90})scale(${q=35-i*9+!i}) stroke-width=\${108/q} />))
<input oninput=o.innerHTML=f(g(this.value))><div id=o>

Takes input as a list of list and outputs SVG source parseable by HTML5. Note that as it's scalable I can't really specify what the value of a is, it's always just big enough to fit the width of the window. At the start is the svg element definition, followed by a path element for each of the (possibly 16) quadrants, sized, coloured and rotated appropriately. Edit: Saved 22 bytes thanks to @Arnauld (although 7 of those bytes should have been obvious, sigh...). Saved a further 18 bytes directly and 7 bytes indirectly thanks to @JohanduToit.

• Nice! You can take a list of layers, so you don't need to split by :. Aug 30 '21 at 19:43
• @emanresuA Sure, once I can work out how to amend the snippet to pass a list of lists...
– Neil
Aug 30 '21 at 20:26
• <input oninput='o.innerHTML=f(this.value.split:)'><div id=o>, or just create a wrapper for f that splits by : before calling. Aug 30 '21 at 20:29
• @emanresuA As I mentioned, I might as well pass a list of lists if I can...
– Neil
Aug 30 '21 at 20:46
• Do that then. f(this.value.split:.map(x=>x.match(/../g))). Aug 30 '21 at 20:49

# LaTeX+Tikz, 770 bytes

This solution uses tikz's scope to implement the rotating and scaling.

\documentclass{standalone}\usepackage{xcolor,tikz}\usetikzlibrary{math}\begin{document}\def\h#1{\definecolor#1{HTML}}\h u{AAAAAA}\h r{FC666A}\h h{66A7FF}\h g{78FF65}\h p{DD66FF}\h y{FDF52A}\h c{87FFF5}\h w{FFFFFF}\def\R#1{\draw[fill=#1]rectangle(,);}\def\C#1{\draw[fill=#1](0,0)--(0,1)arc(90:0:1cm)--cycle;}\def\W#1{\draw[fill=#1](0,0)-|(,)--(0,0.639)--cycle;}\def\S#1{\draw[fill=#1](0,0)--(0,0.639)--(1,1)--(0.639,0)--cycle;}\expandafter\def\csname-\endcsname#1{\path(0,0)--(,);}\def\c#1#2{\csname#1\endcsname{#2}}\def~#1{\tikz[draw=black!66,line width=.11cm]{\def\a{#1}\foreach\l[count=\i from 0]in\a{\begin{scope}[scale=(37-9*\i+!\i)/36]\foreach\q[count=\j from 0]in\l\begin{scope}[rotate around={-90*\j:(0,0)}]{\expandafter\c\q}\end{scope};\end{scope}}}}\enddocument


## Result

This is the resulting pdf converted to svg with inkscape:

<!-- Created with Inkscape (http://www.inkscape.org/) --><svg   version="1.1"   id="svg2"   xml:space="preserve"   width="922.13867"   height="83.568001"   viewBox="0 0 922.13867 83.568001"   sodipodi:docname="document.svg"   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"   xmlns="http://www.w3.org/2000/svg"   xmlns:svg="http://www.w3.org/2000/svg"><defs     id="defs6" /><sodipodi:namedview     id="namedview4"     pagecolor="#ffffff"     bordercolor="#666666"     borderopacity="1.0"     inkscape:pageshadow="2"     inkscape:pageopacity="0.0"     inkscape:pagecheckerboard="0"     showgrid="false"     inkscape:zoom="5.5349593"     inkscape:cx="702.53453"     inkscape:cy="45.980465"     inkscape:window-width="1920"     inkscape:window-height="1042"     inkscape:window-x="0"     inkscape:window-y="18"     inkscape:window-maximized="1"     inkscape:current-layer="g8" /><g     id="g8"     inkscape:groupmode="layer"     inkscape:label="document"     transform="matrix(1.3333333,0,0,-1.3333333,0,83.568)"><g       id="g10"       transform="translate(83.002,29.921)"><g         id="g12"><g           id="g14"><g             id="g16"><g               id="g18"><g                 id="g20"><path                   d="M 0,0 V 29.92122 H 29.92122 V 0 Z"                   style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                   id="path22" /></g></g><g               id="g24" /><g               id="g26" /><g               id="g28" /></g></g></g><g         id="g30"         transform="translate(71.212)"><g           id="g32"><g             id="g34"><g               id="g36"><g                 id="g38"><g                   id="g40"><path                     d="M 0,0 V 29.92122 C 16.52524,29.92122 29.92122,16.52524 29.92122,0 Z"                     style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                     id="path42" /></g></g><g                 id="g44" /><g                 id="g46" /><g                 id="g48" /></g></g></g><g           id="g50"           transform="translate(71.211)"><g             id="g52"><g               id="g54"><g                 id="g56"><g                   id="g58"><g                     id="g60"><path                       d="M 0,0 H 29.92122 V 29.92122 L 0,19.11987 Z"                       style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                       id="path62" /></g></g><g                   id="g64" /><g                   id="g66" /><g                   id="g68" /></g></g></g><g             id="g70"             transform="translate(71.212)"><g               id="g72"><g                 id="g74"><g                   id="g76"><g                     id="g78"><g                       id="g80"><path                         d="M 0,0 V 19.11987 L 29.92122,29.92122 19.11987,0 Z"                         style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                         id="path82" /></g></g><g                     id="g84" /><g                     id="g86" /><g                     id="g88" /></g></g></g><g               id="g90"               transform="translate(72.629,1.417)"><g                 id="g92"><g                   id="g94"><g                     id="g96"><g                       id="g98"><g                         id="g100"><path                           d="M 0,0 V 29.92122 C 16.52524,29.92122 29.92122,16.52524 29.92122,0 Z"                           style="fill:#fdf52a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path102" /></g></g><g                       id="g104"><g                         id="g106"><path                           d="M 0,0 H 29.92122 C 29.92122,-16.52524 16.52524,-29.92122 0,-29.92122 Z"                           style="fill:#fdf52a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path108" /></g></g><g                       id="g110"><g                         id="g112"><path                           d="m 0,0 v -29.92122 c -16.52524,0 -29.92122,13.39598 -29.92122,29.92122 z"                           style="fill:#fdf52a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path114" /></g></g><g                       id="g116"><g                         id="g118"><path                           d="m 0,0 h -29.92122 c 0,16.52524 13.39598,29.92122 29.92122,29.92122 z"                           style="fill:#fdf52a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path120" /></g></g></g><g                     id="g122"><g                       id="g124"><g                         id="g126"><path                           d="M 0,0 V 14.08838 L 22.04732,22.04732 14.08838,0 Z"                           style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path128" /></g></g><g                       id="g130"><g                         id="g132"><path                           d="M 0,0 H 14.08838 L 22.04732,-22.04732 0,-14.08838 Z"                           style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path134" /></g></g><g                       id="g136"><g                         id="g138"><path                           d="M 0,0 V -14.08838 L -22.04732,-22.04732 -14.08838,0 Z"                           style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path140" /></g></g><g                       id="g142"><g                         id="g144"><path                           d="M 0,0 H -14.08838 L -22.04732,22.04732 0,14.08838 Z"                           style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                           id="path146" /></g></g></g></g></g><g                 id="g148"                 transform="translate(72.629)"><g                   id="g150"><g                     id="g152"><g                       id="g154"><g                         id="g156"><g                           id="g158"><path                             d="M 0,0 V 29.92122 C 16.52524,29.92122 29.92122,16.52524 29.92122,0 Z"                             style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                             id="path160" /></g></g><g                         id="g162"><g                           id="g164"><path                             d="M 0,0 H 29.92122 C 29.92122,-16.52524 16.52524,-29.92122 0,-29.92122 Z"                             style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                             id="path166" /></g></g><g                         id="g168"><g                           id="g170"><path                             d="m 0,0 v -29.92122 c -16.52524,0 -29.92122,13.39598 -29.92122,29.92122 z"                             style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                             id="path172" /></g></g><g                         id="g174"><g                           id="g176"><path                             d="m 0,0 h -29.92122 c 0,16.52524 13.39598,29.92122 29.92122,29.92122 z"                             style="fill:#a8a8a8;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                             id="path178" /></g></g></g><g                       id="g180"><g                         id="g182" /><g                         id="g184" /><g                         id="g186" /><g                         id="g188"><g                           id="g190"><path                             d="m 0,0 h -22.04732 c 0,12.17654 9.87078,22.04732 22.04732,22.04732 z"                             style="fill:#fdf52a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                             id="path192" /></g></g></g></g></g><g                   id="g194"                   transform="translate(72.63,-1.417)"><g                     id="g196"><g                       id="g198"><g                         id="g200"><g                           id="g202" /><g                           id="g204" /><g                           id="g206" /><g                           id="g208"><g                             id="g210"><path                               d="m 0,0 h -29.92122 c 0,16.52524 13.39598,29.92122 29.92122,29.92122 z"                               style="fill:#78ff65;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                               id="path212" /></g></g></g><g                         id="g214"><g                           id="g216" /><g                           id="g218" /><g                           id="g220" /><g                           id="g222"><g                             id="g224"><path                               d="m 0,0 h -22.04732 c 0,12.17654 9.87078,22.04732 22.04732,22.04732 z"                               style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                               id="path226" /></g></g></g></g></g><g                     id="g228"                     transform="translate(71.211,1.417)"><g                       id="g230"><g                         id="g232"><g                           id="g234"><g                             id="g236"><g                               id="g238"><path                                 d="M 0,0 V 29.92122 C 16.52524,29.92122 29.92122,16.52524 29.92122,0 Z"                                 style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                 id="path240" /></g></g><g                             id="g242"><g                               id="g244"><path                                 d="M 0,0 H 19.11987 L 29.92122,-29.92122 0,-19.11987 Z"                                 style="fill:#fdf52a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                 id="path246" /></g></g><g                             id="g248"><g                               id="g250"><path                                 d="M 0,0 H -29.92122 V -29.92122 L 0,-19.11987 Z"                                 style="fill:#78ff65;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                 id="path252" /></g></g><g                             id="g254"><g                               id="g256"><path                                 d="M 0,0 H -29.92122 V 29.92122 H 0 Z"                                 style="fill:#66a7ff;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                 id="path258" /></g></g></g></g></g><g                       id="g260"                       transform="translate(71.212,-1.417)"><g                         id="g262"><g                           id="g264"><g                             id="g266"><g                               id="g268"><g                                 id="g270"><path                                   d="M 0,0 V 29.92122 C 16.52524,29.92122 29.92122,16.52524 29.92122,0 Z"                                   style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                   id="path272" /></g></g><g                               id="g274" /><g                               id="g276" /><g                               id="g278" /></g><g                             id="g280"><g                               id="g282" /><g                               id="g284" /><g                               id="g286" /><g                               id="g288"><g                                 id="g290"><path                                   d="m 0,0 h -22.04732 c 0,12.17654 9.87078,22.04732 22.04732,22.04732 z"                                   style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                   id="path292" /></g></g></g><g                             id="g294"><g                               id="g296"><g                                 id="g298"><path                                   d="M 0,0 V 14.9606 C 8.26262,14.9606 14.9606,8.26262 14.9606,0 Z"                                   style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                   id="path300" /></g></g><g                               id="g302" /><g                               id="g304" /><g                               id="g306" /></g><g                             id="g308"><g                               id="g310" /><g                               id="g312" /><g                               id="g314" /><g                               id="g316"><g                                 id="g318"><path                                   d="m 0,0 h -7.8739 c 0,4.34868 3.52522,7.8739 7.8739,7.8739 z"                                   style="fill:#fc666a;fill-opacity:1;fill-rule:nonzero;stroke:#575757;stroke-width:2.83484;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"                                   id="path320" /></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></svg>

## Formatted Code and Usage

\documentclass{standalone}
\usepackage{xcolor,tikz}
\usetikzlibrary{math}
\begin{document}
% define the color shorthands
\def\h#1{\definecolor#1{HTML}}
\h u{AAAAAA}
\h r{FC666A}
\h b{66A7FF}
\h g{78FF65}
\h p{DD66FF}
\h y{FDF52A}
\h c{87FFF5}
\h w{FFFFFF}
% define commands that draw a shape
\def\R#1{\draw[fill=#1]rectangle(,);}
\def\C#1{\draw[fill=#1](0,0)--(0,1)arc(90:0:1cm)--cycle;}
\def\W#1{\draw[fill=#1](0,0)-|(,)--(0,0.639)--cycle;}
\def\S#1{\draw[fill=#1](0,0)--(0,0.639)--(1,1)--(0.639,0)--cycle;}
\expandafter\def\csname-\endcsname#1{\path(0,0)--(,);}
% define the command that parses the shape and the colour and calls the shape command
\def\c#1#2{\csname#1\endcsname{#2}}
\def~#1{
\tikz[draw=black!66,line width=.11cm]{
\def\a{#1}
\foreach \l [count=\i from 0] in \a{
\begin{scope}[scale=(37-9*\i+!\i)/36]
\foreach \q [count=\j from 0] in \l
\begin{scope}[rotate around={-90*\j:(0,0)}]{
\expandafter\c\q
}
\end{scope}
;
\end{scope}
}
}
}
~{{Ru,--,--,--}}
~{{Cu,--,--,--}}
~{{Wu,--,--,--}}
~{{Su,--,--,--}}

~{{Cy,Cy,Cy,Cy},{Sr,Sr,Sr,Sr}}
~{{Cu,Cu,Cu,Cu},{--,--,--,Cy}}
~{{--,--,--,Cg},{--,--,--,Cr}}

~{{Cr,Sy,Wg,Rb}}
~{{Cr,--,--,--},{--,--,--,Cr},{Cr,--,--,--},{--,--,--,Cr}}
\enddocument
$$$$
`