cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- Hi!!! This is me trying to reverse engineer the page transitions of http://www.facesofpower.net/

The svgs are made using https://github.com/fogleman/primitive -->

<ul>
  <li>
    <a href="#yeojin" class="active">YEOJIN</a>
  </li>
  <li>
    <a href="#nat">NAT</a>
  </li>
  <li>
    <a href="#bwl">bwl</a>
  </li>
  <li>
    <a href="#kevin">kevin</a>
  </li>
</ul>

<svg class="svg-holder" viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<polygon fill="#414116" points="79,242 184,271 129,121" />
<polygon fill="#f10000" points="121,107 94,22 180,39" />
<polygon fill="#f5fffd" points="22,-16 -16,176 153,137" />
<polygon fill="#000000" points="96,188 159,200 139,148" />
<polygon fill="#eaeedf" points="166,-11 155,271 271,195" />
<polygon fill="#d4d9c5" points="196,212 -16,168 14,271" />
<polygon fill="#e2181b" points="147,14 167,67 88,76" />
<polygon fill="#fbffff" points="174,164 106,130 181,50" />
<polygon fill="#fffff9" points="58,53 161,-5 42,-15" />
<polygon fill="#000000" points="115,243 141,237 135,271" />
<polygon fill="#e63237" points="85,61 155,75 115,93" />
<polygon fill="#000003" points="105,182 133,198 117,148" />
<polygon fill="#958f55" points="91,257 103,172 126,271" />
<polygon fill="#af9d58" points="168,271 157,183 136,206" />
<polygon fill="#ff7684" points="88,32 85,71 133,55" />
<polygon fill="#f5996f" points="127,176 136,156 116,157" />
<polygon fill="#d8dbd4" points="104,189 4,-16 -16,255" />
<polygon fill="#000003" points="154,184 142,157 124,195" />
<polygon fill="#f7fbf7" points="124,103 40,21 105,175" />
<polygon fill="#d31c18" points="129,21 148,81 162,35" />
<polygon fill="#e7ede1" points="166,-7 54,22 163,23" />
<polygon fill="#cfc4a0" points="142,245 149,195 104,211" />
<polygon fill="#d9dcd2" points="163,-13 271,134 165,92" />
<polygon fill="#050004" points="131,142 118,142 145,158" />
<polygon fill="#fffff5" points="86,105 59,16 86,6" />
<polygon fill="#dcdbce" points="133,-16 76,-16 129,36" />
<polygon fill="#ecefeb" points="203,71 118,106 158,185" />
<polygon fill="#f74345" points="85,40 123,53 118,22" />
<polygon fill="#ddd5c2" points="271,242 148,138 173,271" />
<polygon fill="#ffffff" points="93,50 107,50 92,64" />
<polygon fill="#090c00" points="137,236 144,271 104,271" />
<polygon fill="#9a905a" points="132,227 158,265 155,187" />
<polygon fill="#cecdc6" points="93,176 -16,250 88,271" />
<polygon fill="#000a0d" points="133,197 123,170 148,191" />
<polygon fill="#4b491e" points="106,252 95,271 105,229" />
<polygon fill="#d7d8cf" points="63,-16 -16,9 23,130" />
<polygon fill="#e43f3d" points="100,77 151,22 141,92" />
<polygon fill="#e1dbd1" points="126,240 137,203 120,201" />
<polygon fill="#e6eae7" points="130,135 78,180 117,87" />
<polygon fill="#061214" points="125,194 116,149 107,190" />
<polygon fill="#bcc0b0" points="254,79 271,3 195,-16" />
<polygon fill="#aba375" points="93,188 118,271 120,197" />
<polygon fill="#dc2a27" points="139,89 152,23 130,23" />
<polygon fill="#e1d7c8" points="270,257 249,83 190,271" />
<polygon fill="#000000" points="118,151 118,147 127,143" />
<polygon fill="#635a27" points="154,258 151,218 141,266" />
<polygon fill="#e5e6e0" points="188,181 210,98 124,137" />
<polygon fill="#f46e71" points="129,73 97,22 109,75" />
<polygon fill="#141a1a" points="101,179 136,197 146,167" />
<polygon fill="#c43831" points="139,87 162,37 165,60" />
<polygon fill="#dbdcd4" points="121,143 -16,223 26,110" />
<polygon fill="#d4d4c8" points="271,119 120,-1 180,-16" />
<polygon fill="#e12d2e" points="105,23 129,49 116,24" />
<polygon fill="#cec7b2" points="204,238 154,190 177,268" />
<polygon fill="#090700" points="132,240 118,240 121,249" />
<polygon fill="#fe545a" points="97,36 86,35 88,58" />
<polygon fill="#c4ba86" points="143,208 151,254 139,244" />
<polygon fill="#d28459" points="136,160 126,147 132,171" />
<polygon fill="#e74443" points="109,84 120,35 132,102" />
<polygon fill="#f7faf7" points="76,92 96,69 109,120" />
<polygon fill="#f5f7f6" points="132,93 172,96 116,145" />
<polygon fill="#d6dad0" points="92,191 18,138 111,165" />
<polygon fill="#d0c7b2" points="135,213 134,236 120,239" />
<polygon fill="#f5f4e8" points="70,110 93,7 39,36" />
<polygon fill="#fffff1" points="97,9 98,32 77,35" />
<polygon fill="#edf4e1" points="124,34 130,30 114,13" />
<polygon fill="#f4a3af" points="99,61 114,58 101,43" />
<polygon fill="#b2ad83" points="93,194 107,182 91,215" />
<polygon fill="#bab58f" points="123,197 106,199 107,257" />
<polygon fill="#ada479" points="165,223 154,189 133,203" />
<polygon fill="#db2e2c" points="163,72 162,36 118,34" />
<polygon fill="#0d1316" points="134,149 141,180 143,160" />
<polygon fill="#655d28" points="117,247 116,234 111,259" />
<polygon fill="#bbc0b0" points="152,68 153,76 173,67" />
<polygon fill="#cf8b6c" points="129,146 118,154 122,169" />
<polygon fill="#d08585" points="86,65 103,83 96,63" />
<polygon fill="#ddd9d0" points="107,-14 115,22 188,23" />
<polygon fill="#b6b1a2" points="162,77 141,79 144,84" />
<polygon fill="#f1f3f0" points="154,74 138,149 175,77" />
<polygon fill="#a7a39e" points="131,103 125,99 120,104" />
<polygon fill="#a1b0a4" points="144,88 133,94 131,90" />
<polygon fill="#191d1b" points="113,187 115,166 104,177" />
<polygon fill="#dcd8cd" points="163,63 173,3 262,164" />
<polygon fill="#fafaf8" points="89,88 107,82 125,125" />
<polygon fill="#cdcbc0" points="6,271 91,205 88,271" />
<polygon fill="#a09a6d" points="100,255 107,191 91,204" />
<polygon fill="#ccccbf" points="220,1 264,97 136,-16" />
<polygon fill="#f96c6e" points="110,48 93,48 101,24" />
<polygon fill="#d32220" points="162,56 149,24 131,24" />
<polygon fill="#0f1818" points="136,198 146,189 115,192" />
<polygon fill="#b67e5f" points="118,163 131,151 126,172" />
<polygon fill="#d4d6ce" points="-16,-3 61,-9 -10,78" />
<polygon fill="#ddd6c6" points="152,6 153,34 171,34" />
<polygon fill="#e23c39" points="133,29 120,100 155,65" />
<polygon fill="#d8dcd5" points="77,177 108,171 116,141" />
<polygon fill="#6e6437" points="150,221 155,261 144,251" />
<polygon fill="#d8d2c1" points="188,271 149,168 217,228" />
<polygon fill="#6b663a" points="104,241 99,225 104,221" />
<polygon fill="#272213" points="123,251 127,238 136,238" />
<polygon fill="#584026" points="129,182 132,170 122,169" />
<polygon fill="#e1e0d8" points="-7,252 -16,75 71,-15" />
<polygon fill="#101919" points="113,176 104,189 152,181" />
<polygon fill="#f0f2ee" points="152,150 172,81 144,83" />
<polygon fill="#f2f4f0" points="142,149 70,95 95,73" />
<polygon fill="#afa099" points="111,95 120,88 110,90" />
<polygon fill="#a79d6b" points="121,240 120,204 109,220" />
<polygon fill="#151917" points="140,157 125,142 134,146" />
<polygon fill="#fee9ef" points="90,51 101,49 95,63" />
<polygon fill="#e94847" points="131,93 109,87 130,37" />
<polygon fill="#efe9dc" points="104,31 94,-7 107,6" />
<polygon fill="#e1dfd6" points="220,116 194,193 139,149" />
<polygon fill="#f4515c" points="96,68 87,59 87,66" />
<polygon fill="#f56763" points="97,24 103,23 97,40" />
<polygon fill="#ddd9ce" points="110,-10 164,-16 122,33" />
<polygon fill="#afa891" points="163,66 168,51 163,35" />
<polygon fill="#242923" points="113,155 119,167 117,148" />
<polygon fill="#e6e9e3" points="73,145 41,72 120,143" />
<polygon fill="#0b1517" points="151,186 141,196 151,177" />
<polygon fill="#dadad1" points="21,176 69,159 4,11" />
<polygon fill="#fffdf3" points="72,39 86,68 85,30" />
<polygon fill="#e7e5dd" points="205,97 166,44 176,159" />
<polygon fill="#f5f4e6" points="50,23 97,34 99,7" />
<polygon fill="#ac714f" points="137,164 127,170 130,147" />
<polygon fill="#a29f6f" points="122,200 116,192 103,190" />
<polygon fill="#d73836" points="152,61 153,78 120,77" />
<polygon fill="#f15559" points="119,50 122,75 95,78" />
<polygon fill="#aba578" points="96,206 91,257 103,247" />
<polygon fill="#bab384" points="115,248 113,230 104,256" />
<polygon fill="#111818" points="153,184 130,181 137,163" />
<polygon fill="#a7b0ab" points="105,84 106,79 100,82" />
<polygon fill="#d03234" points="120,68 101,67 123,62" />
<polygon fill="#f5f6f1" points="98,107 66,72 97,73" />
<polygon fill="#c5bca3" points="136,226 136,238 119,238" />
<polygon fill="#d8d4c9" points="133,218 135,201 122,198" />
<polygon fill="#d4d2c9" points="30,243 119,146 6,216" />
<polygon fill="#d62525" points="138,67 162,65 161,33" />
<polygon fill="#f9faf7" points="129,120 118,95 91,91" />
<polygon fill="#c1bbab" points="219,-15 271,3 261,49" />
<polygon fill="#89804e" points="151,204 155,223 148,216" />
<polygon fill="#d1cfc4" points="83,249 97,177 15,223" />
<polygon fill="#f65e5f" points="87,34 109,36 90,46" />
<polygon fill="#978f6b" points="142,204 132,228 140,223" />
<polygon fill="#d5d5cc" points="42,153 104,185 6,204" />
<polygon fill="#a79962" points="144,240 151,251 148,225" />
<polygon fill="#b1ad77" points="156,271 139,244 147,271" />
<polygon fill="#e78c8b" points="110,51 99,56 115,56" />
<polygon fill="#b8b698" points="107,231 106,194 116,196" />
<polygon fill="#aea36d" points="164,247 154,217 156,257" />
<polygon fill="#e2d7c8" points="245,271 271,214 176,168" />
<polygon fill="#181d1c" points="142,191 115,166 102,181" />
<polygon fill="#d6d3c6" points="234,163 197,28 271,125" />
<polygon fill="#e9e8e3" points="12,121 -15,48 -2,194" />
<polygon fill="#c88d6d" points="123,148 129,149 127,168" />
<polygon fill="#262613" points="150,234 151,239 148,240" />
<polygon fill="#e8e5df" points="126,-16 168,29 152,-4" />
<polygon fill="#e83739" points="114,25 116,40 119,24" />
<polygon fill="#efefe1" points="71,1 49,23 132,22" />
<polygon fill="#edede8" points="154,73 176,72 167,142" />
<polygon fill="#ff8b9b" points="95,66 107,61 87,60" />
<polygon fill="#978860" points="120,232 118,223 125,233" />
<polygon fill="#e8ddcc" points="118,20 130,21 129,33" />
<polygon fill="#c5c08c" points="119,249 113,265 120,268" />
<polygon fill="#1e2121" points="142,155 134,145 141,170" />
<polygon fill="#dde0d9" points="109,169 113,148 39,126" />
<polygon fill="#e94240" points="140,61 140,89 111,29" />
<polygon fill="#c7bca5" points="167,257 161,210 173,234" />
<polygon fill="#20231f" points="119,151 116,161 112,158" />
<polygon fill="#bcad6d" points="148,252 147,266 159,267" />
<polygon fill="#7d7c53" points="143,200 150,191 136,199" />
<polygon fill="#fa8692" points="86,57 87,47 99,43" />
<polygon fill="#b8b497" points="97,233 90,252 92,212" />
<polygon fill="#b78475" points="153,82 154,76 137,82" />
<polygon fill="#bcada7" points="119,99 132,99 129,104" />
<polygon fill="#999362" points="100,253 92,248 102,234" />
<polygon fill="#2b2b1c" points="117,271 125,240 135,249" />
<polygon fill="#dedacb" points="173,51 151,14 192,35" />
<polygon fill="#f9fcf9" points="98,52 97,61 91,58" />
<polygon fill="#7c723d" points="117,244 103,271 115,262" />
<polygon fill="#d8d8d0" points="-16,33 60,-16 12,77" />
<polygon fill="#c3be93" points="142,248 140,235 145,229" />
<polygon fill="#21221e" points="123,144 132,146 117,147" />
<polygon fill="#f04e4d" points="108,89 141,81 119,78" />
<polygon fill="#be2324" points="144,65 131,66 143,70" />
<polygon fill="#7b744a" points="120,229 117,249 115,232" />
<polygon fill="#cccabf" points="95,271 46,244 86,218" />
<polygon fill="#101818" points="129,197 149,188 117,187" />
<polygon fill="#d52c29" points="151,24 130,25 158,49" />
<polygon fill="#f15c59" points="122,47 105,34 120,66" />
<polygon fill="#b59f90" points="163,67 153,72 163,72" />
<polygon fill="#fdc9c2" points="114,53 109,53 109,57" />
<polygon fill="#dcddd3" points="201,170 154,176 139,147" />
<polygon fill="#e4e6e0" points="173,147 160,161 107,127" />
<polygon fill="#ab9593" points="101,83 102,78 110,78" />
<polygon fill="#f4f5f1" points="117,129 71,80 108,84" />
<polygon fill="#111819" points="153,183 141,196 106,186" />
<polygon fill="#ccc5b0" points="121,216 139,214 123,240" />
<polygon fill="#bc3131" points="132,89 120,90 120,86" />
<polygon fill="#ed413d" points="152,78 120,68 150,68" />
<polygon fill="#b5ac7e" points="157,191 160,206 149,197" />
<polygon fill="#ebece1" points="39,56 70,-4 56,90" />
<polygon fill="#98684e" points="127,161 119,151 123,151" />
<polygon fill="#bf886b" points="120,165 129,171 121,150" />
<polygon fill="#c42a2c" points="123,77 129,81 144,76" />
<polygon fill="#d9d7ce" points="87,-2 140,-3 148,23" />
<polygon fill="#c6bc94" points="147,200 142,215 142,199" />
<polygon fill="#bc706b" points="131,99 131,91 129,93" />
<polygon fill="#b8a6a2" points="97,70 89,67 90,74" />
<polygon fill="#fce0e4" points="100,51 96,55 107,53" />
<polygon fill="#bab690" points="103,187 96,192 104,199" />
<polygon fill="#ef5b62" points="103,55 121,59 112,65" />
<polygon fill="#e73939" points="111,38 146,53 132,34" />
<polygon fill="#ef3e3a" points="131,99 123,98 128,89" />
<polygon fill="#c0aea4" points="139,94 133,92 144,90" />
<polygon fill="#f3f3f1" points="144,109 143,83 159,83" />
<polygon fill="#f8f6ed" points="69,32 91,74 66,69" />
<polygon fill="#515031" points="107,245 103,256 104,234" />
<polygon fill="#bbb282" points="111,202 120,200 118,235" />
<polygon fill="#b00b10" points="108,77 111,79 112,77" />
<polygon fill="#918e66" points="97,230 104,205 104,224" />
<polygon fill="#aea97f" points="106,261 107,234 115,266" />
<polygon fill="#d2cec2" points="271,106 205,42 258,141" />
<polygon fill="#121919" points="110,185 121,195 125,175" />
<polygon fill="#dadcd3" points="99,180 43,141 111,163" />
<polygon fill="#151917" points="140,162 144,169 131,171" />
<polygon fill="#d5d6cb" points="156,189 150,164 180,185" />
<polygon fill="#f7f6ea" points="97,28 64,45 80,6" />
<polygon fill="#eb4343" points="107,25 118,24 116,42" />
<polygon fill="#272518" points="122,270 121,241 131,239" />
<polygon fill="#c79981" points="118,161 121,153 121,163" />
<polygon fill="#e0d9ca" points="165,70 168,45 189,43" />
<polygon fill="#f4f4f3" points="133,93 134,117 143,93" />
<polygon fill="#d9d8d1" points="-16,242 5,263 30,157" />
<polygon fill="#baab7f" points="154,224 159,207 164,235" />
<polygon fill="#eeefec" points="142,141 67,114 179,117" />
<polygon fill="#9c6648" points="133,159 121,165 124,160" />
<polygon fill="#f85b60" points="99,69 119,68 98,78" />
<polygon fill="#e0ddd4" points="220,115 211,174 177,49" />
<polygon fill="#604429" points="131,170 126,170 129,181" />
<polygon fill="#f14e4b" points="130,52 110,65 132,64" />
<polygon fill="#4f5448" points="145,176 151,175 146,170" />
<polygon fill="#e4e2da" points="192,80 187,61 154,76" />
<polygon fill="#242419" points="129,263 118,242 137,239" />
<polygon fill="#21221e" points="117,152 117,169 105,181" />
<polygon fill="#151a1a" points="140,164 132,197 152,181" />
<polygon fill="#a37d68" points="164,44 165,50 163,50" />
<polygon fill="#f45352" points="108,79 123,88 129,79" />
<polygon fill="#d3d4cb" points="7,-16 42,6 -12,44" />
<polygon fill="#b3af8d" points="91,207 101,177 103,190" />
<polygon fill="#adaa87" points="98,195 103,213 103,191" />
<polygon fill="#e5e1d4" points="101,1 128,15 128,34" />
</svg>

<svg id="nat" width="100" height="100" class="hidden" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon fill="#ffffff" points="-16,-16 32,69 271,7" />
<polygon fill="#181416" points="186,271 271,75 -16,50" />
<polygon fill="#cbefff" points="-16,18 271,66 251,-16" />
<polygon fill="#ffff81" points="-16,248 72,271 81,147" />
<polygon fill="#261d12" points="105,118 269,269 76,249" />
<polygon fill="#ce9e94" points="139,162 84,53 138,46" />
<polygon fill="#e9f8ff" points="-16,53 240,0 -12,-16" />
<polygon fill="#e3e785" points="182,165 243,170 155,212" />
<polygon fill="#ffff5f" points="271,138 226,219 250,271" />
<polygon fill="#313d21" points="-16,188 159,161 -3,69" />
<polygon fill="#ffffff" points="77,236 -16,241 36,271" />
<polygon fill="#bcbe45" points="26,139 89,220 -16,242" />
<polygon fill="#cbb0a5" points="147,196 195,236 182,192" />
<polygon fill="#a3bdff" points="251,-16 -16,45 271,60" />
<polygon fill="#131e2d" points="96,261 266,57 165,77" />
<polygon fill="#0a0800" points="239,201 221,179 167,271" />
<polygon fill="#fffecb" points="117,271 142,234 132,223" />
<polygon fill="#3c4f6a" points="116,61 37,127 -16,42" />
<polygon fill="#303e52" points="271,74 117,50 266,183" />
<polygon fill="#f5ffff" points="52,-16 68,49 -16,38" />
<polygon fill="#16110d" points="61,258 159,218 144,161" />
<polygon fill="#f7edd9" points="83,92 97,75 57,99" />
<polygon fill="#070718" points="75,97 173,193 48,125" />
<polygon fill="#ffffc3" points="120,123 109,89 128,116" />
<polygon fill="#ecd869" points="236,165 234,253 271,227" />
<polygon fill="#7f8752" points="175,135 271,190 170,178" />
<polygon fill="#ffffed" points="8,252 58,271 124,254" />
<polygon fill="#5f75a6" points="271,57 188,73 116,42" />
<polygon fill="#d1cc71" points="82,231 -16,186 81,186" />
<polygon fill="#687447" points="101,165 34,111 -16,192" />
<polygon fill="#2e3744" points="-16,142 107,68 4,55" />
<polygon fill="#2c2a23" points="216,179 178,199 223,259" />
<polygon fill="#fff2c4" points="115,61 127,66 98,80" />
<polygon fill="#242224" points="151,271 267,253 172,240" />
<polygon fill="#fffedc" points="-16,237 74,241 3,271" />
<polygon fill="#9bb6db" points="145,30 111,62 71,61" />
<polygon fill="#aaa648" points="77,231 -16,240 -3,184" />
<polygon fill="#9cc1ff" points="259,-16 271,67 184,33" />
<polygon fill="#8d5748" points="141,64 108,72 141,149" />
<polygon fill="#e5f1ff" points="-16,-2 154,-16 -1,49" />
<polygon fill="#6d6361" points="133,178 78,228 114,171" />
<polygon fill="#030911" points="119,159 98,155 86,209" />
<polygon fill="#243b0c" points="-16,186 14,172 33,184" />
<polygon fill="#111212" points="112,254 148,118 175,155" />
<polygon fill="#88914b" points="98,155 89,187 -16,162" />
<polygon fill="#807874" points="163,253 173,241 127,224" />
<polygon fill="#a8806f" points="180,241 170,192 196,226" />
<polygon fill="#c2c56d" points="211,173 252,170 242,193" />
<polygon fill="#dee388" points="209,181 178,181 157,206" />
<polygon fill="#a9a091" points="58,108 36,117 71,90" />
<polygon fill="#d3ccea" points="73,236 71,204 83,214" />
<polygon fill="#3c453f" points="249,172 165,148 271,73" />
<polygon fill="#ab766e" points="130,154 119,125 144,132" />
<polygon fill="#3a352e" points="61,254 106,211 121,250" />
<polygon fill="#444e64" points="132,47 180,70 111,63" />
<polygon fill="#bfc25a" points="19,230 93,177 -16,190" />
<polygon fill="#dacc6b" points="271,223 217,224 248,191" />
<polygon fill="#191612" points="236,240 232,229 217,223" />
<polygon fill="#080c10" points="134,173 146,232 174,234" />
<polygon fill="#c3cff6" points="162,-16 38,30 230,27" />
<polygon fill="#17170f" points="233,205 229,182 187,241" />
<polygon fill="#889044" points="-16,233 50,220 48,238" />
<polygon fill="#374360" points="271,93 244,60 155,71" />
<polygon fill="#a47557" points="107,123 117,110 105,78" />
<polygon fill="#6a705a" points="-3,137 -2,164 94,154" />
<polygon fill="#8b9bbe" points="212,42 126,39 178,65" />
<polygon fill="#494948" points="74,113 110,109 102,81" />
<polygon fill="#f3d3ac" points="187,213 161,206 180,206" />
<polygon fill="#6b6d52" points="167,171 223,151 271,170" />
<polygon fill="#fff2b3" points="129,119 111,90 118,115" />
<polygon fill="#495244" points="35,97 65,143 -16,140" />
<polygon fill="#42516d" points="-14,59 105,74 52,48" />
<polygon fill="#554f4b" points="125,162 81,215 96,245" />
<polygon fill="#b4c3de" points="55,26 195,29 73,59" />
<polygon fill="#bfa988" points="131,224 121,259 146,236" />
<polygon fill="#251f17" points="133,217 122,250 80,252" />
<polygon fill="#655552" points="165,222 180,222 151,195" />
<polygon fill="#ffe4c3" points="116,71 121,60 97,79" />
<polygon fill="#2d333a" points="271,109 145,80 143,142" />
<polygon fill="#9b8d91" points="74,212 90,183 89,150" />
<polygon fill="#ffffdb" points="62,269 133,256 92,252" />
<polygon fill="#c9d274" points="33,178 40,193 80,180" />
<polygon fill="#e2c45c" points="227,249 265,232 270,248" />
<polygon fill="#1b1b21" points="162,193 98,110 63,135" />
<polygon fill="#544437" points="229,238 192,249 175,235" />
<polygon fill="#5b5e5a" points="200,197 179,208 173,201" />
<polygon fill="#13191b" points="169,152 114,189 169,192" />
<polygon fill="#7e534f" points="123,107 150,83 112,69" />
<polygon fill="#ffefcc" points="70,239 6,271 -4,238" />
<polygon fill="#a09d48" points="29,200 -9,225 64,202" />
<polygon fill="#e2edff" points="132,-16 35,48 -16,4" />
<polygon fill="#302d20" points="122,268 150,228 143,271" />
<polygon fill="#da996e" points="106,83 109,105 113,78" />
<polygon fill="#403b3c" points="60,107 92,83 121,83" />
<polygon fill="#7d8eb0" points="-16,53 34,49 12,43" />
<polygon fill="#f1efdd" points="81,91 69,90 85,85" />
<polygon fill="#a8af67" points="197,178 242,184 271,168" />
<polygon fill="#6c7b97" points="81,65 53,49 116,60" />
<polygon fill="#ffffd6" points="121,105 117,116 121,121" />
<polygon fill="#736459" points="111,99 78,111 119,112" />
<polygon fill="#3e3e37" points="175,197 221,181 236,193" />
<polygon fill="#c8c7d6" points="173,195 161,194 163,208" />
<polygon fill="#9fc2ff" points="205,35 271,47 250,-16" />
<polygon fill="#778b2c" points="39,179 -7,146 -3,169" />
<polygon fill="#88867f" points="73,87 68,101 44,111" />
<polygon fill="#363d41" points="14,122 -16,80 86,81" />
<polygon fill="#a2755a" points="144,135 119,122 138,108" />
<polygon fill="#87a5e1" points="250,40 271,62 189,48" />
<polygon fill="#675e5b" points="135,174 123,169 103,182" />
<polygon fill="#c5bc5d" points="83,182 76,207 23,229" />
<polygon fill="#918c87" points="71,231 88,216 78,236" />
<polygon fill="#949592" points="89,80 103,74 89,87" />
<polygon fill="#444f44" points="271,157 159,124 189,162" />
<polygon fill="#1f1e18" points="211,223 224,205 178,205" />
<polygon fill="#aba393" points="47,121 45,114 51,107" />
<polygon fill="#181614" points="151,183 108,211 152,233" />
<polygon fill="#191912" points="193,218 193,240 223,217" />
<polygon fill="#ffffff" points="40,-7 49,24 69,3" />
<polygon fill="#8b8f85" points="165,199 153,192 157,207" />
<polygon fill="#fffbdd" points="159,238 159,240 153,237" />
<polygon fill="#586b95" points="202,52 200,65 239,60" />
<polygon fill="#7d7b76" points="112,118 110,128 104,108" />
<polygon fill="#1d261e" points="103,184 86,197 85,215" />
<polygon fill="#110f0c" points="180,251 169,271 172,218" />
<polygon fill="#171820" points="105,174 172,157 165,130" />
<polygon fill="#2c3032" points="153,161 163,102 138,101" />
<polygon fill="#34383c" points="98,76 84,107 108,109" />
<polygon fill="#f0eebc" points="184,185 183,173 186,178" />
<polygon fill="#27242b" points="111,175 128,152 113,115" />
<polygon fill="#444139" points="108,252 92,253 100,209" />
<polygon fill="#211b14" points="134,201 122,254 105,218" />
<polygon fill="#cbcd6f" points="225,179 270,202 247,206" />
<polygon fill="#434e66" points="157,232 173,237 171,249" />
<polygon fill="#72763e" points="206,183 185,180 188,159" />
<polygon fill="#464c54" points="271,251 223,249 253,262" />
<polygon fill="#7a8084" points="164,208 175,193 184,202" />
<polygon fill="#bdd0ea" points="71,52 121,51 43,27" />
<polygon fill="#d5c569" points="222,221 249,240 244,192" />
<polygon fill="#191d14" points="87,242 80,235 89,219" />
<polygon fill="#94716b" points="142,138 132,153 122,132" />
<polygon fill="#f3b784" points="115,99 123,107 110,108" />
<polygon fill="#3c4451" points="45,56 68,91 109,69" />
<polygon fill="#61576a" points="90,154 98,161 87,191" />
<polygon fill="#ffffdd" points="68,271 75,254 120,254" />
<polygon fill="#6d7345" points="170,187 185,167 173,152" />
<polygon fill="#848949" points="233,185 264,189 240,178" />
<polygon fill="#f3f1e3" points="86,83 73,91 78,93" />
<polygon fill="#ffefba" points="114,97 108,99 112,89" />
<polygon fill="#faf0d2" points="-11,256 39,271 74,234" />
<polygon fill="#b7a98a" points="128,229 144,231 134,225" />
<polygon fill="#a07874" points="129,88 140,96 140,81" />
<polygon fill="#47402d" points="224,271 215,221 235,233" />
<polygon fill="#c2d4fe" points="99,4 225,17 223,-16" />
<polygon fill="#9f94a2" points="66,246 75,240 62,256" />
<polygon fill="#a7aa66" points="207,169 241,172 197,186" />
<polygon fill="#485343" points="39,94 49,130 -16,138" />
<polygon fill="#e3ba97" points="186,211 186,214 192,216" />
<polygon fill="#91a4be" points="83,60 53,51 97,52" />
<polygon fill="#fafef1" points="93,80 109,72 102,80" />
<polygon fill="#d2e1fb" points="-3,38 91,7 48,49" />
<polygon fill="#846152" points="176,212 177,236 193,230" />
<polygon fill="#e5e3d7" points="73,226 82,208 72,211" />
<polygon fill="#636952" points="75,142 14,163 88,159" />
<polygon fill="#dad9a6" points="39,176 42,189 37,200" />
<polygon fill="#303746" points="177,69 264,88 271,166" />
<polygon fill="#697530" points="54,165 52,176 82,177" />
<polygon fill="#4f5458" points="89,96 76,96 99,76" />
<polygon fill="#a25f48" points="101,85 109,90 113,69" />
<polygon fill="#5c6e84" points="114,57 154,53 133,46" />
<polygon fill="#efc988" points="65,237 58,236 67,222" />
<polygon fill="#877a51" points="47,223 64,223 57,230" />
<polygon fill="#e1cc6c" points="270,224 246,210 232,249" />
<polygon fill="#cdd15c" points="171,190 200,183 181,196" />
<polygon fill="#bcbe56" points="-16,213 12,212 19,180" />
<polygon fill="#664236" points="112,88 119,69 125,89" />
<polygon fill="#26261c" points="236,194 219,221 225,182" />
<polygon fill="#a09b32" points="248,245 260,246 247,237" />
<polygon fill="#464239" points="202,192 178,197 204,208" />
<polygon fill="#675a4a" points="225,240 208,238 222,228" />
<polygon fill="#4f622d" points="11,168 36,184 12,186" />
<polygon fill="#7f7b61" points="143,230 129,253 143,243" />
<polygon fill="#445472" points="-16,50 29,51 -16,66" />
<polygon fill="#2e3028" points="92,241 89,226 64,255" />
<polygon fill="#4a433e" points="131,169 116,202 96,211" />
<polygon fill="#1f1e19" points="226,251 179,266 146,254" />
<polygon fill="#353e4d" points="166,66 157,107 133,57" />
<polygon fill="#1f232c" points="49,122 70,103 55,108" />
<polygon fill="#514d48" points="156,149 148,140 150,126" />
<polygon fill="#475044" points="263,121 216,139 258,168" />
<polygon fill="#3b4c11" points="83,172 82,162 78,173" />
<polygon fill="#6b715a" points="40,139 24,161 -16,151" />
<polygon fill="#c2bb5f" points="68,220 -14,228 81,190" />
<polygon fill="#f2e7cd" points="8,240 51,237 65,252" />
<polygon fill="#3c3634" points="137,82 130,79 129,85" />
<polygon fill="#31393c" points="188,146 140,116 164,69" />
<polygon fill="#a8b7d6" points="115,57 140,37 95,30" />
<polygon fill="#ffd1a4" points="113,71 120,60 111,66" />
<polygon fill="#1a1512" points="185,271 175,259 181,230" />
<polygon fill="#171a1c" points="127,149 135,204 174,182" />
<polygon fill="#f9e4b1" points="112,80 110,85 114,84" />
<polygon fill="#8698b2" points="39,50 65,55 54,47" />
<polygon fill="#191a1b" points="55,127 103,116 100,158" />
<polygon fill="#adbee3" points="186,16 212,30 129,41" />
<polygon fill="#ffe8ae" points="126,113 117,106 122,124" />
<polygon fill="#535e75" points="72,61 116,60 99,69" />
<polygon fill="#3c4865" points="268,60 199,70 271,81" />
<polygon fill="#fffffc" points="72,245 71,236 67,240" />
<polygon fill="#87706d" points="141,91 126,59 138,65" />
<polygon fill="#131311" points="166,220 124,217 157,235" />
<polygon fill="#cee2ff" points="23,38 11,46 -16,11" />
<polygon fill="#654540" points="172,213 166,216 171,228" />
<polygon fill="#e5e1c4" points="229,178 232,185 231,177" />
<polygon fill="#7f786b" points="74,228 78,235 75,242" />
<polygon fill="#907264" points="192,218 183,211 181,242" />
<polygon fill="#ffe1b4" points="165,210 181,209 176,206" />
<polygon fill="#95583f" points="129,117 123,118 130,128" />
<polygon fill="#685c57" points="112,176 102,201 125,178" />
<polygon fill="#11191f" points="172,146 164,193 153,125" />
<polygon fill="#f0e8dc" points="162,205 164,198 171,194" />
<polygon fill="#383323" points="235,242 224,254 224,225" />
<polygon fill="#c4c1bf" points="177,199 162,201 172,193" />
<polygon fill="#88b6ff" points="237,50 246,28 271,44" />
<polygon fill="#2d2b24" points="119,238 121,252 74,251" />
<polygon fill="#78766d" points="162,193 162,212 152,193" />
<polygon fill="#cecc6c" points="236,188 271,192 239,225" />
<polygon fill="#c1b598" points="135,247 120,260 136,227" />
<polygon fill="#364055" points="53,56 -16,113 -12,62" />
<polygon fill="#8c6b61" points="189,236 181,211 170,209" />
<polygon fill="#bec461" points="41,204 84,176 40,180" />
<polygon fill="#cce1ff" points="16,13 38,-16 -16,1" />
<polygon fill="#768e37" points="44,160 37,180 0,162" />
<polygon fill="#27262b" points="108,135 129,170 117,121" />
<polygon fill="#7b8ca4" points="123,49 157,51 133,42" />
<polygon fill="#3f3e3f" points="107,90 102,109 85,85" />
<polygon fill="#9d9684" points="80,185 88,174 82,207" />
<polygon fill="#906449" points="116,104 109,111 116,113" />
<polygon fill="#707432" points="4,221 -16,214 6,214" />
<polygon fill="#d9d3c0" points="71,229 79,229 74,215" />
<polygon fill="#7d7e7c" points="82,108 75,111 90,111" />
<polygon fill="#dbc8a4" points="16,242 -2,241 8,245" />
<polygon fill="#879145" points="39,227 1,229 24,238" />
<polygon fill="#62781f" points="-10,190 13,167 -16,176" />
<polygon fill="#605852" points="95,206 95,242 87,214" />
<polygon fill="#87867f" points="77,220 89,213 80,230" />
<polygon fill="#161510" points="184,253 187,242 169,235" />
<polygon fill="#292d26" points="92,203 91,188 82,208" />
<polygon fill="#65564f" points="174,244 152,241 144,251" />
<polygon fill="#90675d" points="118,121 137,149 143,137" />
<polygon fill="#c5d3f4" points="217,-16 168,24 67,22" />
<polygon fill="#18171b" points="157,173 146,122 126,216" />
</svg>


<svg id="yeojin" class="hidden" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon fill="#414116" points="79,242 184,271 129,121" />
<polygon fill="#f10000" points="121,107 94,22 180,39" />
<polygon fill="#f5fffd" points="22,-16 -16,176 153,137" />
<polygon fill="#000000" points="96,188 159,200 139,148" />
<polygon fill="#eaeedf" points="166,-11 155,271 271,195" />
<polygon fill="#d4d9c5" points="196,212 -16,168 14,271" />
<polygon fill="#e2181b" points="147,14 167,67 88,76" />
<polygon fill="#fbffff" points="174,164 106,130 181,50" />
<polygon fill="#fffff9" points="58,53 161,-5 42,-15" />
<polygon fill="#000000" points="115,243 141,237 135,271" />
<polygon fill="#e63237" points="85,61 155,75 115,93" />
<polygon fill="#000003" points="105,182 133,198 117,148" />
<polygon fill="#958f55" points="91,257 103,172 126,271" />
<polygon fill="#af9d58" points="168,271 157,183 136,206" />
<polygon fill="#ff7684" points="88,32 85,71 133,55" />
<polygon fill="#f5996f" points="127,176 136,156 116,157" />
<polygon fill="#d8dbd4" points="104,189 4,-16 -16,255" />
<polygon fill="#000003" points="154,184 142,157 124,195" />
<polygon fill="#f7fbf7" points="124,103 40,21 105,175" />
<polygon fill="#d31c18" points="129,21 148,81 162,35" />
<polygon fill="#e7ede1" points="166,-7 54,22 163,23" />
<polygon fill="#cfc4a0" points="142,245 149,195 104,211" />
<polygon fill="#d9dcd2" points="163,-13 271,134 165,92" />
<polygon fill="#050004" points="131,142 118,142 145,158" />
<polygon fill="#fffff5" points="86,105 59,16 86,6" />
<polygon fill="#dcdbce" points="133,-16 76,-16 129,36" />
<polygon fill="#ecefeb" points="203,71 118,106 158,185" />
<polygon fill="#f74345" points="85,40 123,53 118,22" />
<polygon fill="#ddd5c2" points="271,242 148,138 173,271" />
<polygon fill="#ffffff" points="93,50 107,50 92,64" />
<polygon fill="#090c00" points="137,236 144,271 104,271" />
<polygon fill="#9a905a" points="132,227 158,265 155,187" />
<polygon fill="#cecdc6" points="93,176 -16,250 88,271" />
<polygon fill="#000a0d" points="133,197 123,170 148,191" />
<polygon fill="#4b491e" points="106,252 95,271 105,229" />
<polygon fill="#d7d8cf" points="63,-16 -16,9 23,130" />
<polygon fill="#e43f3d" points="100,77 151,22 141,92" />
<polygon fill="#e1dbd1" points="126,240 137,203 120,201" />
<polygon fill="#e6eae7" points="130,135 78,180 117,87" />
<polygon fill="#061214" points="125,194 116,149 107,190" />
<polygon fill="#bcc0b0" points="254,79 271,3 195,-16" />
<polygon fill="#aba375" points="93,188 118,271 120,197" />
<polygon fill="#dc2a27" points="139,89 152,23 130,23" />
<polygon fill="#e1d7c8" points="270,257 249,83 190,271" />
<polygon fill="#000000" points="118,151 118,147 127,143" />
<polygon fill="#635a27" points="154,258 151,218 141,266" />
<polygon fill="#e5e6e0" points="188,181 210,98 124,137" />
<polygon fill="#f46e71" points="129,73 97,22 109,75" />
<polygon fill="#141a1a" points="101,179 136,197 146,167" />
<polygon fill="#c43831" points="139,87 162,37 165,60" />
<polygon fill="#dbdcd4" points="121,143 -16,223 26,110" />
<polygon fill="#d4d4c8" points="271,119 120,-1 180,-16" />
<polygon fill="#e12d2e" points="105,23 129,49 116,24" />
<polygon fill="#cec7b2" points="204,238 154,190 177,268" />
<polygon fill="#090700" points="132,240 118,240 121,249" />
<polygon fill="#fe545a" points="97,36 86,35 88,58" />
<polygon fill="#c4ba86" points="143,208 151,254 139,244" />
<polygon fill="#d28459" points="136,160 126,147 132,171" />
<polygon fill="#e74443" points="109,84 120,35 132,102" />
<polygon fill="#f7faf7" points="76,92 96,69 109,120" />
<polygon fill="#f5f7f6" points="132,93 172,96 116,145" />
<polygon fill="#d6dad0" points="92,191 18,138 111,165" />
<polygon fill="#d0c7b2" points="135,213 134,236 120,239" />
<polygon fill="#f5f4e8" points="70,110 93,7 39,36" />
<polygon fill="#fffff1" points="97,9 98,32 77,35" />
<polygon fill="#edf4e1" points="124,34 130,30 114,13" />
<polygon fill="#f4a3af" points="99,61 114,58 101,43" />
<polygon fill="#b2ad83" points="93,194 107,182 91,215" />
<polygon fill="#bab58f" points="123,197 106,199 107,257" />
<polygon fill="#ada479" points="165,223 154,189 133,203" />
<polygon fill="#db2e2c" points="163,72 162,36 118,34" />
<polygon fill="#0d1316" points="134,149 141,180 143,160" />
<polygon fill="#655d28" points="117,247 116,234 111,259" />
<polygon fill="#bbc0b0" points="152,68 153,76 173,67" />
<polygon fill="#cf8b6c" points="129,146 118,154 122,169" />
<polygon fill="#d08585" points="86,65 103,83 96,63" />
<polygon fill="#ddd9d0" points="107,-14 115,22 188,23" />
<polygon fill="#b6b1a2" points="162,77 141,79 144,84" />
<polygon fill="#f1f3f0" points="154,74 138,149 175,77" />
<polygon fill="#a7a39e" points="131,103 125,99 120,104" />
<polygon fill="#a1b0a4" points="144,88 133,94 131,90" />
<polygon fill="#191d1b" points="113,187 115,166 104,177" />
<polygon fill="#dcd8cd" points="163,63 173,3 262,164" />
<polygon fill="#fafaf8" points="89,88 107,82 125,125" />
<polygon fill="#cdcbc0" points="6,271 91,205 88,271" />
<polygon fill="#a09a6d" points="100,255 107,191 91,204" />
<polygon fill="#ccccbf" points="220,1 264,97 136,-16" />
<polygon fill="#f96c6e" points="110,48 93,48 101,24" />
<polygon fill="#d32220" points="162,56 149,24 131,24" />
<polygon fill="#0f1818" points="136,198 146,189 115,192" />
<polygon fill="#b67e5f" points="118,163 131,151 126,172" />
<polygon fill="#d4d6ce" points="-16,-3 61,-9 -10,78" />
<polygon fill="#ddd6c6" points="152,6 153,34 171,34" />
<polygon fill="#e23c39" points="133,29 120,100 155,65" />
<polygon fill="#d8dcd5" points="77,177 108,171 116,141" />
<polygon fill="#6e6437" points="150,221 155,261 144,251" />
<polygon fill="#d8d2c1" points="188,271 149,168 217,228" />
<polygon fill="#6b663a" points="104,241 99,225 104,221" />
<polygon fill="#272213" points="123,251 127,238 136,238" />
<polygon fill="#584026" points="129,182 132,170 122,169" />
<polygon fill="#e1e0d8" points="-7,252 -16,75 71,-15" />
<polygon fill="#101919" points="113,176 104,189 152,181" />
<polygon fill="#f0f2ee" points="152,150 172,81 144,83" />
<polygon fill="#f2f4f0" points="142,149 70,95 95,73" />
<polygon fill="#afa099" points="111,95 120,88 110,90" />
<polygon fill="#a79d6b" points="121,240 120,204 109,220" />
<polygon fill="#151917" points="140,157 125,142 134,146" />
<polygon fill="#fee9ef" points="90,51 101,49 95,63" />
<polygon fill="#e94847" points="131,93 109,87 130,37" />
<polygon fill="#efe9dc" points="104,31 94,-7 107,6" />
<polygon fill="#e1dfd6" points="220,116 194,193 139,149" />
<polygon fill="#f4515c" points="96,68 87,59 87,66" />
<polygon fill="#f56763" points="97,24 103,23 97,40" />
<polygon fill="#ddd9ce" points="110,-10 164,-16 122,33" />
<polygon fill="#afa891" points="163,66 168,51 163,35" />
<polygon fill="#242923" points="113,155 119,167 117,148" />
<polygon fill="#e6e9e3" points="73,145 41,72 120,143" />
<polygon fill="#0b1517" points="151,186 141,196 151,177" />
<polygon fill="#dadad1" points="21,176 69,159 4,11" />
<polygon fill="#fffdf3" points="72,39 86,68 85,30" />
<polygon fill="#e7e5dd" points="205,97 166,44 176,159" />
<polygon fill="#f5f4e6" points="50,23 97,34 99,7" />
<polygon fill="#ac714f" points="137,164 127,170 130,147" />
<polygon fill="#a29f6f" points="122,200 116,192 103,190" />
<polygon fill="#d73836" points="152,61 153,78 120,77" />
<polygon fill="#f15559" points="119,50 122,75 95,78" />
<polygon fill="#aba578" points="96,206 91,257 103,247" />
<polygon fill="#bab384" points="115,248 113,230 104,256" />
<polygon fill="#111818" points="153,184 130,181 137,163" />
<polygon fill="#a7b0ab" points="105,84 106,79 100,82" />
<polygon fill="#d03234" points="120,68 101,67 123,62" />
<polygon fill="#f5f6f1" points="98,107 66,72 97,73" />
<polygon fill="#c5bca3" points="136,226 136,238 119,238" />
<polygon fill="#d8d4c9" points="133,218 135,201 122,198" />
<polygon fill="#d4d2c9" points="30,243 119,146 6,216" />
<polygon fill="#d62525" points="138,67 162,65 161,33" />
<polygon fill="#f9faf7" points="129,120 118,95 91,91" />
<polygon fill="#c1bbab" points="219,-15 271,3 261,49" />
<polygon fill="#89804e" points="151,204 155,223 148,216" />
<polygon fill="#d1cfc4" points="83,249 97,177 15,223" />
<polygon fill="#f65e5f" points="87,34 109,36 90,46" />
<polygon fill="#978f6b" points="142,204 132,228 140,223" />
<polygon fill="#d5d5cc" points="42,153 104,185 6,204" />
<polygon fill="#a79962" points="144,240 151,251 148,225" />
<polygon fill="#b1ad77" points="156,271 139,244 147,271" />
<polygon fill="#e78c8b" points="110,51 99,56 115,56" />
<polygon fill="#b8b698" points="107,231 106,194 116,196" />
<polygon fill="#aea36d" points="164,247 154,217 156,257" />
<polygon fill="#e2d7c8" points="245,271 271,214 176,168" />
<polygon fill="#181d1c" points="142,191 115,166 102,181" />
<polygon fill="#d6d3c6" points="234,163 197,28 271,125" />
<polygon fill="#e9e8e3" points="12,121 -15,48 -2,194" />
<polygon fill="#c88d6d" points="123,148 129,149 127,168" />
<polygon fill="#262613" points="150,234 151,239 148,240" />
<polygon fill="#e8e5df" points="126,-16 168,29 152,-4" />
<polygon fill="#e83739" points="114,25 116,40 119,24" />
<polygon fill="#efefe1" points="71,1 49,23 132,22" />
<polygon fill="#edede8" points="154,73 176,72 167,142" />
<polygon fill="#ff8b9b" points="95,66 107,61 87,60" />
<polygon fill="#978860" points="120,232 118,223 125,233" />
<polygon fill="#e8ddcc" points="118,20 130,21 129,33" />
<polygon fill="#c5c08c" points="119,249 113,265 120,268" />
<polygon fill="#1e2121" points="142,155 134,145 141,170" />
<polygon fill="#dde0d9" points="109,169 113,148 39,126" />
<polygon fill="#e94240" points="140,61 140,89 111,29" />
<polygon fill="#c7bca5" points="167,257 161,210 173,234" />
<polygon fill="#20231f" points="119,151 116,161 112,158" />
<polygon fill="#bcad6d" points="148,252 147,266 159,267" />
<polygon fill="#7d7c53" points="143,200 150,191 136,199" />
<polygon fill="#fa8692" points="86,57 87,47 99,43" />
<polygon fill="#b8b497" points="97,233 90,252 92,212" />
<polygon fill="#b78475" points="153,82 154,76 137,82" />
<polygon fill="#bcada7" points="119,99 132,99 129,104" />
<polygon fill="#999362" points="100,253 92,248 102,234" />
<polygon fill="#2b2b1c" points="117,271 125,240 135,249" />
<polygon fill="#dedacb" points="173,51 151,14 192,35" />
<polygon fill="#f9fcf9" points="98,52 97,61 91,58" />
<polygon fill="#7c723d" points="117,244 103,271 115,262" />
<polygon fill="#d8d8d0" points="-16,33 60,-16 12,77" />
<polygon fill="#c3be93" points="142,248 140,235 145,229" />
<polygon fill="#21221e" points="123,144 132,146 117,147" />
<polygon fill="#f04e4d" points="108,89 141,81 119,78" />
<polygon fill="#be2324" points="144,65 131,66 143,70" />
<polygon fill="#7b744a" points="120,229 117,249 115,232" />
<polygon fill="#cccabf" points="95,271 46,244 86,218" />
<polygon fill="#101818" points="129,197 149,188 117,187" />
<polygon fill="#d52c29" points="151,24 130,25 158,49" />
<polygon fill="#f15c59" points="122,47 105,34 120,66" />
<polygon fill="#b59f90" points="163,67 153,72 163,72" />
<polygon fill="#fdc9c2" points="114,53 109,53 109,57" />
<polygon fill="#dcddd3" points="201,170 154,176 139,147" />
<polygon fill="#e4e6e0" points="173,147 160,161 107,127" />
<polygon fill="#ab9593" points="101,83 102,78 110,78" />
<polygon fill="#f4f5f1" points="117,129 71,80 108,84" />
<polygon fill="#111819" points="153,183 141,196 106,186" />
<polygon fill="#ccc5b0" points="121,216 139,214 123,240" />
<polygon fill="#bc3131" points="132,89 120,90 120,86" />
<polygon fill="#ed413d" points="152,78 120,68 150,68" />
<polygon fill="#b5ac7e" points="157,191 160,206 149,197" />
<polygon fill="#ebece1" points="39,56 70,-4 56,90" />
<polygon fill="#98684e" points="127,161 119,151 123,151" />
<polygon fill="#bf886b" points="120,165 129,171 121,150" />
<polygon fill="#c42a2c" points="123,77 129,81 144,76" />
<polygon fill="#d9d7ce" points="87,-2 140,-3 148,23" />
<polygon fill="#c6bc94" points="147,200 142,215 142,199" />
<polygon fill="#bc706b" points="131,99 131,91 129,93" />
<polygon fill="#b8a6a2" points="97,70 89,67 90,74" />
<polygon fill="#fce0e4" points="100,51 96,55 107,53" />
<polygon fill="#bab690" points="103,187 96,192 104,199" />
<polygon fill="#ef5b62" points="103,55 121,59 112,65" />
<polygon fill="#e73939" points="111,38 146,53 132,34" />
<polygon fill="#ef3e3a" points="131,99 123,98 128,89" />
<polygon fill="#c0aea4" points="139,94 133,92 144,90" />
<polygon fill="#f3f3f1" points="144,109 143,83 159,83" />
<polygon fill="#f8f6ed" points="69,32 91,74 66,69" />
<polygon fill="#515031" points="107,245 103,256 104,234" />
<polygon fill="#bbb282" points="111,202 120,200 118,235" />
<polygon fill="#b00b10" points="108,77 111,79 112,77" />
<polygon fill="#918e66" points="97,230 104,205 104,224" />
<polygon fill="#aea97f" points="106,261 107,234 115,266" />
<polygon fill="#d2cec2" points="271,106 205,42 258,141" />
<polygon fill="#121919" points="110,185 121,195 125,175" />
<polygon fill="#dadcd3" points="99,180 43,141 111,163" />
<polygon fill="#151917" points="140,162 144,169 131,171" />
<polygon fill="#d5d6cb" points="156,189 150,164 180,185" />
<polygon fill="#f7f6ea" points="97,28 64,45 80,6" />
<polygon fill="#eb4343" points="107,25 118,24 116,42" />
<polygon fill="#272518" points="122,270 121,241 131,239" />
<polygon fill="#c79981" points="118,161 121,153 121,163" />
<polygon fill="#e0d9ca" points="165,70 168,45 189,43" />
<polygon fill="#f4f4f3" points="133,93 134,117 143,93" />
<polygon fill="#d9d8d1" points="-16,242 5,263 30,157" />
<polygon fill="#baab7f" points="154,224 159,207 164,235" />
<polygon fill="#eeefec" points="142,141 67,114 179,117" />
<polygon fill="#9c6648" points="133,159 121,165 124,160" />
<polygon fill="#f85b60" points="99,69 119,68 98,78" />
<polygon fill="#e0ddd4" points="220,115 211,174 177,49" />
<polygon fill="#604429" points="131,170 126,170 129,181" />
<polygon fill="#f14e4b" points="130,52 110,65 132,64" />
<polygon fill="#4f5448" points="145,176 151,175 146,170" />
<polygon fill="#e4e2da" points="192,80 187,61 154,76" />
<polygon fill="#242419" points="129,263 118,242 137,239" />
<polygon fill="#21221e" points="117,152 117,169 105,181" />
<polygon fill="#151a1a" points="140,164 132,197 152,181" />
<polygon fill="#a37d68" points="164,44 165,50 163,50" />
<polygon fill="#f45352" points="108,79 123,88 129,79" />
<polygon fill="#d3d4cb" points="7,-16 42,6 -12,44" />
<polygon fill="#b3af8d" points="91,207 101,177 103,190" />
<polygon fill="#adaa87" points="98,195 103,213 103,191" />
<polygon fill="#e5e1d4" points="101,1 128,15 128,34" />
</svg>

<svg id="bwl" class="hidden" xmlns="http://www.w3.org/2000/svg" version="1.1" width="916" height="1024">
<rect x="0" y="0" width="916" height="1024" fill="#9a8684" />
<g transform="scale(4.000000) translate(0.5 0.5)">
<polygon fill="#ffffff" points="-16,-8 5,194 244,0" />
<polygon fill="#150000" points="244,253 128,107 -16,256" />
<polygon fill="#000000" points="-13,171 -14,271 131,185" />
<polygon fill="#fff5c6" points="-16,153 244,154 199,95" />
<polygon fill="#030000" points="219,271 131,174 244,161" />
<polygon fill="#2f0b10" points="64,68 59,134 11,119" />
<polygon fill="#ffffff" points="-8,-16 60,95 191,2" />
<polygon fill="#22120d" points="224,6 244,126 182,87" />
<polygon fill="#c67c67" points="147,43 151,271 76,144" />
<polygon fill="#0d0010" points="-16,242 193,271 5,173" />
<polygon fill="#ffffff" points="210,163 244,162 195,94" />
<polygon fill="#ffffff" points="109,138 -16,185 -8,127" />
<polygon fill="#ffffff" points="198,66 167,74 187,5" />
<polygon fill="#f4dcd1" points="144,216 173,250 201,255" />
<polygon fill="#311531" points="143,271 79,153 -16,200" />
<polygon fill="#9a7873" points="109,71 51,89 -12,73" />
<polygon fill="#2d1e1c" points="238,91 157,76 156,98" />
<polygon fill="#fffff4" points="45,171 5,85 -16,176" />
<polygon fill="#422b2c" points="54,227 142,148 203,152" />
<polygon fill="#ffffff" points="85,71 -16,-16 185,-16" />
<polygon fill="#4b2e33" points="29,137 22,96 75,106" />
<polygon fill="#ffc683" points="163,229 150,193 117,188" />
<polygon fill="#ffffff" points="197,117 244,115 213,164" />
<polygon fill="#8c818c" points="170,81 101,74 174,32" />
<polygon fill="#ffffff" points="82,140 78,91 39,170" />
<polygon fill="#fffffd" points="152,112 145,67 159,70" />
<polygon fill="#c17f6c" points="150,164 94,186 79,79" />
<polygon fill="#f6b68e" points="115,199 144,250 112,220" />
<polygon fill="#463230" points="244,116 233,-16 207,115" />
<polygon fill="#fffdd5" points="7,79 7,97 71,89" />
<polygon fill="#1b0204" points="202,168 230,242 231,163" />
<polygon fill="#1a0204" points="38,173 14,271 -16,177" />
<polygon fill="#341f36" points="127,185 32,271 44,168" />
<polygon fill="#fffff5" points="206,196 215,208 206,181" />
<polygon fill="#b89453" points="208,156 143,146 198,120" />
<polygon fill="#4a2e30" points="36,133 67,96 64,124" />
<polygon fill="#0d0000" points="-2,58 4,82 -7,105" />
<polygon fill="#000005" points="164,240 184,261 95,271" />
<polygon fill="#250b23" points="156,216 215,271 208,195" />
<polygon fill="#874535" points="143,134 119,185 110,129" />
<polygon fill="#e4bfad" points="87,167 87,98 110,183" />
<polygon fill="#ffd38e" points="29,271 34,242 25,247" />
<polygon fill="#341f2d" points="132,184 237,239 150,144" />
<polygon fill="#fbd1be" points="111,76 178,105 34,90" />
<polygon fill="#fffff1" points="244,140 184,164 234,163" />
<polygon fill="#964f94" points="-16,89 11,38 0,-16" />
<polygon fill="#ffffff" points="1,-16 12,33 148,23" />
<polygon fill="#c6a5c8" points="-3,35 50,69 62,31" />
<polygon fill="#fff7e6" points="164,-16 204,39 179,75" />
<polygon fill="#fffffc" points="34,171 89,140 16,129" />
<polygon fill="#f2da98" points="172,138 147,105 211,94" />
<polygon fill="#968793" points="182,-9 215,-4 177,21" />
<polygon fill="#ffce9d" points="138,189 111,208 127,184" />
<polygon fill="#9d625b" points="102,116 95,101 151,99" />
<polygon fill="#655248" points="241,93 180,99 143,61" />
<polygon fill="#f4f6fb" points="2,39 102,66 159,33" />
<polygon fill="#4f394c" points="91,147 30,180 69,202" />
<polygon fill="#200c22" points="122,182 37,249 85,271" />
<polygon fill="#382230" points="211,200 175,155 121,184" />
<polygon fill="#6f5e59" points="129,68 150,104 145,74" />
<polygon fill="#fffff6" points="3,163 73,118 91,147" />
<polygon fill="#fff2da" points="-16,101 16,82 26,174" />
<polygon fill="#ffffff" points="43,110 37,104 38,110" />
<polygon fill="#847267" points="219,5 195,56 238,9" />
<polygon fill="#f6b4a5" points="90,148 121,92 117,122" />
<polygon fill="#fffffe" points="199,121 244,112 220,162" />
<polygon fill="#513236" points="18,108 35,134 34,93" />
<polygon fill="#fffffc" points="73,136 81,85 66,89" />
<polygon fill="#d29970" points="116,205 125,239 144,228" />
<polygon fill="#ffffe8" points="153,59 172,67 173,75" />
<polygon fill="#e5c186" points="134,173 145,164 144,134" />
<polygon fill="#f5e2c4" points="51,48 -5,66 41,80" />
<polygon fill="#bab6d1" points="151,3 177,32 142,60" />
<polygon fill="#5c1705" points="137,203 138,193 120,209" />
<polygon fill="#200a13" points="228,271 244,242 174,237" />
<polygon fill="#895226" points="191,58 196,39 199,44" />
<polygon fill="#ffffff" points="202,126 207,96 194,107" />
<polygon fill="#665472" points="69,86 80,78 42,79" />
<polygon fill="#8e6264" points="90,72 82,107 81,84" />
<polygon fill="#49342b" points="207,91 244,110 208,116" />
<polygon fill="#ffc992" points="134,211 139,190 153,201" />
<polygon fill="#aa6955" points="146,131 149,87 99,151" />
<polygon fill="#ccb07f" points="186,162 195,108 134,137" />
<polygon fill="#985c93" points="36,34 0,43 6,33" />
<polygon fill="#85644a" points="25,85 41,82 5,71" />
<polygon fill="#4d3842" points="183,192 195,166 138,147" />
<polygon fill="#251321" points="84,183 112,196 137,180" />
<polygon fill="#f0af99" points="80,114 121,124 80,136" />
<polygon fill="#ffffff" points="155,80 144,69 153,102" />
<polygon fill="#fdebce" points="4,72 12,118 31,86" />
<polygon fill="#95786e" points="141,52 175,54 174,67" />
<polygon fill="#ffffed" points="216,19 215,-15 204,28" />
<polygon fill="#61444a" points="67,98 66,118 34,92" />
<polygon fill="#eedfbb" points="191,22 195,71 208,9" />
<polygon fill="#1d091b" points="136,271 136,239 86,234" />
<polygon fill="#443338" points="154,97 208,90 158,77" />
<polygon fill="#0b0513" points="146,221 137,217 151,233" />
<polygon fill="#ffdccf" points="85,91 106,64 85,126" />
<polygon fill="#fffcf6" points="53,65 132,63 88,44" />
<polygon fill="#fefcfd" points="34,6 86,-11 173,48" />
<polygon fill="#8c6443" points="4,138 7,132 12,134" />
<polygon fill="#fffef3" points="-16,174 67,124 40,172" />
<polygon fill="#c6b2ab" points="163,229 178,254 202,258" />
<polygon fill="#51393d" points="23,124 34,132 60,96" />
<polygon fill="#2c160f" points="231,163 193,165 207,173" />
<polygon fill="#7e8295" points="138,48 179,80 130,62" />
<polygon fill="#796198" points="87,147 49,162 79,160" />
<polygon fill="#432d3d" points="110,190 75,156 27,210" />
<polygon fill="#ffedde" points="5,42 -1,5 -16,0" />
<polygon fill="#9c7387" points="16,54 40,53 40,46" />
<polygon fill="#927492" points="141,77 113,63 92,71" />
<polygon fill="#e7e2d3" points="54,87 87,78 71,103" />
<polygon fill="#fffffa" points="172,48 184,74 182,15" />
<polygon fill="#5e493e" points="187,80 217,102 191,63" />
<polygon fill="#a6b3e3" points="114,30 158,27 135,35" />
<polygon fill="#341f27" points="203,180 123,178 219,228" />
<polygon fill="#5c4b4f" points="206,23 243,53 197,69" />
<polygon fill="#a7929c" points="175,23 151,35 172,46" />
<polygon fill="#261226" points="140,271 8,271 108,210" />
<polygon fill="#a0705c" points="128,178 94,148 111,182" />
<polygon fill="#291425" points="166,230 145,179 244,266" />
<polygon fill="#a37e6d" points="131,209 160,215 167,236" />
<polygon fill="#d4cae1" points="53,57 -2,40 103,29" />
<polygon fill="#c39362" points="144,248 134,238 155,236" />
<polygon fill="#b49759" points="221,224 214,205 214,216" />
<polygon fill="#684c40" points="2,54 6,42 -16,42" />
<polygon fill="#6d3624" points="84,110 82,114 81,102" />
<polygon fill="#deb07b" points="24,248 14,262 29,270" />
<polygon fill="#280d1d" points="155,231 152,271 194,271" />
<polygon fill="#d0a897" points="142,107 146,88 124,75" />
<polygon fill="#ffffff" points="139,148 145,145 143,138" />
<polygon fill="#f5eddd" points="68,131 14,132 -16,157" />
<polygon fill="#aa8c66" points="197,41 189,43 199,60" />
<polygon fill="#fffffe" points="176,0 2,-16 13,33" />
<polygon fill="#efdbaa" points="149,101 186,102 147,136" />
<polygon fill="#563d4e" points="46,165 65,157 33,203" />
<polygon fill="#fffffb" points="213,208 212,198 211,204" />
<polygon fill="#a5895e" points="203,140 205,155 160,147" />
<polygon fill="#b59777" points="161,65 157,79 180,76" />
<polygon fill="#ffbf90" points="130,189 128,200 112,201" />
<polygon fill="#332026" points="173,161 140,190 147,146" />
<polygon fill="#8b5856" points="103,98 112,116 94,110" />
<polygon fill="#f3d9d1" points="3,46 43,41 8,56" />
<polygon fill="#ffffff" points="105,38 149,45 151,32" />
<polygon fill="#180107" points="235,271 211,210 208,250" />
<polygon fill="#6f5638" points="244,260 217,222 235,271" />
<polygon fill="#f3e3ce" points="52,84 -5,89 5,107" />
<polygon fill="#9ba2c2" points="159,54 116,57 135,47" />
<polygon fill="#ffffff" points="197,37 186,12 174,42" />
<polygon fill="#9b683f" points="120,182 137,145 143,168" />
<polygon fill="#483033" points="27,128 53,130 65,119" />
<polygon fill="#a15c42" points="114,220 139,194 134,226" />
<polygon fill="#b7a57f" points="209,101 177,100 201,94" />
<polygon fill="#c9a586" points="129,238 141,224 118,223" />
<polygon fill="#b6a498" points="213,-16 207,13 177,15" />
<polygon fill="#7b6476" points="51,79 37,89 50,68" />
<polygon fill="#7c534d" points="123,119 142,111 121,104" />
<polygon fill="#553335" points="30,95 22,121 20,105" />
<polygon fill="#97857a" points="213,23 244,21 217,6" />
<polygon fill="#fffff0" points="204,162 225,119 244,163" />
<polygon fill="#503d3b" points="216,52 206,113 234,115" />
<polygon fill="#532b2d" points="5,86 -16,81 1,66" />
<polygon fill="#321f21" points="-16,177 26,197 40,174" />
<polygon fill="#dfd9b3" points="204,162 190,157 182,163" />
<polygon fill="#fff0d0" points="91,155 91,168 87,158" />
<polygon fill="#705a67" points="179,172 201,173 175,156" />
<polygon fill="#e1c9bf" points="47,67 86,77 101,65" />
<polygon fill="#fff0f0" points="176,23 164,21 152,31" />
<polygon fill="#ffffd6" points="244,7 202,-16 212,3" />
<polygon fill="#ca9480" points="96,160 80,118 116,158" />
<polygon fill="#ffffff" points="149,106 149,81 155,95" />
<polygon fill="#4d3645" points="41,179 92,149 71,181" />
<polygon fill="#fcf3da" points="168,75 184,49 197,63" />
<polygon fill="#362132" points="33,188 36,239 138,180" />
<polygon fill="#19040e" points="13,271 -16,231 35,199" />
<polygon fill="#ffd5a4" points="128,186 130,192 135,187" />
<polygon fill="#724f42" points="181,252 179,246 168,241" />
<polygon fill="#180312" points="48,271 52,205 70,271" />
<polygon fill="#ffc6af" points="122,212 113,217 114,203" />
<polygon fill="#615031" points="206,151 202,157 184,155" />
<polygon fill="#e8ddc9" points="205,178 205,190 213,198" />
<polygon fill="#fcc597" points="140,191 152,197 139,215" />
<polygon fill="#dc9f9a" points="111,122 111,95 135,81" />
<polygon fill="#372526" points="215,220 205,186 191,269" />
<polygon fill="#a27a7b" points="164,61 177,55 153,42" />
<polygon fill="#614c42" points="196,89 192,60 185,97" />
<polygon fill="#481a14" points="121,204 123,210 137,199" />
<polygon fill="#955ec9" points="3,-14 -14,-16 7,25" />
<polygon fill="#413529" points="147,111 147,96 144,104" />
<polygon fill="#f8eee1" points="-9,119 16,128 22,91" />
<polygon fill="#78503d" points="120,174 108,163 141,148" />
<polygon fill="#c18267" points="138,156 121,121 148,108" />
<polygon fill="#fffffd" points="205,139 194,104 222,132" />
<polygon fill="#74262d" points="106,144 118,140 128,145" />
<polygon fill="#ffd7cc" points="100,74 121,85 87,102" />
<polygon fill="#f7f8fc" points="39,110 41,105 34,108" />
<polygon fill="#fcf6df" points="195,16 200,47 204,27" />
<polygon fill="#2e191b" points="226,240 212,191 244,194" />
<polygon fill="#faf9f2" points="64,121 90,146 51,157" />
<polygon fill="#614549" points="21,102 33,121 37,93" />
<polygon fill="#cda27f" points="-7,53 -9,65 18,55" />
<polygon fill="#a177ca" points="41,32 53,35 33,37" />
<polygon fill="#decbc0" points="41,53 40,86 23,54" />
<polygon fill="#29161d" points="118,188 150,180 148,164" />
<polygon fill="#a6978f" points="211,51 214,56 210,66" />
<polygon fill="#fffff2" points="79,95 66,97 80,138" />
<polygon fill="#fefdfc" points="6,33 146,27 153,-16" />
<polygon fill="#321c30" points="116,198 57,211 70,271" />
<polygon fill="#aebde6" points="166,5 151,7 147,34" />
<polygon fill="#f7fbfc" points="57,38 147,32 63,64" />
<polygon fill="#eab29c" points="82,133 78,111 101,117" />
<polygon fill="#5d4449" points="67,113 53,131 21,115" />
<polygon fill="#e0d0a3" points="165,137 166,97 148,100" />
<polygon fill="#513d3f" points="185,156 166,161 158,155" />
<polygon fill="#d3bd93" points="210,30 204,11 203,29" />
<polygon fill="#cdd1d4" points="143,41 141,63 149,44" />
<polygon fill="#694c43" points="81,95 86,106 81,108" />
<polygon fill="#674b41" points="30,80 15,80 15,75" />
<polygon fill="#6b565f" points="144,85 123,70 145,78" />
<polygon fill="#efd7c1" points="46,71 56,50 64,72" />
<polygon fill="#68647a" points="152,57 139,63 155,70" />
<polygon fill="#b97c60" points="128,204 121,225 136,204" />
<polygon fill="#d4bb7e" points="178,135 191,96 197,121" />
<polygon fill="#ffffff" points="164,16 167,-7 188,-6" />
<polygon fill="#8c87a7" points="179,4 179,15 193,8" />
<polygon fill="#f3dfc2" points="25,78 31,53 0,61" />
<polygon fill="#ecebea" points="93,50 129,42 114,66" />
<polygon fill="#b9a5ad" points="95,70 48,72 77,85" />
<polygon fill="#dccccc" points="190,250 186,254 178,241" />
<polygon fill="#6a4d53" points="58,94 45,126 67,103" />
<polygon fill="#7b3e81" points="9,34 6,36 3,24" />
<polygon fill="#d5bc8e" points="145,147 150,119 195,129" />
<polygon fill="#a57d62" points="197,37 191,60 198,49" />
<polygon fill="#533634" points="135,221 131,210 150,225" />
<polygon fill="#2c150f" points="147,148 141,148 146,155" />
<polygon fill="#2d1828" points="213,249 142,178 172,235" />
<polygon fill="#4a3738" points="184,77 185,97 173,77" />
<polygon fill="#90613d" points="134,232 152,238 127,239" />
<polygon fill="#a57455" points="141,218 153,201 162,224" />
<polygon fill="#fdfaf2" points="69,130 -16,157 40,173" />
<polygon fill="#b5b9f3" points="82,32 66,36 55,31" />
<polygon fill="#e9e4da" points="61,94 79,88 46,84" />
<polygon fill="#3a0602" points="135,206 131,203 134,197" />
<polygon fill="#b79ba2" points="33,49 39,69 41,50" />
<polygon fill="#bbb5b5" points="147,69 140,73 128,64" />
<polygon fill="#d29488" points="86,106 97,102 111,142" />
<polygon fill="#261120" points="145,271 135,240 104,234" />
<polygon fill="#c19578" points="137,240 154,240 139,248" />
<polygon fill="#4b3937" points="198,67 212,41 204,94" />
<polygon fill="#fae5d3" points="18,53 10,50 -5,59" />
</g>
</svg>

<svg id="kevin" class="hidden" xmlns="http://www.w3.org/2000/svg" version="1.1" width="916" height="1024">
<rect x="0" y="0" width="916" height="1024" fill="#9a8684" />
<g transform="scale(4.000000) translate(0.5 0.5)">
<polygon fill="#feffff" points="-16,271 103,243 23,149" />
<polygon fill="#130000" points="153,12 73,36 213,72" />
<polygon fill="#724732" points="39,148 135,271 206,143" />
<polygon fill="#f6fffe" points="271,250 176,204 140,271" />
<polygon fill="#2c1f14" points="88,0 114,39 57,119" />
<polygon fill="#28312b" points="251,137 248,-6 216,20" />
<polygon fill="#ffd4b4" points="170,55 151,137 98,58" />
<polygon fill="#3a2b1a" points="204,120 147,24 225,92" />
<polygon fill="#485645" points="82,171 27,194 -7,180" />
<polygon fill="#b3c8bb" points="252,271 198,110 271,165" />
<polygon fill="#514d43" points="234,166 209,206 73,163" />
<polygon fill="#b6c7b9" points="8,65 70,134 -16,158" />
<polygon fill="#36453a" points="55,67 -16,27 45,97" />
<polygon fill="#cfe7db" points="42,57 67,-16 79,40" />
<polygon fill="#e0f3e3" points="63,271 81,185 -16,199" />
<polygon fill="#d4d0c9" points="176,91 129,128 70,100" />
<polygon fill="#a0775b" points="87,271 69,90 156,243" />
<polygon fill="#c6dacd" points="235,62 208,71 235,107" />
<polygon fill="#242a30" points="146,148 94,167 171,176" />
<polygon fill="#d2e6d8" points="123,-16 147,19 109,18" />
<polygon fill="#bfd3c5" points="213,-5 216,50 173,30" />
<polygon fill="#bacdc1" points="49,52 12,-12 25,61" />
<polygon fill="#977764" points="206,130 194,191 95,125" />
<polygon fill="#3b4136" points="271,58 239,39 185,60" />
<polygon fill="#5e6055" points="28,118 4,118 32,157" />
<polygon fill="#c5d5c4" points="158,271 203,205 271,206" />
<polygon fill="#1f1219" points="159,113 192,119 177,106" />
<polygon fill="#112623" points="59,180 57,148 78,165" />
<polygon fill="#b9c8b8" points="7,169 -5,116 93,221" />
<polygon fill="#d7e6d7" points="249,104 241,91 263,80" />
<polygon fill="#c3956b" points="116,43 72,85 165,54" />
<polygon fill="#c79c7f" points="73,142 159,122 89,163" />
<polygon fill="#dde9dc" points="88,231 -14,179 1,271" />
<polygon fill="#4a3a2d" points="63,76 85,55 70,140" />
<polygon fill="#5e685d" points="62,30 42,43 21,-16" />
<polygon fill="#18191f" points="152,131 183,133 173,142" />
<polygon fill="#323228" points="171,-16 187,-16 166,38" />
<polygon fill="#bed2c5" points="74,47 57,108 35,113" />
<polygon fill="#3d4942" points="239,100 257,148 241,143" />
<polygon fill="#575f51" points="6,25 0,75 32,47" />
<polygon fill="#6b776c" points="75,53 76,-12 111,-4" />
<polygon fill="#c0c2bd" points="179,119 80,100 87,126" />
<polygon fill="#464a3e" points="63,46 18,97 53,82" />
<polygon fill="#372f29" points="101,19 189,37 75,54" />
<polygon fill="#c3987d" points="118,132 140,113 185,174" />
<polygon fill="#2a2523" points="121,128 94,125 99,134" />
<polygon fill="#adbfb0" points="197,194 188,221 185,168" />
<polygon fill="#c5d3c4" points="271,170 212,165 209,133" />
<polygon fill="#563e2f" points="205,102 202,129 180,151" />
<polygon fill="#bdcabd" points="81,28 76,52 33,-11" />
<polygon fill="#e1d4b2" points="121,175 132,170 145,178" />
<polygon fill="#6d6f5b" points="166,26 150,-16 138,18" />
<polygon fill="#e6f8f8" points="197,108 189,112 188,134" />
<polygon fill="#a9896a" points="92,223 52,271 151,224" />
<polygon fill="#3b2c1a" points="95,120 93,109 102,113" />
<polygon fill="#3b443a" points="216,176 188,171 203,206" />
<polygon fill="#ac7e58" points="73,90 96,49 131,100" />
<polygon fill="#342121" points="113,182 146,186 170,170" />
<polygon fill="#d1ac8b" points="83,81 181,108 173,59" />
<polygon fill="#c1cec0" points="63,110 -16,119 15,92" />
<polygon fill="#8b9584" points="239,209 208,193 236,157" />
<polygon fill="#786c52" points="187,149 128,251 184,205" />
<polygon fill="#6a5b47" points="171,101 248,115 190,81" />
<polygon fill="#906a4e" points="80,106 43,115 90,147" />
<polygon fill="#42372e" points="136,19 186,35 209,98" />
<polygon fill="#555848" points="33,195 -5,176 23,176" />
<polygon fill="#b9c8b9" points="26,61 25,88 -16,88" />
<polygon fill="#383934" points="230,24 255,75 243,92" />
<polygon fill="#59685b" points="4,156 49,141 64,153" />
<polygon fill="#acb6a7" points="177,30 202,54 186,-16" />
<polygon fill="#c0d2bf" points="271,52 262,17 243,33" />
<polygon fill="#473a30" points="120,124 115,132 113,117" />
<polygon fill="#4c4e45" points="246,11 211,23 240,81" />
<polygon fill="#9f6959" points="127,186 189,177 73,247" />
<polygon fill="#d4e4e4" points="154,127 130,100 163,115" />
<polygon fill="#2d292a" points="77,50 59,93 112,25" />
<polygon fill="#2f2b29" points="106,179 118,168 90,158" />
<polygon fill="#3a402f" points="6,162 1,174 -7,140" />
<polygon fill="#967f68" points="66,125 78,201 130,233" />
<polygon fill="#6b7563" points="199,51 218,45 208,115" />
<polygon fill="#ceede5" points="3,33 -15,-7 -6,83" />
<polygon fill="#bdccc0" points="166,27 158,18 166,-1" />
<polygon fill="#e0e7e7" points="181,104 199,111 197,117" />
<polygon fill="#a4ae9e" points="192,156 215,112 245,135" />
<polygon fill="#494b3f" points="71,-16 97,-16 80,24" />
<polygon fill="#d9c2ab" points="143,55 151,109 110,53" />
<polygon fill="#3d4638" points="17,-6 -5,1 -16,28" />
<polygon fill="#888b7d" points="15,77 16,25 32,45" />
<polygon fill="#bdcbbf" points="34,33 8,28 25,-1" />
<polygon fill="#4e5448" points="266,90 251,124 235,114" />
<polygon fill="#473937" points="111,149 159,160 146,147" />
<polygon fill="#534b4a" points="154,107 168,118 173,105" />
<polygon fill="#c9d2ca" points="79,98 68,111 111,96" />
<polygon fill="#707767" points="212,113 204,82 228,81" />
<polygon fill="#d1dacd" points="-16,191 74,198 88,232" />
<polygon fill="#686b60" points="34,186 47,189 58,166" />
<polygon fill="#6a5a3e" points="118,252 92,214 134,245" />
<polygon fill="#898e7e" points="27,126 62,117 62,92" />
<polygon fill="#616556" points="34,44 44,26 67,27" />
<polygon fill="#655853" points="126,112 116,100 130,106" />
<polygon fill="#b7c7b8" points="31,185 4,155 57,158" />
<polygon fill="#c1d5c5" points="203,-5 207,9 231,8" />
<polygon fill="#675752" points="103,104 92,101 109,99" />
<polygon fill="#b4c0af" points="169,204 165,225 202,215" />
<polygon fill="#585548" points="10,103 -8,87 5,91" />
<polygon fill="#d7a085" points="71,139 54,112 62,150" />
<polygon fill="#37281f" points="163,230 165,205 159,215" />
<polygon fill="#c5d1c0" points="53,66 63,79 70,57" />
<polygon fill="#585e4d" points="62,62 30,77 73,40" />
<polygon fill="#7b4d32" points="100,142 84,136 117,138" />
<polygon fill="#cca686" points="87,160 122,144 88,139" />
<polygon fill="#c0cac1" points="211,17 219,44 194,51" />
<polygon fill="#5e614f" points="231,176 254,175 215,165" />
<polygon fill="#4b5042" points="3,28 17,32 15,70" />
<polygon fill="#a8afad" points="150,133 140,119 191,119" />
<polygon fill="#7a8072" points="271,-2 193,29 253,-16" />
<polygon fill="#5d5f55" points="241,139 217,139 233,144" />
<polygon fill="#e4eee1" points="130,116 111,107 99,116" />
<polygon fill="#ccd9e0" points="88,133 87,127 105,137" />
<polygon fill="#b2bdb1" points="232,51 226,99 241,112" />
<polygon fill="#221f22" points="160,178 170,167 121,165" />
<polygon fill="#413126" points="204,84 191,104 201,112" />
<polygon fill="#d1e1cd" points="271,44 257,104 253,61" />
<polygon fill="#ab805d" points="164,100 193,105 178,67" />
<polygon fill="#8a6948" points="106,45 181,66 153,42" />
<polygon fill="#5f6152" points="144,21 162,0 141,-5" />
<polygon fill="#d5dfd0" points="177,211 263,260 192,246" />
<polygon fill="#dce2df" points="121,134 136,96 142,106" />
<polygon fill="#906d4e" points="113,94 83,70 78,96" />
<polygon fill="#c3d2c3" points="261,154 233,145 242,177" />
<polygon fill="#666a59" points="237,199 268,205 259,196" />
<polygon fill="#bb9983" points="126,239 145,227 110,220" />
<polygon fill="#5e4d46" points="125,114 124,122 129,117" />
<polygon fill="#bdc5ca" points="185,139 158,139 176,144" />
<polygon fill="#865b41" points="91,244 123,248 109,268" />
<polygon fill="#848b7c" points="256,235 238,217 235,235" />
<polygon fill="#725940" points="105,57 70,88 111,21" />
<polygon fill="#aebaaa" points="241,190 213,187 224,174" />
<polygon fill="#becabd" points="39,27 30,62 29,29" />
<polygon fill="#c4d1c3" points="53,4 72,-2 74,45" />
<polygon fill="#666b5e" points="188,12 200,-16 204,7" />
<polygon fill="#636864" points="110,151 90,167 150,157" />
<polygon fill="#c6d3c4" points="250,109 251,88 245,92" />
<polygon fill="#736149" points="107,174 94,224 110,235" />
<polygon fill="#d8e2d7" points="46,42 67,37 40,58" />
<polygon fill="#a88969" points="166,225 138,271 121,260" />
<polygon fill="#bcc6b9" points="3,175 31,147 47,172" />
<polygon fill="#383e3b" points="71,182 52,177 71,155" />
<polygon fill="#5c5953" points="271,174 271,217 250,173" />
<polygon fill="#bd9073" points="181,158 135,133 164,166" />
<polygon fill="#1d171e" points="185,125 182,128 183,134" />
<polygon fill="#8e8d80" points="189,146 196,177 213,167" />
<polygon fill="#8e9181" points="257,9 244,-5 247,45" />
<polygon fill="#5b4630" points="83,113 76,106 67,127" />
<polygon fill="#484d42" points="39,54 35,95 53,85" />
<polygon fill="#bcc7ba" points="132,17 142,-6 95,3" />
<polygon fill="#2a2e30" points="177,126 175,121 172,136" />
<polygon fill="#bfad8c" points="137,171 119,170 137,179" />
<polygon fill="#cbd9cc" points="-7,102 -16,138 18,146" />
<polygon fill="#8f634b" points="155,141 143,124 144,149" />
<polygon fill="#7f7f71" points="229,50 239,63 209,60" />
<polygon fill="#d6dfd9" points="84,100 91,110 86,127" />
<polygon fill="#bbc7b8" points="5,68 -6,89 32,85" />
<polygon fill="#9e4949" points="118,191 147,203 128,221" />
<polygon fill="#8b8e7f" points="103,-16 115,22 96,20" />
<polygon fill="#d4e1cb" points="179,249 167,230 132,271" />
<polygon fill="#95634d" points="117,137 128,151 133,126" />
<polygon fill="#adbdb2" points="231,111 203,125 222,108" />
<polygon fill="#c6d9dc" points="182,143 190,132 190,122" />
<polygon fill="#b99f84" points="114,239 88,228 61,262" />
<polygon fill="#dde6db" points="-16,256 -16,200 87,270" />
<polygon fill="#3c342f" points="151,126 153,132 161,137" />
<polygon fill="#788578" points="56,168 58,157 19,147" />
<polygon fill="#3e3630" points="72,105 70,69 60,99" />
<polygon fill="#71573d" points="207,119 189,54 173,64" />
<polygon fill="#c0cbbd" points="216,211 271,230 244,201" />
<polygon fill="#a7b0a0" points="40,27 66,-3 51,29" />
<polygon fill="#89836f" points="176,31 141,14 158,12" />
<polygon fill="#b58788" points="140,188 134,199 117,188" />
<polygon fill="#3a2f2e" points="167,115 179,108 188,114" />
<polygon fill="#cef3ff" points="107,136 124,131 116,136" />
<polygon fill="#bbc6b7" points="24,124 50,124 59,142" />
<polygon fill="#cbdfd1" points="183,9 185,-16 192,2" />
<polygon fill="#352d2b" points="107,34 193,55 150,23" />
<polygon fill="#c2cfc3" points="234,74 218,85 225,58" />
<polygon fill="#1c171e" points="197,122 193,121 192,133" />
<polygon fill="#1a151b" points="122,175 136,183 119,179" />
<polygon fill="#c3997e" points="126,130 138,149 140,110" />
<polygon fill="#878c7c" points="227,192 250,199 191,212" />
<polygon fill="#3d4036" points="243,139 248,128 257,145" />
<polygon fill="#515b4e" points="51,119 38,121 47,113" />
<polygon fill="#92816c" points="97,184 71,175 98,253" />
<polygon fill="#585950" points="80,24 87,37 132,18" />
<polygon fill="#a2a695" points="197,6 197,57 184,35" />
<polygon fill="#676d62" points="-15,-6 29,-16 45,5" />
<polygon fill="#30312c" points="212,200 198,185 207,202" />
<polygon fill="#878f82" points="187,202 188,164 178,192" />
<polygon fill="#aab4a4" points="62,113 11,121 54,91" />
<polygon fill="#6e786d" points="4,92 41,95 33,86" />
<polygon fill="#c1cdbf" points="24,193 1,184 5,219" />
<polygon fill="#e0ebe6" points="147,115 123,100 152,104" />
<polygon fill="#cad9cb" points="251,185 242,177 245,197" />
<polygon fill="#534742" points="110,128 98,134 88,125" />
<polygon fill="#c0c8c1" points="177,116 182,126 178,134" />
<polygon fill="#aabaa4" points="271,174 248,123 263,121" />
<polygon fill="#3d3e39" points="254,72 241,26 230,50" />
<polygon fill="#5d614f" points="225,44 202,75 201,52" />
<polygon fill="#999585" points="70,103 81,96 65,121" />
<polygon fill="#ceb090" points="98,73 138,105 129,50" />
<polygon fill="#a77d64" points="188,163 198,116 205,139" />
<polygon fill="#d8d6d4" points="120,101 100,97 106,94" />
<polygon fill="#a9b3a3" points="263,247 193,215 226,214" />
<polygon fill="#483e37" points="184,134 174,141 152,130" />
<polygon fill="#c4a484" points="165,57 177,99 152,93" />
<polygon fill="#c8cfcc" points="172,117 168,129 173,132" />
<polygon fill="#9a9d8b" points="63,180 33,183 26,196" />
<polygon fill="#757666" points="236,84 249,87 239,100" />
<polygon fill="#7a6044" points="110,89 128,98 104,94" />
<polygon fill="#7a7e71" points="28,68 21,26 6,74" />
<polygon fill="#c8d4c5" points="16,102 -16,96 15,119" />
<polygon fill="#6f7366" points="37,183 -7,176 11,190" />
<polygon fill="#6a4a31" points="189,143 159,143 178,149" />
<polygon fill="#b5bfb1" points="70,28 79,45 73,55" />
<polygon fill="#9da69f" points="146,154 140,155 153,162" />
<polygon fill="#7e8a7b" points="245,122 216,109 238,135" />
<polygon fill="#595a4b" points="202,172 222,167 196,211" />
<polygon fill="#3b3f41" points="178,196 185,205 174,201" />
<polygon fill="#76796e" points="25,151 4,119 29,131" />
<polygon fill="#c4d0c1" points="224,103 232,83 238,104" />
<polygon fill="#787b6f" points="29,22 61,35 28,-16" />
<polygon fill="#7f8a77" points="20,122 38,123 18,110" />
<polygon fill="#d5ded9" points="199,110 191,113 178,105" />
<polygon fill="#4e5647" points="25,146 70,159 59,146" />
<polygon fill="#534c3d" points="91,115 98,119 98,109" />
<polygon fill="#a1aa96" points="211,79 232,61 207,69" />
<polygon fill="#768173" points="73,43 49,64 50,53" />
<polygon fill="#d8e2d5" points="77,200 84,227 57,265" />
<polygon fill="#394742" points="238,116 241,112 228,104" />
<polygon fill="#aab4a7" points="30,1 12,31 7,11" />
<polygon fill="#0f090c" points="131,155 130,163 135,153" />
<polygon fill="#9f795c" points="62,152 98,141 80,126" />
<polygon fill="#c2d6d0" points="159,140 146,122 149,134" />
<polygon fill="#64695e" points="225,81 198,117 222,106" />
<polygon fill="#95959a" points="169,120 157,103 151,107" />
<polygon fill="#7f6746" points="143,228 161,236 160,188" />
<polygon fill="#4a4a40" points="247,8 234,22 237,-2" />
<polygon fill="#45423b" points="156,120 161,125 160,120" />
<polygon fill="#b58c6b" points="142,113 135,125 152,138" />
<polygon fill="#bfcdc2" points="69,14 56,25 47,6" />
<polygon fill="#515445" points="14,46 3,56 15,69" />
</g>
</svg>
            
          
!
            
              //polygon{ fill-opacity: 0.5;}

.svg-holder {
  width: 100%;
  height: 100vh;
  background-color:#E0E0E0;
}

.hidden {
  display: none;
}

ul {
  z-index: 1;
  position: absolute;
  left: 40px;
  top: 20px;
}

a {
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 28px;
	color: black;
	text-decoration: none;
	transition: color 0.25s;
  
  &.active {color: #FF1CAE;}
  &:hover {color: red;}
}

            
          
!
            
              const links = document.querySelectorAll("a");
let toPolygonArray = [];
let fromPolygonArray = [];

// get points of polygons using regex
const getCoordinates = (polygon) => {
  return polygon.getAttribute("points").match(/(-?[0-9][0-9\.]*),(-?[0-9][0-9\.]*)\ (-?[0-9][0-9\.]*),(-?[0-9][0-9\.]*)\ (-?[0-9][0-9\.]*),(-?[0-9][0-9\.]*)/);
};

const createPolygonPointsObject = (polygons) => {
  const polygonsArray = [];

  polygons.forEach((polygon, i) => {
    const coordinates = getCoordinates(polygon);

    polygonsArray.push({
      fill: polygon.getAttribute("fill"),
      one: coordinates[1],
      two: coordinates[2],
      three: coordinates[3],
      four: coordinates[4],
      five: coordinates[5],
      six: coordinates[6]
    });
  });

  return polygonsArray;
}

const animatePolygons = () => {
  const polygons = document.querySelector(".svg-holder").querySelectorAll("polygon");
  fromPolygonArray = createPolygonPointsObject(polygons);

  fromPolygonArray.forEach((obj, i) => {
    TweenMax.to(obj, 1, {
      one: toPolygonArray[i].one,
      two: toPolygonArray[i].two,
      three: toPolygonArray[i].three,
      four: toPolygonArray[i].four,
      five: toPolygonArray[i].five,
      six: toPolygonArray[i].six,
      ease: Power3.easeOut,
      onUpdate: () => {
        polygons[i].setAttribute("points", `${obj.one},${obj.two} ${obj.three},${obj.four} ${obj.five},${obj.six}`);
      }
    });
  });

  // animate color
  polygons.forEach((polygon, i) => {
    const toColor = toPolygonArray[i].fill;

    TweenLite.to(polygon, 1, {
      fill: toColor,
      ease: Power3.easeOut
    });
  });
}

// add points attribute values to arrays
const updatePolygonArrays = (idToAnimateTo) => {
  toPolygonArray = createPolygonPointsObject(document.getElementById(idToAnimateTo).querySelectorAll("polygon"));

  animatePolygons();

  fromPolygonArray = toPolygonArray;
}

// click on link listener
[].forEach.call(links, function(el, i, els) {
  el.addEventListener("click", function(event) {
    const idToAnimateTo = this.getAttribute("href").substring(1);

    [].forEach.call(els, function(el) {
      if (el !== this) {
        el.classList.remove("active");
      } else {
        this.classList.add("active");
      }
    }, this);

    event.preventDefault();
    this.classList.add("active");
    updatePolygonArrays(idToAnimateTo);
  });
});

            
          
!
999px
Loading ..................

Console