Skip to content

SVG cheatsheet

Published:

What is SVG

Scalable Vector Graphics (SVG) is an XML-based image format for representing two-dimensional vector graphics. Unlike raster formats, such as JPEG or PNG, SVG uses a textual description with the image’s geometric data, making it scalable without loss of quality.

Structure of an SVG file

An SVG file consists of an <svg> element that contains all other elements. This element can contain attributes to define the image’s dimensions, background color, and other properties.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Graphic elements -->
</svg>

Cookbook

Draw a rectangle

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

Draw a circle

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Draw a polygon

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,100 50,25 50,75 100,0" />
    <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

Draw a path

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

The d attribute of the <path> defines the path to be drawn. The following table lists the commands and their corresponding letters:

ComandoLetteraDescrizione
MoveToM mMove to a new position
LineToL lDraws a line to a new position
Horizontal LineToH hDraws a horizontal line
Vertical LineToV vDraws a vertical line
Cubic Bézier curveC cDraws a cubic Bézier curve
Smooth Cubic Bézier curveS sDraws a smooth cubic Bézier curve
Quadratic Bézier curveQ qDraws a quadratic Bézier curve
Smooth Quadratic Bézier curveT tDraws a smooth quadratic Bézier curve
Elliptical arc curveA aDraws an elliptical arc curve
ClosePathZ zCloses the current path

Commands can be used in uppercase or lowercase. Uppercase letters indicate absolute coordinates, while lowercase letters indicate relative movement from the current position.

Draw text

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-family="Arial" font-size="16" fill="black">Hello, world!</text>
</svg>
Hello, world!

Handle light and dark mode

<svg id="logo" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <style>
        #logo * {
            fill: #000;
        }

        @media (prefers-color-scheme: dark) {
            #logo * {
                    fill: #fff;
            }
        }
    </style>
    <rect x="0" y="0" width="100" height="100" />
</svg>

Linear gradient

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <defs>
		<linearGradient id="background" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:white" />
			<stop offset="100%" style="stop-color:black" />
		</linearGradient>
	</defs>
    <rect x="10" y="10" width="80" height="80" fill="url(#background)" />
</svg>

Loading animation

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 20" style="width: 100%; height: 30px">
    <style>
        @keyframes loading-animation {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
    <rect stroke-width="1" stroke="rgb(106, 164, 68)" fill="none" x="2" y="2" width="296" height="16" rx="7" ry="7" />
    <path d="M 10 10 L 290 10" stroke-linecap="round" fill="none" stroke="rgb(156, 204, 108)" stroke-width="16"
        stroke-dasharray="280" style="
    animation: 5s cubic-bezier(0,.26,.24,1) 0s infinite normal none running loading-animation;
    stroke-dashoffset: 279;
    " />
</svg>

Arrows and wavy lines

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    viewBox="0 0 202.006 110.386">
    <style>
        line {
            stroke: white;
            stroke-width: 1;
        }

        #wiggle>* {
            stroke: white;
            fill: none;
        }

        .dashed {
            stroke-dasharray: 5, 5;
        }
    </style>
    <defs>
        <marker id='head' orient="auto" markerWidth='6' markerHeight='4' refX='0.1' refY='2'>
            <polygon points="0,0 0,4 6,2" fill="black" />
        </marker>
        <pattern id="wiggle" viewBox="0 0 8 6" height="8" width="8" patternUnits="userSpaceOnUse">
            <path d="M 0 4 Q 2 8, 4 4 T 8 4" />
        </pattern>
    </defs>
    <g>
        <rect fill="url(#wiggle)" x="0" y="0" width="40" height="8" transform="
translate(58 28)
rotate(90)
" />
        <rect fill="url(#wiggle)" x="0" y="0" width="68" height="8" transform="
translate(164 30)
rotate(90)
" />
        <line x1="60" y1="24" x2="125" y2="24" marker-end='url(#head)' />
        <line x1="73" y1="79" x2="130" y2="101" marker-end='url(#head)' />
        <line class="dashed" x1="60" y1="32" x2="150" y2="95" marker-end='url(#head)' />
    </g>
</svg>

Rubik’s cube 3D wireframe animation

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1.5 -1.5 3 3">
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.7279 0.0063, -0.7074 0.4043, -1.0828 0.6210, -1.1151 0.2175"> </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.7501 -0.4244, -0.7283 -0.0021, -1.1158 0.2090, -1.1501 -0.2199"> </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.7736 -0.8822, -0.7505 -0.4333, -1.1508 -0.2289, -1.1874 -0.6855; -0.7249 -0.9218, -0.7034 -0.4745, -1.1330 -0.2954, -1.1686 -0.7496; -0.6692 -0.9583, -0.6494 -0.5125, -1.1033 -0.3599, -1.1377 -0.8117; -0.6071 -0.9916, -0.5893 -0.5472, -1.0625 -0.4219, -1.0953 -0.8712; -0.5394 -1.0214, -0.5236 -0.5782, -1.0111 -0.4806, -1.0421 -0.9276; -0.4667 -1.0473, -0.4531 -0.6053, -0.9501 -0.5357, -0.9789 -0.9805; -0.3898 -1.0694, -0.3785 -0.6282, -0.8802 -0.5866, -0.9067 -1.0295; -0.3094 -1.0873, -0.3004 -0.6469, -0.8023 -0.6331, -0.8262 -1.0741; -0.2262 -1.1010, -0.2197 -0.6612, -0.7172 -0.6749, -0.7384 -1.1141; -0.1411 -1.1104, -0.1370 -0.6710, -0.6258 -0.7115, -0.6443 -1.1492; -0.0547 -1.1154, -0.0531 -0.6762, -0.5291 -0.7429, -0.5446 -1.1793; 0.0322 -1.1159, 0.0312 -0.6768, -0.4279 -0.7687, -0.4404 -1.2040; 0.1187 -1.1121, 0.1153 -0.6728, -0.3232 -0.7889, -0.3326 -1.2234; 0.2043 -1.1038, 0.1984 -0.6642, -0.2157 -0.8034, -0.2220 -1.2373; 0.2880 -1.0913, 0.2797 -0.6511, -0.1065 -0.8120, -0.1096 -1.2455; 0.3692 -1.0744, 0.3585 -0.6335, 0.0035 -0.8148, 0.0036 -1.2482; -0.7736 -0.8822, -0.7505 -0.4333, -1.1508 -0.2289, -1.1874 -0.6855">
        </animate>
    </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.3552 -0.1970, -0.3455 0.1955, -0.6999 0.4001, -0.7202 0.0021"> </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.3658 -0.6210, -0.3555 -0.2052, -0.7206 -0.0063, -0.7421 -0.4285"> </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.3769 -1.0708, -0.3660 -0.6297, -0.7426 -0.4374, -0.7655 -0.8861; -0.2964 -1.0880, -0.2878 -0.6477, -0.6948 -0.4780, -0.7161 -0.9252; -0.2132 -1.1011, -0.2070 -0.6613, -0.6404 -0.5156, -0.6598 -0.9612; -0.1281 -1.1098, -0.1244 -0.6704, -0.5798 -0.5497, -0.5973 -0.9940; -0.0420 -1.1141, -0.0408 -0.6749, -0.5138 -0.5802, -0.5293 -1.0232; 0.0446 -1.1140, 0.0433 -0.6748, -0.4431 -0.6067, -0.4563 -1.0487; 0.1307 -1.1096, 0.1270 -0.6701, -0.3683 -0.6291, -0.3793 -1.0702; 0.2157 -1.1007, 0.2095 -0.6609, -0.2902 -0.6472, -0.2988 -1.0876; 0.2988 -1.0876, 0.2902 -0.6472, -0.2095 -0.6609, -0.2157 -1.1007; 0.3793 -1.0702, 0.3683 -0.6291, -0.1270 -0.6701, -0.1307 -1.1096; 0.4563 -1.0487, 0.4431 -0.6067, -0.0433 -0.6748, -0.0446 -1.1140; 0.5293 -1.0232, 0.5138 -0.5802, 0.0408 -0.6749, 0.0420 -1.1141; 0.5973 -0.9940, 0.5798 -0.5497, 0.1244 -0.6704, 0.1281 -1.1098; 0.6598 -0.9612, 0.6404 -0.5156, 0.2070 -0.6613, 0.2132 -1.1011; 0.7161 -0.9252, 0.6948 -0.4780, 0.2878 -0.6477, 0.2964 -1.0880; 0.7655 -0.8861, 0.7426 -0.4374, 0.3660 -0.6297, 0.3769 -1.0708; -0.3769 -1.0708, -0.3660 -0.6297, -0.7426 -0.4374, -0.7655 -0.8861">
        </animate>
    </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.0034 -0.3889, -0.0033 -0.0019, -0.3385 0.1915, -0.3480 -0.2009"> </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.0035 -0.8062, -0.0034 -0.3970, -0.3482 -0.2092, -0.3583 -0.6248"> </polygon>
    <polygon stroke="orange" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.0036 -1.2482, -0.0035 -0.8148, -0.3585 -0.6335, -0.3692 -1.0744; 0.1096 -1.2455, 0.1065 -0.8120, -0.2797 -0.6511, -0.2880 -1.0913; 0.2220 -1.2373, 0.2157 -0.8034, -0.1984 -0.6642, -0.2043 -1.1038; 0.3326 -1.2234, 0.3232 -0.7889, -0.1153 -0.6728, -0.1187 -1.1121; 0.4404 -1.2040, 0.4279 -0.7687, -0.0312 -0.6768, -0.0322 -1.1159; 0.5446 -1.1793, 0.5291 -0.7429, 0.0531 -0.6762, 0.0547 -1.1154; 0.6443 -1.1492, 0.6258 -0.7115, 0.1370 -0.6710, 0.1411 -1.1104; 0.7384 -1.1141, 0.7172 -0.6749, 0.2197 -0.6612, 0.2262 -1.1010; 0.8262 -1.0741, 0.8023 -0.6331, 0.3004 -0.6469, 0.3094 -1.0873; 0.9067 -1.0295, 0.8802 -0.5866, 0.3785 -0.6282, 0.3898 -1.0694; 0.9789 -0.9805, 0.9501 -0.5357, 0.4531 -0.6053, 0.4667 -1.0473; 1.0421 -0.9276, 1.0111 -0.4806, 0.5236 -0.5782, 0.5394 -1.0214; 1.0953 -0.8712, 1.0625 -0.4219, 0.5893 -0.5472, 0.6071 -0.9916; 1.1377 -0.8117, 1.1033 -0.3599, 0.6494 -0.5125, 0.6692 -0.9583; 1.1686 -0.7496, 1.1330 -0.2954, 0.7034 -0.4745, 0.7249 -0.9218; 1.1874 -0.6855, 1.1508 -0.2289, 0.7505 -0.4333, 0.7736 -0.8822; -0.0036 -1.2482, -0.0035 -0.8148, -0.3585 -0.6335, -0.3692 -1.0744">
        </animate>
    </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.3934 0.6952, 0.3813 1.1096, 0.0040 1.3697, 0.0041 0.9502"> </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.4066 0.2442, 0.3937 0.6864, 0.0041 0.9414, 0.0042 0.4928"> </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.4207 -0.2380, 0.4069 0.2349, 0.0042 0.4833, 0.0044 0.0025; 0.3302 -0.2160, 0.3193 0.2576, -0.1285 0.4793, -0.1330 -0.0014; 0.2352 -0.1994, 0.2275 0.2748, -0.2595 0.4668, -0.2686 -0.0135; 0.1372 -0.1884, 0.1326 0.2861, -0.3867 0.4460, -0.4002 -0.0337; 0.0372 -0.1833, 0.0360 0.2915, -0.5084 0.4172, -0.5262 -0.0615; -0.0632 -0.1841, -0.0611 0.2907, -0.6231 0.3811, -0.6447 -0.0966; -0.1628 -0.1907, -0.1574 0.2838, -0.7291 0.3380, -0.7543 -0.1382; -0.2602 -0.2032, -0.2516 0.2709, -0.8253 0.2889, -0.8535 -0.1857; -0.3541 -0.2212, -0.3425 0.2523, -0.9104 0.2344, -0.9413 -0.2384; -0.4433 -0.2445, -0.4288 0.2281, -0.9837 0.1755, -1.0168 -0.2955; -0.5267 -0.2728, -0.5094 0.1989, -1.0444 0.1128, -1.0793 -0.3560; -0.6032 -0.3056, -0.5835 0.1650, -1.0922 0.0475, -1.1283 -0.4191; -0.6719 -0.3424, -0.6502 0.1269, -1.1267 -0.0198, -1.1637 -0.4840; -0.7322 -0.3827, -0.7086 0.0851, -1.1480 -0.0881, -1.1853 -0.5499; -0.7833 -0.4260, -0.7583 0.0403, -1.1562 -0.1566, -1.1933 -0.6160; -0.8250 -0.4716, -0.7987 -0.0069, -1.1515 -0.2246, -1.1882 -0.6814; 0.4207 -0.2380, 0.4069 0.2349, 0.0042 0.4833, 0.0044 0.0025">
        </animate>
    </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.7659 0.4511, 0.7431 0.8602, 0.3887 1.1044, 0.4011 0.6901"> </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.7908 0.0069, 0.7664 0.4425, 0.4014 0.6814, 0.4145 0.2393"> </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.8173 -0.4671, 0.7913 -0.0023, 0.4148 0.2300, 0.4289 -0.2427; 0.7747 -0.4220, 0.7499 0.0445, 0.3282 0.2533, 0.3393 -0.2202; 0.7227 -0.3792, 0.6994 0.0888, 0.2371 0.2710, 0.2452 -0.2031; 0.6617 -0.3395, 0.6402 0.1299, 0.1430 0.2830, 0.1479 -0.1915; 0.5923 -0.3032, 0.5730 0.1674, 0.0469 0.2889, 0.0485 -0.1857; 0.5153 -0.2711, 0.4984 0.2007, -0.0498 0.2888, -0.0515 -0.1858; 0.4315 -0.2435, 0.4173 0.2292, -0.1459 0.2827, -0.1508 -0.1918; 0.3421 -0.2208, 0.3308 0.2526, -0.2399 0.2706, -0.2481 -0.2035; 0.2481 -0.2035, 0.2399 0.2706, -0.3308 0.2526, -0.3421 -0.2208; 0.1508 -0.1918, 0.1459 0.2827, -0.4173 0.2292, -0.4315 -0.2435; 0.0515 -0.1858, 0.0498 0.2888, -0.4984 0.2007, -0.5153 -0.2711; -0.0485 -0.1857, -0.0469 0.2889, -0.5730 0.1674, -0.5923 -0.3032; -0.1479 -0.1915, -0.1430 0.2830, -0.6402 0.1299, -0.6617 -0.3395; -0.2452 -0.2031, -0.2371 0.2710, -0.6994 0.0888, -0.7227 -0.3792; -0.3393 -0.2202, -0.3282 0.2533, -0.7499 0.0445, -0.7747 -0.4220; -0.4289 -0.2427, -0.4148 0.2300, -0.7913 -0.0023, -0.8173 -0.4671; 0.8173 -0.4671, 0.7913 -0.0023, 0.4148 0.2300, 0.4289 -0.2427">
        </animate>
    </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="1.1158 0.2219, 1.0834 0.6255, 0.7501 0.8553, 0.7731 0.4464"> </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="1.1508 -0.2156, 1.1164 0.2134, 0.7736 0.4378, 0.7982 0.0023"> </polygon>
    <polygon stroke="red" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="1.1882 -0.6814, 1.1515 -0.2246, 0.7987 -0.0069, 0.8250 -0.4716; 1.1933 -0.6160, 1.1562 -0.1566, 0.7583 0.0403, 0.7833 -0.4260; 1.1853 -0.5499, 1.1480 -0.0881, 0.7086 0.0851, 0.7322 -0.3827; 1.1637 -0.4840, 1.1267 -0.0198, 0.6502 0.1269, 0.6719 -0.3424; 1.1283 -0.4191, 1.0922 0.0475, 0.5835 0.1650, 0.6032 -0.3056; 1.0793 -0.3560, 1.0444 0.1128, 0.5094 0.1989, 0.5267 -0.2728; 1.0168 -0.2955, 0.9837 0.1755, 0.4288 0.2281, 0.4433 -0.2445; 0.9413 -0.2384, 0.9104 0.2344, 0.3425 0.2523, 0.3541 -0.2212; 0.8535 -0.1857, 0.8253 0.2889, 0.2516 0.2709, 0.2602 -0.2032; 0.7543 -0.1382, 0.7291 0.3380, 0.1574 0.2838, 0.1628 -0.1907; 0.6447 -0.0966, 0.6231 0.3811, 0.0611 0.2907, 0.0632 -0.1841; 0.5262 -0.0615, 0.5084 0.4172, -0.0360 0.2915, -0.0372 -0.1833; 0.4002 -0.0337, 0.3867 0.4460, -0.1326 0.2861, -0.1372 -0.1884; 0.2686 -0.0135, 0.2595 0.4668, -0.2275 0.2748, -0.2352 -0.1994; 0.1330 -0.0014, 0.1285 0.4793, -0.3193 0.2576, -0.3302 -0.2160; -0.0044 0.0025, -0.0042 0.4833, -0.4069 0.2349, -0.4207 -0.2380; 1.1882 -0.6814, 1.1515 -0.2246, 0.7987 -0.0069, 0.8250 -0.4716">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.0000 -0.4698, -0.4165 -0.2453, 0.0000 -0.0051, 0.4165 -0.2453; -0.0438 -0.4711, -0.5010 -0.2721, -0.1370 -0.0092, 0.3264 -0.2236; -0.0871 -0.4747, -0.5791 -0.3035, -0.2719 -0.0216, 0.2319 -0.2072; -0.1293 -0.4809, -0.6497 -0.3390, -0.4030 -0.0419, 0.1344 -0.1965; -0.1700 -0.4893, -0.7120 -0.3781, -0.5283 -0.0699, 0.0350 -0.1915; -0.2086 -0.4999, -0.7655 -0.4203, -0.6462 -0.1050, -0.0648 -0.1924; -0.2448 -0.5127, -0.8096 -0.4649, -0.7551 -0.1466, -0.1637 -0.1991; -0.2781 -0.5273, -0.8439 -0.5115, -0.8537 -0.1941, -0.2605 -0.2115; -0.3080 -0.5437, -0.8684 -0.5594, -0.9409 -0.2468, -0.3538 -0.2296; -0.3344 -0.5617, -0.8828 -0.6080, -1.0158 -0.3037, -0.4423 -0.2528; -0.3569 -0.5809, -0.8874 -0.6568, -1.0776 -0.3640, -0.5251 -0.2810; -0.3753 -0.6012, -0.8821 -0.7052, -1.1261 -0.4270, -0.6010 -0.3136; -0.3895 -0.6223, -0.8674 -0.7527, -1.1609 -0.4917, -0.6692 -0.3503; -0.3992 -0.6441, -0.8435 -0.7987, -1.1821 -0.5573, -0.7289 -0.3904; -0.4045 -0.6661, -0.8110 -0.8430, -1.1897 -0.6231, -0.7796 -0.4334; -0.4053 -0.6883, -0.7703 -0.8850, -1.1842 -0.6883, -0.8209 -0.4787; 0.0000 -0.4698, -0.4165 -0.2453, 0.0000 -0.0051, 0.4165 -0.2453">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.3976 -0.6841, 0.0082 -0.4742, 0.4247 -0.2501, 0.8132 -0.4742; 0.3960 -0.6624, -0.0348 -0.4750, 0.3355 -0.2279, 0.7710 -0.4294; 0.3899 -0.6408, -0.0773 -0.4782, 0.2419 -0.2109, 0.7194 -0.3869; 0.3795 -0.6196, -0.1189 -0.4837, 0.1451 -0.1995, 0.6589 -0.3473; 0.3648 -0.5990, -0.1591 -0.4915, 0.0463 -0.1939, 0.5901 -0.3113; 0.3460 -0.5793, -0.1974 -0.5016, -0.0531 -0.1941, 0.5136 -0.2793; 0.3231 -0.5607, -0.2334 -0.5137, -0.1518 -0.2001, 0.4305 -0.2518; 0.2966 -0.5434, -0.2665 -0.5277, -0.2484 -0.2119, 0.3417 -0.2292; 0.2665 -0.5277, -0.2966 -0.5434, -0.3417 -0.2292, 0.2484 -0.2119; 0.2334 -0.5137, -0.3231 -0.5607, -0.4305 -0.2518, 0.1518 -0.2001; 0.1974 -0.5016, -0.3460 -0.5793, -0.5136 -0.2793, 0.0531 -0.1941; 0.1591 -0.4915, -0.3648 -0.5990, -0.5901 -0.3113, -0.0463 -0.1939; 0.1189 -0.4837, -0.3795 -0.6196, -0.6589 -0.3473, -0.1451 -0.1995; 0.0773 -0.4782, -0.3899 -0.6408, -0.7194 -0.3869, -0.2419 -0.2109; 0.0348 -0.4750, -0.3960 -0.6624, -0.7710 -0.4294, -0.3355 -0.2279; -0.0082 -0.4742, -0.3976 -0.6841, -0.8132 -0.4742, -0.4247 -0.2501; 0.3976 -0.6841, 0.0082 -0.4742, 0.4247 -0.2501, 0.8132 -0.4742">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.7703 -0.8850, 0.4053 -0.6883, 0.8209 -0.4787, 1.1842 -0.6883; 0.8110 -0.8430, 0.4045 -0.6661, 0.7796 -0.4334, 1.1897 -0.6231; 0.8435 -0.7987, 0.3992 -0.6441, 0.7289 -0.3904, 1.1821 -0.5573; 0.8674 -0.7527, 0.3895 -0.6223, 0.6692 -0.3503, 1.1609 -0.4917; 0.8821 -0.7052, 0.3753 -0.6012, 0.6010 -0.3136, 1.1261 -0.4270; 0.8874 -0.6568, 0.3569 -0.5809, 0.5251 -0.2810, 1.0776 -0.3640; 0.8828 -0.6080, 0.3344 -0.5617, 0.4423 -0.2528, 1.0158 -0.3037; 0.8684 -0.5594, 0.3080 -0.5437, 0.3538 -0.2296, 0.9409 -0.2468; 0.8439 -0.5115, 0.2781 -0.5273, 0.2605 -0.2115, 0.8537 -0.1941; 0.8096 -0.4649, 0.2448 -0.5127, 0.1637 -0.1991, 0.7551 -0.1466; 0.7655 -0.4203, 0.2086 -0.4999, 0.0648 -0.1924, 0.6462 -0.1050; 0.7120 -0.3781, 0.1700 -0.4893, -0.0350 -0.1915, 0.5283 -0.0699; 0.6497 -0.3390, 0.1293 -0.4809, -0.1344 -0.1965, 0.4030 -0.0419; 0.5791 -0.3035, 0.0871 -0.4747, -0.2319 -0.2072, 0.2719 -0.0216; 0.5010 -0.2721, 0.0438 -0.4711, -0.3264 -0.2236, 0.1370 -0.0092; 0.4165 -0.2453, 0.0000 -0.4698, -0.4165 -0.2453, 0.0000 -0.0051; 0.7703 -0.8850, 0.4053 -0.6883, 0.8209 -0.4787, 1.1842 -0.6883">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.3976 -0.6841, -0.8132 -0.4742, -0.4247 -0.2501, -0.0082 -0.4742; -0.3949 -0.7058, -0.8456 -0.5209, -0.5082 -0.2773, -0.0511 -0.4759; -0.3880 -0.7271, -0.8682 -0.5688, -0.5851 -0.3090, -0.0933 -0.4800; -0.3768 -0.7478, -0.8808 -0.6173, -0.6545 -0.3448, -0.1345 -0.4864; -0.3617 -0.7677, -0.8835 -0.6658, -0.7156 -0.3841, -0.1740 -0.4951; -0.3427 -0.7867, -0.8766 -0.7139, -0.7678 -0.4264, -0.2114 -0.5059; -0.3202 -0.8045, -0.8602 -0.7609, -0.8106 -0.4711, -0.2464 -0.5188; -0.2944 -0.8210, -0.8349 -0.8065, -0.8438 -0.5177, -0.2784 -0.5335; -0.2655 -0.8359, -0.8009 -0.8502, -0.8670 -0.5655, -0.3071 -0.5498; -0.2340 -0.8492, -0.7590 -0.8916, -0.8803 -0.6139, -0.3323 -0.5677; -0.2000 -0.8608, -0.7096 -0.9303, -0.8836 -0.6625, -0.3537 -0.5867; -0.1641 -0.8704, -0.6533 -0.9660, -0.8773 -0.7106, -0.3709 -0.6068; -0.1265 -0.8781, -0.5909 -0.9984, -0.8616 -0.7578, -0.3840 -0.6277; -0.0876 -0.8838, -0.5229 -1.0273, -0.8369 -0.8035, -0.3927 -0.6490; -0.0479 -0.8874, -0.4502 -1.0524, -0.8035 -0.8473, -0.3971 -0.6707; -0.0077 -0.8889, -0.3734 -1.0736, -0.7621 -0.8889, -0.3971 -0.6924; -0.3976 -0.6841, -0.8132 -0.4742, -0.4247 -0.2501, -0.0082 -0.4742">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.0000 -0.8850, -0.3894 -0.6883, 0.0000 -0.4787, 0.3894 -0.6883; 0.0395 -0.8839, -0.3860 -0.7094, -0.0420 -0.4798, 0.3886 -0.6670; 0.0785 -0.8808, -0.3784 -0.7302, -0.0836 -0.4834, 0.3835 -0.6458; 0.1168 -0.8756, -0.3668 -0.7504, -0.1241 -0.4892, 0.3740 -0.6249; 0.1539 -0.8685, -0.3512 -0.7698, -0.1631 -0.4973, 0.3604 -0.6047; 0.1895 -0.8593, -0.3320 -0.7882, -0.2002 -0.5075, 0.3427 -0.5852; 0.2232 -0.8484, -0.3093 -0.8054, -0.2349 -0.5198, 0.3211 -0.5667; 0.2546 -0.8356, -0.2834 -0.8213, -0.2669 -0.5338, 0.2957 -0.5495; 0.2834 -0.8213, -0.2546 -0.8356, -0.2957 -0.5495, 0.2669 -0.5338; 0.3093 -0.8054, -0.2232 -0.8484, -0.3211 -0.5667, 0.2349 -0.5198; 0.3320 -0.7882, -0.1895 -0.8593, -0.3427 -0.5852, 0.2002 -0.5075; 0.3512 -0.7698, -0.1539 -0.8685, -0.3604 -0.6047, 0.1631 -0.4973; 0.3668 -0.7504, -0.1168 -0.8756, -0.3740 -0.6249, 0.1241 -0.4892; 0.3784 -0.7302, -0.0785 -0.8808, -0.3835 -0.6458, 0.0836 -0.4834; 0.3860 -0.7094, -0.0395 -0.8839, -0.3886 -0.6670, 0.0420 -0.4798; 0.3894 -0.6883, -0.0000 -0.8850, -0.3894 -0.6883, 0.0000 -0.4787; 0.0000 -0.8850, -0.3894 -0.6883, 0.0000 -0.4787, 0.3894 -0.6883">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.3734 -1.0736, 0.0077 -0.8889, 0.3971 -0.6924, 0.7621 -0.8889; 0.4502 -1.0524, 0.0479 -0.8874, 0.3971 -0.6707, 0.8035 -0.8473; 0.5229 -1.0273, 0.0876 -0.8838, 0.3927 -0.6490, 0.8369 -0.8035; 0.5909 -0.9984, 0.1265 -0.8781, 0.3840 -0.6277, 0.8616 -0.7578; 0.6533 -0.9660, 0.1641 -0.8704, 0.3709 -0.6068, 0.8773 -0.7106; 0.7096 -0.9303, 0.2000 -0.8608, 0.3537 -0.5867, 0.8836 -0.6625; 0.7590 -0.8916, 0.2340 -0.8492, 0.3323 -0.5677, 0.8803 -0.6139; 0.8009 -0.8502, 0.2655 -0.8359, 0.3071 -0.5498, 0.8670 -0.5655; 0.8349 -0.8065, 0.2944 -0.8210, 0.2784 -0.5335, 0.8438 -0.5177; 0.8602 -0.7609, 0.3202 -0.8045, 0.2464 -0.5188, 0.8106 -0.4711; 0.8766 -0.7139, 0.3427 -0.7867, 0.2114 -0.5059, 0.7678 -0.4264; 0.8835 -0.6658, 0.3617 -0.7677, 0.1740 -0.4951, 0.7156 -0.3841; 0.8808 -0.6173, 0.3768 -0.7478, 0.1345 -0.4864, 0.6545 -0.3448; 0.8682 -0.5688, 0.3880 -0.7271, 0.0933 -0.4800, 0.5851 -0.3090; 0.8456 -0.5209, 0.3949 -0.7058, 0.0511 -0.4759, 0.5082 -0.2773; 0.8132 -0.4742, 0.3976 -0.6841, 0.0082 -0.4742, 0.4247 -0.2501; 0.3734 -1.0736, 0.0077 -0.8889, 0.3971 -0.6924, 0.7621 -0.8889">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.7703 -0.8850, -1.1842 -0.6883, -0.8209 -0.4787, -0.4053 -0.6883; -0.7220 -0.9244, -1.1659 -0.7521, -0.8523 -0.5257, -0.4017 -0.7103; -0.6667 -0.9608, -1.1355 -0.8141, -0.8737 -0.5739, -0.3938 -0.7319; -0.6051 -0.9939, -1.0936 -0.8735, -0.8852 -0.6226, -0.3816 -0.7529; -0.5378 -1.0236, -1.0409 -0.9298, -0.8868 -0.6713, -0.3654 -0.7731; -0.4656 -1.0495, -0.9782 -0.9826, -0.8787 -0.7195, -0.3453 -0.7922; -0.3892 -1.0715, -0.9065 -1.0315, -0.8612 -0.7666, -0.3217 -0.8101; -0.3093 -1.0894, -0.8266 -1.0761, -0.8347 -0.8122, -0.2947 -0.8266; -0.2266 -1.1031, -0.7393 -1.1162, -0.7997 -0.8558, -0.2647 -0.8415; -0.1420 -1.1125, -0.6456 -1.1513, -0.7566 -0.8970, -0.2320 -0.8547; -0.0561 -1.1175, -0.5463 -1.1814, -0.7062 -0.9355, -0.1970 -0.8661; 0.0303 -1.1182, -0.4426 -1.2063, -0.6489 -0.9710, -0.1600 -0.8756; 0.1164 -1.1144, -0.3351 -1.2258, -0.5856 -1.0031, -0.1214 -0.8831; 0.2016 -1.1063, -0.2249 -1.2398, -0.5168 -1.0317, -0.0816 -0.8884; 0.2849 -1.0939, -0.1129 -1.2482, -0.4432 -1.0565, -0.0410 -0.8917; 0.3657 -1.0772, 0.0000 -1.2510, -0.3657 -1.0772, 0.0000 -0.8928; -0.7703 -0.8850, -1.1842 -0.6883, -0.8209 -0.4787, -0.4053 -0.6883">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.3734 -1.0736, -0.7621 -0.8889, -0.3971 -0.6924, -0.0077 -0.8889; -0.2932 -1.0907, -0.7132 -0.9278, -0.3928 -0.7139, 0.0326 -0.8882; -0.2105 -1.1035, -0.6574 -0.9637, -0.3842 -0.7350, 0.0725 -0.8854; -0.1258 -1.1121, -0.5953 -0.9963, -0.3715 -0.7555, 0.1118 -0.8805; -0.0401 -1.1163, -0.5277 -1.0255, -0.3549 -0.7751, 0.1499 -0.8736; 0.0460 -1.1162, -0.4553 -1.0508, -0.3346 -0.7936, 0.1865 -0.8647; 0.1316 -1.1117, -0.3787 -1.0723, -0.3107 -0.8110, 0.2213 -0.8539; 0.2162 -1.1028, -0.2988 -1.0896, -0.2837 -0.8269, 0.2538 -0.8412; 0.2988 -1.0896, -0.2162 -1.1028, -0.2538 -0.8412, 0.2837 -0.8269; 0.3787 -1.0723, -0.1316 -1.1117, -0.2213 -0.8539, 0.3107 -0.8110; 0.4553 -1.0508, -0.0460 -1.1162, -0.1865 -0.8647, 0.3346 -0.7936; 0.5277 -1.0255, 0.0401 -1.1163, -0.1499 -0.8736, 0.3549 -0.7751; 0.5953 -0.9963, 0.1258 -1.1121, -0.1118 -0.8805, 0.3715 -0.7555; 0.6574 -0.9637, 0.2105 -1.1035, -0.0725 -0.8854, 0.3842 -0.7350; 0.7132 -0.9278, 0.2932 -1.0907, -0.0326 -0.8882, 0.3928 -0.7139; 0.7621 -0.8889, 0.3734 -1.0736, 0.0077 -0.8889, 0.3971 -0.6924; -0.3734 -1.0736, -0.7621 -0.8889, -0.3971 -0.6924, -0.0077 -0.8889">
        </animate>
    </polygon>
    <polygon stroke="yellow" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.0000 -1.2510, -0.3657 -1.0772, 0.0000 -0.8928, 0.3657 -1.0772; 0.1129 -1.2482, -0.2849 -1.0939, 0.0410 -0.8917, 0.4432 -1.0565; 0.2249 -1.2398, -0.2016 -1.1063, 0.0816 -0.8884, 0.5168 -1.0317; 0.3351 -1.2258, -0.1164 -1.1144, 0.1214 -0.8831, 0.5856 -1.0031; 0.4426 -1.2063, -0.0303 -1.1182, 0.1600 -0.8756, 0.6489 -0.9710; 0.5463 -1.1814, 0.0561 -1.1175, 0.1970 -0.8661, 0.7062 -0.9355; 0.6456 -1.1513, 0.1420 -1.1125, 0.2320 -0.8547, 0.7566 -0.8970; 0.7393 -1.1162, 0.2266 -1.1031, 0.2647 -0.8415, 0.7997 -0.8558; 0.8266 -1.0761, 0.3093 -1.0894, 0.2947 -0.8266, 0.8347 -0.8122; 0.9065 -1.0315, 0.3892 -1.0715, 0.3217 -0.8101, 0.8612 -0.7666; 0.9782 -0.9826, 0.4656 -1.0495, 0.3453 -0.7922, 0.8787 -0.7195; 1.0409 -0.9298, 0.5378 -1.0236, 0.3654 -0.7731, 0.8868 -0.6713; 1.0936 -0.8735, 0.6051 -0.9939, 0.3816 -0.7529, 0.8852 -0.6226; 1.1355 -0.8141, 0.6667 -0.9608, 0.3938 -0.7319, 0.8737 -0.5739; 1.1659 -0.7521, 0.7220 -0.9244, 0.4017 -0.7103, 0.8523 -0.5257; 1.1842 -0.6883, 0.7703 -0.8850, 0.4053 -0.6883, 0.8209 -0.4787; 0.0000 -1.2510, -0.3657 -1.0772, 0.0000 -0.8928, 0.3657 -1.0772">
        </animate>
    </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.0000 0.8666, -0.3772 1.1111, 0.0000 1.3711, 0.3772 1.1111"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.3623 0.6318, 0.0075 0.8618, 0.3846 1.1059, 0.7389 0.8618"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.7039 0.4104, 0.3694 0.6272, 0.7459 0.8570, 1.0791 0.6272"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.3623 0.6318, -0.7389 0.8618, -0.3846 1.1059, -0.0075 0.8618"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.0000 0.4104, -0.3549 0.6272, 0.0000 0.8570, 0.3549 0.6272"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.3421 0.2015, 0.0070 0.4061, 0.3619 0.6227, 0.6964 0.4061"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.7039 0.4104, -1.0791 0.6272, -0.7459 0.8570, -0.3694 0.6272"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.3421 0.2015, -0.6964 0.4061, -0.3619 0.6227, -0.0070 0.4061"> </polygon>
    <polygon stroke="white" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.0000 0.0038, -0.3351 0.1974, 0.0000 0.4019, 0.3351 0.1974"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.7279 0.0063, 1.1151 0.2175, 1.0828 0.6210, 0.7074 0.4043"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.3552 -0.1970, 0.7202 0.0021, 0.6999 0.4001, 0.3455 0.1955"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.0034 -0.3889, 0.3480 -0.2009, 0.3385 0.1915, 0.0033 -0.0019"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.7501 -0.4244, 1.1501 -0.2199, 1.1158 0.2090, 0.7283 -0.0021"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.3658 -0.6210, 0.7421 -0.4285, 0.7206 -0.0063, 0.3555 -0.2052"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="0.0035 -0.8062, 0.3583 -0.6248, 0.3482 -0.2092, 0.0034 -0.3970"> </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.7736 -0.8822, 1.1874 -0.6855, 1.1508 -0.2289, 0.7505 -0.4333; 0.8147 -0.8400, 1.1934 -0.6202, 1.1563 -0.1610, 0.7902 -0.3894; 0.8477 -0.7955, 1.1862 -0.5541, 1.1489 -0.0925, 0.8220 -0.3432; 0.8719 -0.7492, 1.1654 -0.4882, 1.1285 -0.0242, 0.8453 -0.2950; 0.8869 -0.7014, 1.1310 -0.4232, 1.0948 0.0432, 0.8597 -0.2454; 0.8924 -0.6527, 1.0828 -0.3599, 1.0478 0.1087, 0.8648 -0.1948; 0.8881 -0.6036, 1.0212 -0.2992, 0.9879 0.1716, 0.8604 -0.1439; 0.8738 -0.5547, 0.9465 -0.2420, 0.9154 0.2308, 0.8464 -0.0931; 0.8495 -0.5065, 0.8595 -0.1890, 0.8310 0.2856, 0.8226 -0.0431; 0.8151 -0.4595, 0.7609 -0.1411, 0.7356 0.3351, 0.7891 0.0056; 0.7710 -0.4145, 0.6520 -0.0990, 0.6301 0.3785, 0.7463 0.0522; 0.7174 -0.3720, 0.5340 -0.0635, 0.5160 0.4151, 0.6943 0.0963; 0.6549 -0.3325, 0.4085 -0.0352, 0.3946 0.4444, 0.6336 0.1371; 0.5840 -0.2967, 0.2771 -0.0145, 0.2677 0.4657, 0.5650 0.1742; 0.5057 -0.2650, 0.1418 -0.0019, 0.1370 0.4788, 0.4891 0.2069; 0.4207 -0.2380, 0.0044 0.0025, 0.0042 0.4833, 0.4069 0.2349; 0.7736 -0.8822, 1.1874 -0.6855, 1.1508 -0.2289, 0.7505 -0.4333">
        </animate>
    </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.3769 -1.0708, 0.7655 -0.8861, 0.7426 -0.4374, 0.3660 -0.6297; 0.4541 -1.0494, 0.8073 -0.8443, 0.7830 -0.3939, 0.4409 -0.6074; 0.5271 -1.0241, 0.8410 -0.8003, 0.8156 -0.3481, 0.5117 -0.5810; 0.5954 -0.9950, 0.8661 -0.7543, 0.8397 -0.3003, 0.5779 -0.5507; 0.6580 -0.9623, 0.8821 -0.7069, 0.8551 -0.2510, 0.6386 -0.5167; 0.7145 -0.9263, 0.8887 -0.6584, 0.8612 -0.2007, 0.6933 -0.4792; 0.7641 -0.8873, 0.8855 -0.6096, 0.8579 -0.1500, 0.7413 -0.4386; 0.8061 -0.8456, 0.8724 -0.5608, 0.8450 -0.0994, 0.7819 -0.3953; 0.8401 -0.8016, 0.8493 -0.5126, 0.8224 -0.0495, 0.8147 -0.3495; 0.8655 -0.7557, 0.8162 -0.4657, 0.7902 -0.0009, 0.8391 -0.3018; 0.8818 -0.7083, 0.7733 -0.4207, 0.7485 0.0459, 0.8547 -0.2525; 0.8886 -0.6599, 0.7210 -0.3780, 0.6977 0.0900, 0.8612 -0.2023; 0.8858 -0.6111, 0.6597 -0.3383, 0.6383 0.1311, 0.8582 -0.1516; 0.8729 -0.5623, 0.5901 -0.3022, 0.5708 0.1685, 0.8455 -0.1009; 0.8501 -0.5141, 0.5128 -0.2702, 0.4960 0.2016, 0.8232 -0.0510; 0.8173 -0.4671, 0.4289 -0.2427, 0.4148 0.2300, 0.7913 -0.0023; 0.3769 -1.0708, 0.7655 -0.8861, 0.7426 -0.4374, 0.3660 -0.6297">
        </animate>
    </polygon>
    <polygon stroke="blue" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="0.0036 -1.2482, 0.3692 -1.0744, 0.3585 -0.6335, 0.0035 -0.8148; 0.1168 -1.2452, 0.4471 -1.0534, 0.4341 -0.6116, 0.1136 -0.8117; 0.2291 -1.2366, 0.5210 -1.0285, 0.5057 -0.5856, 0.2227 -0.8026; 0.3395 -1.2223, 0.5900 -0.9997, 0.5727 -0.5556, 0.3299 -0.7878; 0.4472 -1.2026, 0.6537 -0.9673, 0.6344 -0.5219, 0.4345 -0.7672; 0.5511 -1.1775, 0.7111 -0.9315, 0.6900 -0.4847, 0.5354 -0.7410; 0.6505 -1.1471, 0.7617 -0.8927, 0.7390 -0.4443, 0.6318 -0.7093; 0.7443 -1.1117, 0.8048 -0.8512, 0.7807 -0.4010, 0.7228 -0.6723; 0.8316 -1.0714, 0.8399 -0.8073, 0.8145 -0.3554, 0.8075 -0.6303; 0.9115 -1.0265, 0.8664 -0.7613, 0.8401 -0.3076, 0.8849 -0.5835; 0.9832 -0.9773, 0.8839 -0.7139, 0.8568 -0.2584, 0.9543 -0.5323; 1.0458 -0.9241, 0.8919 -0.6654, 0.8644 -0.2080, 1.0147 -0.4769; 1.0983 -0.8675, 0.8902 -0.6164, 0.8625 -0.1571, 1.0654 -0.4180; 1.1400 -0.8078, 0.8785 -0.5674, 0.8509 -0.1062, 1.1056 -0.3559; 1.1702 -0.7456, 0.8567 -0.5189, 0.8297 -0.0559, 1.1345 -0.2912; 1.1882 -0.6814, 0.8250 -0.4716, 0.7987 -0.0069, 1.1515 -0.2246; 0.0036 -1.2482, 0.3692 -1.0744, 0.3585 -0.6335, 0.0035 -0.8148">
        </animate>
    </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.3934 0.6952, -0.0041 0.9502, -0.0040 1.3697, -0.3813 1.1096"> </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.7659 0.4511, -0.4011 0.6901, -0.3887 1.1044, -0.7431 0.8602"> </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-1.1158 0.2219, -0.7731 0.4464, -0.7501 0.8553, -1.0834 0.6255"> </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.4066 0.2442, -0.0042 0.4928, -0.0041 0.9414, -0.3937 0.6864"> </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-0.7908 0.0069, -0.4145 0.2393, -0.4014 0.6814, -0.7664 0.4425"> </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent"
        points="-1.1508 -0.2156, -0.7982 0.0023, -0.7736 0.4378, -1.1164 0.2134"> </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.4207 -0.2380, -0.0044 0.0025, -0.0042 0.4833, -0.4069 0.2349; -0.5057 -0.2650, -0.1418 -0.0019, -0.1370 0.4788, -0.4891 0.2069; -0.5840 -0.2967, -0.2771 -0.0145, -0.2677 0.4657, -0.5650 0.1742; -0.6549 -0.3325, -0.4085 -0.0352, -0.3946 0.4444, -0.6336 0.1371; -0.7174 -0.3720, -0.5340 -0.0635, -0.5160 0.4151, -0.6943 0.0963; -0.7710 -0.4145, -0.6520 -0.0990, -0.6301 0.3785, -0.7463 0.0522; -0.8151 -0.4595, -0.7609 -0.1411, -0.7356 0.3351, -0.7891 0.0056; -0.8495 -0.5065, -0.8595 -0.1890, -0.8310 0.2856, -0.8226 -0.0431; -0.8738 -0.5547, -0.9465 -0.2420, -0.9154 0.2308, -0.8464 -0.0931; -0.8881 -0.6036, -1.0212 -0.2992, -0.9879 0.1716, -0.8604 -0.1439; -0.8924 -0.6527, -1.0828 -0.3599, -1.0478 0.1087, -0.8648 -0.1948; -0.8869 -0.7014, -1.1310 -0.4232, -1.0948 0.0432, -0.8597 -0.2454; -0.8719 -0.7492, -1.1654 -0.4882, -1.1285 -0.0242, -0.8453 -0.2950; -0.8477 -0.7955, -1.1862 -0.5541, -1.1489 -0.0925, -0.8220 -0.3432; -0.8147 -0.8400, -1.1934 -0.6202, -1.1563 -0.1610, -0.7902 -0.3894; -0.7736 -0.8822, -1.1874 -0.6855, -1.1508 -0.2289, -0.7505 -0.4333; -0.4207 -0.2380, -0.0044 0.0025, -0.0042 0.4833, -0.4069 0.2349">
        </animate>
    </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-0.8173 -0.4671, -0.4289 -0.2427, -0.4148 0.2300, -0.7913 -0.0023; -0.8501 -0.5141, -0.5128 -0.2702, -0.4960 0.2016, -0.8232 -0.0510; -0.8729 -0.5623, -0.5901 -0.3022, -0.5708 0.1685, -0.8455 -0.1009; -0.8858 -0.6111, -0.6597 -0.3383, -0.6383 0.1311, -0.8582 -0.1516; -0.8886 -0.6599, -0.7210 -0.3780, -0.6977 0.0900, -0.8612 -0.2023; -0.8818 -0.7083, -0.7733 -0.4207, -0.7485 0.0459, -0.8547 -0.2525; -0.8655 -0.7557, -0.8162 -0.4657, -0.7902 -0.0009, -0.8391 -0.3018; -0.8401 -0.8016, -0.8493 -0.5126, -0.8224 -0.0495, -0.8147 -0.3495; -0.8061 -0.8456, -0.8724 -0.5608, -0.8450 -0.0994, -0.7819 -0.3953; -0.7641 -0.8873, -0.8855 -0.6096, -0.8579 -0.1500, -0.7413 -0.4386; -0.7145 -0.9263, -0.8887 -0.6584, -0.8612 -0.2007, -0.6933 -0.4792; -0.6580 -0.9623, -0.8821 -0.7069, -0.8551 -0.2510, -0.6386 -0.5167; -0.5954 -0.9950, -0.8661 -0.7543, -0.8397 -0.3003, -0.5779 -0.5507; -0.5271 -1.0241, -0.8410 -0.8003, -0.8156 -0.3481, -0.5117 -0.5810; -0.4541 -1.0494, -0.8073 -0.8443, -0.7830 -0.3939, -0.4409 -0.6074; -0.3769 -1.0708, -0.7655 -0.8861, -0.7426 -0.4374, -0.3660 -0.6297; -0.8173 -0.4671, -0.4289 -0.2427, -0.4148 0.2300, -0.7913 -0.0023">
        </animate>
    </polygon>
    <polygon stroke="green" stroke-width="0.005" stroke-alignment="inner" fill="transparent" points="">
        <animate attributeName="points" dur="2s" repeatCount="indefinite"
            values="-1.1882 -0.6814, -0.8250 -0.4716, -0.7987 -0.0069, -1.1515 -0.2246; -1.1702 -0.7456, -0.8567 -0.5189, -0.8297 -0.0559, -1.1345 -0.2912; -1.1400 -0.8078, -0.8785 -0.5674, -0.8509 -0.1062, -1.1056 -0.3559; -1.0983 -0.8675, -0.8902 -0.6164, -0.8625 -0.1571, -1.0654 -0.4180; -1.0458 -0.9241, -0.8919 -0.6654, -0.8644 -0.2080, -1.0147 -0.4769; -0.9832 -0.9773, -0.8839 -0.7139, -0.8568 -0.2584, -0.9543 -0.5323; -0.9115 -1.0265, -0.8664 -0.7613, -0.8401 -0.3076, -0.8849 -0.5835; -0.8316 -1.0714, -0.8399 -0.8073, -0.8145 -0.3554, -0.8075 -0.6303; -0.7443 -1.1117, -0.8048 -0.8512, -0.7807 -0.4010, -0.7228 -0.6723; -0.6505 -1.1471, -0.7617 -0.8927, -0.7390 -0.4443, -0.6318 -0.7093; -0.5511 -1.1775, -0.7111 -0.9315, -0.6900 -0.4847, -0.5354 -0.7410; -0.4472 -1.2026, -0.6537 -0.9673, -0.6344 -0.5219, -0.4345 -0.7672; -0.3395 -1.2223, -0.5900 -0.9997, -0.5727 -0.5556, -0.3299 -0.7878; -0.2291 -1.2366, -0.5210 -1.0285, -0.5057 -0.5856, -0.2227 -0.8026; -0.1168 -1.2452, -0.4471 -1.0534, -0.4341 -0.6116, -0.1136 -0.8117; -0.0036 -1.2482, -0.3692 -1.0744, -0.3585 -0.6335, -0.0035 -0.8148; -1.1882 -0.6814, -0.8250 -0.4716, -0.7987 -0.0069, -1.1515 -0.2246">
        </animate>
    </polygon>
</svg>