Skip to content

Instantly share code, notes, and snippets.

@Beaglefoot

Beaglefoot/index.html

Created May 26, 2018 16:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Beaglefoot/9c6b5ba0c786ac242e32b9acd5e008d4 to your computer and use it in GitHub Desktop.
Save Beaglefoot/9c6b5ba0c786ac242e32b9acd5e008d4 to your computer and use it in GitHub Desktop.
Download ZIP
Lazy load with statically animated SVGs
Raw
index.html
<div class="container">
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="338" viewBox="0 0 512 338">
<rect x="0" y="0" width="512" height="338" fill="#8094a2" />
<g transform="scale(2.000000) translate(0.5 0.5)">
<polygon fill="#ffffff" fill-opacity="0.501961" points="271,5 15,78 -16,-16" />
<polygon fill="#000b0f" fill-opacity="0.501961" points="271,21 148,88 250,184" />
<polygon fill="#1e2529" fill-opacity="0.501961" points="-6,131 195,165 3,184" />
<polygon fill="#d7f8ff" fill-opacity="0.501961" points="210,-16 59,98 -16,1" />
<polygon fill="#0f1f00" fill-opacity="0.501961" points="58,83 -16,105 -12,64" />
<polygon fill="#deffff" fill-opacity="0.501961" points="271,32 260,-16 81,29" />
<polygon fill="#40739f" fill-opacity="0.501961" points="271,40 105,38 82,135" />
<polygon fill="#9a7f62" fill-opacity="0.501961" points="215,184 93,176 211,89" />
<polygon fill="#000400" fill-opacity="0.501961" points="203,80 271,58 247,147" />
<polygon fill="#524e48" fill-opacity="0.501961" points="125,89 109,184 -3,174" />
<polygon fill="#91b7d8" fill-opacity="0.501961" points="-16,156 58,55 146,65" />
<polygon fill="#d7ecff" fill-opacity="0.501961" points="271,17 -16,62 12,-16" />
<polygon fill="#baa897" fill-opacity="0.501961" points="124,95 177,112 111,184" />
<polygon fill="#6e6a60" fill-opacity="0.501961" points="271,166 192,121 111,183" />
<polygon fill="#326997" fill-opacity="0.501961" points="252,67 271,22 124,67" />
<polygon fill="#002141" fill-opacity="0.501961" points="-16,163 23,184 70,136" />
<polygon fill="#f2cfa8" fill-opacity="0.501961" points="210,128 197,128 213,92" />
<polygon fill="#959695" fill-opacity="0.501961" points="77,120 66,162 136,119" />
<polygon fill="#132729" fill-opacity="0.501961" points="271,145 212,131 214,83" />
<polygon fill="#2b6a9e" fill-opacity="0.501961" points="-16,141 64,132 27,160" />
<polygon fill="#abd0de" fill-opacity="0.501961" points="55,131 90,110 14,110" />
<polygon fill="#c6e1fe" fill-opacity="0.501961" points="119,-16 218,36 271,18" />
<polygon fill="#7b746c" fill-opacity="0.501961" points="129,84 105,100 199,123" />
<polygon fill="#0c181e" fill-opacity="0.501961" points="197,95 165,103 187,117" />
<polygon fill="#6194c0" fill-opacity="0.501961" points="82,57 203,27 140,81" />
<polygon fill="#afc3dc" fill-opacity="0.501961" points="78,56 78,92 -16,57" />
<polygon fill="#3d6c91" fill-opacity="0.501961" points="176,31 257,37 194,94" />
<polygon fill="#eaf2fc" fill-opacity="0.501961" points="110,16 -15,44 90,59" />
<polygon fill="#52828c" fill-opacity="0.501961" points="208,135 264,163 267,142" />
<polygon fill="#bfbbb6" fill-opacity="0.501961" points="150,128 121,166 125,107" />
<polygon fill="#c2def7" fill-opacity="0.501961" points="93,4 252,-16 267,31" />
<polygon fill="#000200" fill-opacity="0.501961" points="187,153 201,184 201,169" />
<polygon fill="#2c340d" fill-opacity="0.501961" points="-16,54 -16,105 24,90" />
<polygon fill="#285b7b" fill-opacity="0.501961" points="135,85 173,109 197,80" />
<polygon fill="#a8a9a7" fill-opacity="0.501961" points="163,117 185,119 209,163" />
<polygon fill="#2b251e" fill-opacity="0.501961" points="45,184 64,133 4,184" />
<polygon fill="#dbbe9b" fill-opacity="0.501961" points="212,99 202,99 209,131" />
<polygon fill="#8caed0" fill-opacity="0.501961" points="114,79 118,33 64,78" />
<polygon fill="#5d91ac" fill-opacity="0.501961" points="45,148 67,127 -11,128" />
<polygon fill="#546b52" fill-opacity="0.501961" points="26,95 17,70 49,82" />
<polygon fill="#191b17" fill-opacity="0.501961" points="214,181 198,155 223,178" />
<polygon fill="#55534d" fill-opacity="0.501961" points="183,126 225,171 230,149" />
<polygon fill="#5f89ae" fill-opacity="0.501961" points="44,107 150,64 97,106" />
<polygon fill="#9a9085" fill-opacity="0.501961" points="220,138 239,148 246,166" />
<polygon fill="#203238" fill-opacity="0.501961" points="229,141 271,130 210,90" />
<polygon fill="#d6eaf7" fill-opacity="0.501961" points="219,35 179,20 271,19" />
<polygon fill="#595c59" fill-opacity="0.501961" points="135,88 87,105 96,125" />
<polygon fill="#a88560" fill-opacity="0.501961" points="210,95 196,132 198,100" />
<polygon fill="#717679" fill-opacity="0.501961" points="122,140 49,170 79,136" />
<polygon fill="#c7c2c2" fill-opacity="0.501961" points="112,153 107,159 112,141" />
<polygon fill="#262c26" fill-opacity="0.501961" points="167,150 195,184 182,184" />
<polygon fill="#1f486c" fill-opacity="0.501961" points="-14,143 14,168 53,143" />
<polygon fill="#3a6486" fill-opacity="0.501961" points="271,68 205,43 245,29" />
<polygon fill="#94928d" fill-opacity="0.501961" points="135,87 146,172 161,111" />
<polygon fill="#514d47" fill-opacity="0.501961" points="145,152 155,161 141,136" />
<polygon fill="#1e1b19" fill-opacity="0.501961" points="271,115 207,92 265,55" />
<polygon fill="#93aec2" fill-opacity="0.501961" points="-14,135 94,85 23,94" />
<polygon fill="#5682a7" fill-opacity="0.501961" points="183,80 203,29 116,62" />
<polygon fill="#afc5da" fill-opacity="0.501961" points="-16,60 84,57 86,91" />
<polygon fill="#3c678c" fill-opacity="0.501961" points="265,26 270,62 140,70" />
<polygon fill="#182014" fill-opacity="0.501961" points="160,146 161,155 168,161" />
<polygon fill="#d3c8b8" fill-opacity="0.501961" points="202,160 210,175 196,161" />
<polygon fill="#1b2a28" fill-opacity="0.501961" points="271,137 213,106 211,132" />
<polygon fill="#969a9c" fill-opacity="0.501961" points="125,184 136,161 125,123" />
<polygon fill="#d3cbc1" fill-opacity="0.501961" points="165,141 174,157 172,148" />
<polygon fill="#303f3a" fill-opacity="0.501961" points="269,172 271,130 247,160" />
<polygon fill="#90908b" fill-opacity="0.501961" points="215,150 198,143 214,170" />
<polygon fill="#beb1a5" fill-opacity="0.501961" points="199,183 196,168 182,156" />
<polygon fill="#797f84" fill-opacity="0.501961" points="186,135 209,131 146,94" />
<polygon fill="#424444" fill-opacity="0.501961" points="70,155 126,167 83,173" />
<polygon fill="#b8b5af" fill-opacity="0.501961" points="145,116 158,149 127,109" />
<polygon fill="#deecf8" fill-opacity="0.501961" points="50,60 164,19 -16,32" />
<polygon fill="#86a8c9" fill-opacity="0.501961" points="131,39 77,71 108,38" />
<polygon fill="#7096a6" fill-opacity="0.501961" points="56,104 -16,120 -11,101" />
<polygon fill="#4d5251" fill-opacity="0.501961" points="165,123 161,125 174,136" />
<polygon fill="#2e2a24" fill-opacity="0.501961" points="197,183 186,179 178,153" />
<polygon fill="#c8e3f8" fill-opacity="0.501961" points="-16,-1 271,-15 159,38" />
<polygon fill="#3b4039" fill-opacity="0.501961" points="160,137 164,150 168,149" />
<polygon fill="#2c3640" fill-opacity="0.501961" points="63,130 74,126 62,138" />
<polygon fill="#546445" fill-opacity="0.501961" points="12,69 44,88 9,86" />
<polygon fill="#3f413a" fill-opacity="0.501961" points="220,152 190,130 218,139" />
<polygon fill="#658dac" fill-opacity="0.501961" points="187,50 181,30 223,35" />
<polygon fill="#95b9c7" fill-opacity="0.501961" points="-16,122 62,132 82,108" />
<polygon fill="#264d64" fill-opacity="0.501961" points="211,79 162,86 208,95" />
<polygon fill="#785937" fill-opacity="0.501961" points="186,110 202,121 200,97" />
<polygon fill="#20201f" fill-opacity="0.501961" points="182,112 190,118 186,89" />
<polygon fill="#a7a19a" fill-opacity="0.501961" points="158,121 178,144 162,139" />
<polygon fill="#c9e0f3" fill-opacity="0.501961" points="170,28 257,29 257,-16" />
<polygon fill="#2e3031" fill-opacity="0.501961" points="180,144 188,160 198,164" />
<polygon fill="#252724" fill-opacity="0.501961" points="191,149 203,159 198,159" />
<polygon fill="#908c87" fill-opacity="0.501961" points="154,159 149,135 170,172" />
<polygon fill="#818483" fill-opacity="0.501961" points="75,154 69,131 139,99" />
<polygon fill="#2e2b2a" fill-opacity="0.501961" points="112,152 116,140 116,146" />
<polygon fill="#303738" fill-opacity="0.501961" points="131,167 131,154 133,160" />
<polygon fill="#161413" fill-opacity="0.501961" points="105,165 106,153 99,172" />
<polygon fill="#507b93" fill-opacity="0.501961" points="127,83 149,92 190,70" />
<polygon fill="#9b9274" fill-opacity="0.501961" points="244,159 258,168 254,184" />
<polygon fill="#b9b6ae" fill-opacity="0.501961" points="188,141 157,111 176,119" />
<polygon fill="#7d817f" fill-opacity="0.501961" points="108,184 121,137 121,174" />
<polygon fill="#4c5052" fill-opacity="0.501961" points="75,144 63,135 41,169" />
<polygon fill="#6e7172" fill-opacity="0.501961" points="150,104 181,114 177,122" />
<polygon fill="#98afc9" fill-opacity="0.501961" points="9,107 59,81 92,95" />
<polygon fill="#2f3031" fill-opacity="0.501961" points="172,148 176,155 182,157" />
<polygon fill="#ab9d82" fill-opacity="0.501961" points="182,164 174,156 182,171" />
<polygon fill="#213747" fill-opacity="0.501961" points="271,119 212,118 214,96" />
<polygon fill="#40668b" fill-opacity="0.501961" points="25,150 57,139 -16,137" />
<polygon fill="#b7b4af" fill-opacity="0.501961" points="180,143 195,154 186,151" />
<polygon fill="#cddae4" fill-opacity="0.501961" points="43,74 73,69 18,62" />
<polygon fill="#b0aea8" fill-opacity="0.501961" points="114,165 118,137 120,153" />
<polygon fill="#6c6861" fill-opacity="0.501961" points="237,184 223,158 190,143" />
<polygon fill="#6c98bd" fill-opacity="0.501961" points="154,54 91,57 134,81" />
<polygon fill="#3c729a" fill-opacity="0.501961" points="92,112 97,104 80,99" />
<polygon fill="#b3b0a9" fill-opacity="0.501961" points="202,161 193,159 188,150" />
<polygon fill="#beb4a7" fill-opacity="0.501961" points="171,160 167,156 172,168" />
<polygon fill="#928f8b" fill-opacity="0.501961" points="110,163 109,151 102,175" />
<polygon fill="#aac1d5" fill-opacity="0.501961" points="5,68 4,46 38,60" />
<polygon fill="#7a7a73" fill-opacity="0.501961" points="166,137 162,116 151,116" />
<polygon fill="#95b4d3" fill-opacity="0.501961" points="53,67 29,59 64,58" />
<polygon fill="#b7ada3" fill-opacity="0.501961" points="179,156 175,144 186,158" />
<polygon fill="#798769" fill-opacity="0.501961" points="38,79 18,84 50,85" />
<polygon fill="#b8b4b0" fill-opacity="0.501961" points="148,164 131,101 130,138" />
<polygon fill="#49473f" fill-opacity="0.501961" points="148,158 154,178 170,171" />
<polygon fill="#d2d2ce" fill-opacity="0.501961" points="133,173 141,184 133,155" />
<polygon fill="#6b6f71" fill-opacity="0.501961" points="131,105 119,87 159,101" />
<polygon fill="#c4c4c4" fill-opacity="0.501961" points="130,167 124,155 129,151" />
<polygon fill="#706f6a" fill-opacity="0.501961" points="133,144 144,152 142,172" />
<polygon fill="#76a2b6" fill-opacity="0.501961" points="69,122 6,126 57,137" />
<polygon fill="#4f4c46" fill-opacity="0.501961" points="257,179 227,144 240,173" />
<polygon fill="#d1cdc9" fill-opacity="0.501961" points="216,184 234,184 210,163" />
<polygon fill="#d9edfa" fill-opacity="0.501961" points="-5,30 97,7 162,37" />
<polygon fill="#5a7d8c" fill-opacity="0.501961" points="237,40 244,30 271,28" />
<polygon fill="#1e2721" fill-opacity="0.501961" points="255,64 211,87 225,70" />
<polygon fill="#2a6174" fill-opacity="0.501961" points="224,138 260,144 271,165" />
<polygon fill="#436e8c" fill-opacity="0.501961" points="252,46 206,74 257,60" />
<polygon fill="#958f8a" fill-opacity="0.501961" points="214,134 221,145 241,149" />
<polygon fill="#96989a" fill-opacity="0.501961" points="161,103 190,121 177,122" />
<polygon fill="#1f1f1e" fill-opacity="0.501961" points="33,157 79,184 3,184" />
<polygon fill="#353839" fill-opacity="0.501961" points="156,154 153,145 153,151" />
<polygon fill="#7f8893" fill-opacity="0.501961" points="105,125 117,127 90,158" />
<polygon fill="#355d7a" fill-opacity="0.501961" points="158,78 195,91 155,102" />
<polygon fill="#242a2f" fill-opacity="0.501961" points="91,159 91,170 100,152" />
<polygon fill="#967c5d" fill-opacity="0.501961" points="202,125 192,117 208,104" />
<polygon fill="#a6aab6" fill-opacity="0.501961" points="84,125 77,125 76,136" />
<polygon fill="#51514f" fill-opacity="0.501961" points="98,109 124,86 110,112" />
<polygon fill="#ddd6ce" fill-opacity="0.501961" points="176,159 176,156 173,157" />
<polygon fill="#5c87a9" fill-opacity="0.501961" points="168,34 135,51 216,43" />
<polygon fill="#618bb2" fill-opacity="0.501961" points="122,63 150,78 192,72" />
<polygon fill="#636562" fill-opacity="0.501961" points="201,127 181,130 207,143" />
<polygon fill="#3c2d20" fill-opacity="0.501961" points="194,108 183,95 197,96" />
<polygon fill="#6b99c1" fill-opacity="0.501961" points="114,56 165,39 141,37" />
</g>
</svg>
<img />
</div>
<p>Amet eum error deleniti in dolor A vitae debitis dolorum delectus doloribus officiis Ipsum nobis culpa quasi error cumque! Dolores cum voluptates reiciendis animi consequatur Cum optio alias deserunt perspiciatis</p>
<p>Amet dolorum consectetur corrupti totam eligendi! Rem facere at voluptates sequi consequatur! Labore iusto doloribus iste reprehenderit numquam dolores. Delectus facilis ullam alias voluptatibus nihil. Quia a quidem laudantium itaque!</p>
<p>Consectetur velit ea necessitatibus obcaecati possimus. Blanditiis veniam animi earum hic minima esse. Quasi quaerat adipisci pariatur unde tenetur adipisci molestias. Tenetur dolore libero architecto consequuntur aliquam, consequuntur. Facere repudiandae</p>
<p>Ipsum nobis enim voluptas consequuntur praesentium! Maxime sit dolor perspiciatis necessitatibus aliquam. Eius vel at aliquam maxime quo? Sapiente veritatis recusandae ratione atque doloribus eligendi nemo! Ut ad nulla nostrum</p>
<p>Adipisicing quia reiciendis saepe quae ut Vel unde ex tempore tempora repellendus est hic. Illum numquam ad ex aperiam dolore officiis Quia ipsum quod labore hic nam! Tempora est fugit.</p>
<div class="image-container">
<svg xmlns="http://www.w4.org/2000/svg" version="1.1" width="512" height="338" viewBox="0 0 512 338">
<rect x="0" y="0" width="512" height="338" fill="#484435" />
<g transform="scale(2.000000) translate(0.5 0.5)">
<polygon fill="#ffffac" fill-opacity="0.501961" points="141,57 225,96 189,107" />
<polygon fill="#ffb069" fill-opacity="0.501961" points="125,1 271,72 195,62" />
<polygon fill="#ffbb00" fill-opacity="0.501961" points="157,90 116,36 116,73" />
<polygon fill="#e0c7b3" fill-opacity="0.501961" points="198,105 139,108 90,143" />
<polygon fill="#ff9c29" fill-opacity="0.501961" points="18,100 -16,63 48,94" />
<polygon fill="#ffc46a" fill-opacity="0.501961" points="117,97 92,50 103,103" />
<polygon fill="#1c1e1a" fill-opacity="0.501961" points="257,81 239,174 46,176" />
<polygon fill="#ffae5f" fill-opacity="0.501961" points="96,27 38,24 71,12" />
<polygon fill="#0e151b" fill-opacity="0.501961" points="265,61 167,30 252,-16" />
<polygon fill="#11121e" fill-opacity="0.501961" points="-14,67 5,-16 99,71" />
<polygon fill="#103e43" fill-opacity="0.501961" points="149,108 4,184 -16,97" />
<polygon fill="#fff28a" fill-opacity="0.501961" points="171,94 160,69 229,99" />
<polygon fill="#0d0f17" fill-opacity="0.501961" points="66,6 105,-16 189,81" />
<polygon fill="#dcd1bc" fill-opacity="0.501961" points="209,81 230,60 229,34" />
<polygon fill="#ffac00" fill-opacity="0.501961" points="131,83 107,44 153,80" />
<polygon fill="#faedab" fill-opacity="0.501961" points="232,93 232,73 243,92" />
<polygon fill="#cc9b6d" fill-opacity="0.501961" points="60,71 88,114 56,86" />
<polygon fill="#d7c6aa" fill-opacity="0.501961" points="24,39 40,22 62,17" />
<polygon fill="#b93500" fill-opacity="0.501961" points="191,113 177,107 186,161" />
<polygon fill="#ffa740" fill-opacity="0.501961" points="208,41 242,71 168,39" />
<polygon fill="#ffffe7" fill-opacity="0.501961" points="270,67 250,128 271,123" />
<polygon fill="#ebba99" fill-opacity="0.501961" points="127,46 149,61 101,46" />
<polygon fill="#152c2b" fill-opacity="0.501961" points="179,46 231,90 177,78" />
<polygon fill="#ff8724" fill-opacity="0.501961" points="30,78 33,100 -11,76" />
<polygon fill="#1c1b21" fill-opacity="0.501961" points="37,40 131,21 35,89" />
<polygon fill="#393532" fill-opacity="0.501961" points="162,80 174,118 188,97" />
<polygon fill="#11131e" fill-opacity="0.501961" points="-16,13 73,-16 73,15" />
<polygon fill="#ffeb9c" fill-opacity="0.501961" points="195,81 181,115 214,89" />
<polygon fill="#f1e1cb" fill-opacity="0.501961" points="144,138 146,144 158,130" />
<polygon fill="#121418" fill-opacity="0.501961" points="192,39 152,-9 220,-16" />
<polygon fill="#ffa85a" fill-opacity="0.501961" points="100,67 118,109 100,95" />
<polygon fill="#ffdd8d" fill-opacity="0.501961" points="240,165 250,159 245,152" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="178,92 173,98 170,93" />
<polygon fill="#b14f00" fill-opacity="0.501961" points="113,49 123,54 122,22" />
<polygon fill="#968b77" fill-opacity="0.501961" points="122,2 176,18 173,34" />
<polygon fill="#cd3200" fill-opacity="0.501961" points="215,68 246,72 240,59" />
<polygon fill="#e5cfb3" fill-opacity="0.501961" points="164,109 135,123 134,111" />
<polygon fill="#e3e2d9" fill-opacity="0.501961" points="207,60 238,61 226,51" />
<polygon fill="#f7bc27" fill-opacity="0.501961" points="193,103 218,90 223,102" />
<polygon fill="#19222b" fill-opacity="0.501961" points="102,69 132,90 92,24" />
<polygon fill="#adb5a5" fill-opacity="0.501961" points="209,21 219,5 216,-2" />
<polygon fill="#0e2122" fill-opacity="0.501961" points="151,111 159,81 119,105" />
<polygon fill="#ff5c00" fill-opacity="0.501961" points="61,26 59,16 88,20" />
<polygon fill="#e5eff1" fill-opacity="0.501961" points="208,47 196,40 184,46" />
<polygon fill="#0c1f2b" fill-opacity="0.501961" points="48,100 68,96 15,54" />
<polygon fill="#b7af9f" fill-opacity="0.501961" points="110,137 85,143 88,149" />
<polygon fill="#d0cdaf" fill-opacity="0.501961" points="164,27 150,33 178,35" />
<polygon fill="#daebfd" fill-opacity="0.501961" points="25,95 16,100 10,97" />
<polygon fill="#1e343b" fill-opacity="0.501961" points="88,50 116,126 67,85" />
<polygon fill="#ffe89e" fill-opacity="0.501961" points="203,93 168,84 143,57" />
<polygon fill="#f15900" fill-opacity="0.501961" points="207,60 191,51 218,47" />
<polygon fill="#ccccc5" fill-opacity="0.501961" points="6,81 19,73 -13,77" />
<polygon fill="#ff9a00" fill-opacity="0.501961" points="113,64 153,75 146,88" />
<polygon fill="#ff4c00" fill-opacity="0.501961" points="169,162 183,149 183,155" />
<polygon fill="#283431" fill-opacity="0.501961" points="165,69 139,33 223,68" />
<polygon fill="#204644" fill-opacity="0.501961" points="118,142 136,184 4,167" />
<polygon fill="#2d1d1c" fill-opacity="0.501961" points="229,82 271,174 214,125" />
<polygon fill="#e2d9c8" fill-opacity="0.501961" points="148,15 153,22 151,-1" />
<polygon fill="#ffd8a7" fill-opacity="0.501961" points="97,95 107,87 110,99" />
<polygon fill="#1f251f" fill-opacity="0.501961" points="217,3 271,102 262,-1" />
<polygon fill="#63232c" fill-opacity="0.501961" points="149,65 125,66 124,59" />
<polygon fill="#c39783" fill-opacity="0.501961" points="92,24 85,16 64,34" />
<polygon fill="#969d82" fill-opacity="0.501961" points="225,70 219,77 194,64" />
<polygon fill="#6e5038" fill-opacity="0.501961" points="188,21 138,24 155,32" />
<polygon fill="#2f221d" fill-opacity="0.501961" points="198,101 172,148 238,105" />
<polygon fill="#c2d1e7" fill-opacity="0.501961" points="30,77 24,76 34,87" />
<polygon fill="#1f1e21" fill-opacity="0.501961" points="167,35 151,59 114,42" />
<polygon fill="#ff5d00" fill-opacity="0.501961" points="190,113 180,109 186,124" />
<polygon fill="#c3290e" fill-opacity="0.501961" points="43,97 27,102 29,83" />
<polygon fill="#eb4500" fill-opacity="0.501961" points="109,79 116,105 109,108" />
<polygon fill="#1b2e26" fill-opacity="0.501961" points="148,105 153,74 177,108" />
<polygon fill="#c34112" fill-opacity="0.501961" points="61,82 66,63 58,61" />
<polygon fill="#fae8e6" fill-opacity="0.501961" points="180,108 189,110 197,94" />
<polygon fill="#4c6458" fill-opacity="0.501961" points="99,125 80,81 59,103" />
<polygon fill="#da6511" fill-opacity="0.501961" points="202,42 218,57 201,28" />
<polygon fill="#d1c09c" fill-opacity="0.501961" points="193,41 185,47 199,67" />
<polygon fill="#2b372d" fill-opacity="0.501961" points="163,69 231,94 194,57" />
<polygon fill="#2e282b" fill-opacity="0.501961" points="134,124 177,128 99,147" />
<polygon fill="#293e38" fill-opacity="0.501961" points="116,63 136,116 114,117" />
<polygon fill="#141617" fill-opacity="0.501961" points="269,89 240,71 245,102" />
<polygon fill="#dbe6d1" fill-opacity="0.501961" points="144,25 138,25 137,20" />
<polygon fill="#ffe9c0" fill-opacity="0.501961" points="98,72 108,91 101,88" />
<polygon fill="#c5bc8f" fill-opacity="0.501961" points="235,93 230,72 241,84" />
<polygon fill="#0e180f" fill-opacity="0.501961" points="182,94 179,122 175,101" />
<polygon fill="#76735d" fill-opacity="0.501961" points="22,39 33,31 31,50" />
<polygon fill="#c5d8d3" fill-opacity="0.501961" points="252,101 271,128 271,88" />
<polygon fill="#e1b84e" fill-opacity="0.501961" points="194,102 223,99 173,87" />
<polygon fill="#e8d8bb" fill-opacity="0.501961" points="173,86 178,98 170,98" />
<polygon fill="#ff8100" fill-opacity="0.501961" points="28,96 -7,77 27,85" />
<polygon fill="#242625" fill-opacity="0.501961" points="168,27 188,40 232,14" />
<polygon fill="#ffe0a7" fill-opacity="0.501961" points="175,41 179,37 163,27" />
<polygon fill="#141116" fill-opacity="0.501961" points="158,19 175,-15 153,5" />
<polygon fill="#221d1c" fill-opacity="0.501961" points="244,58 240,21 227,52" />
<polygon fill="#d3bfb9" fill-opacity="0.501961" points="134,62 122,49 134,53" />
<polygon fill="#3f6861" fill-opacity="0.501961" points="93,136 60,184 56,165" />
<polygon fill="#1e2a25" fill-opacity="0.501961" points="205,107 183,160 256,184" />
<polygon fill="#ffbc72" fill-opacity="0.501961" points="243,178 242,165 248,154" />
<polygon fill="#0f070a" fill-opacity="0.501961" points="271,163 226,184 271,138" />
<polygon fill="#222323" fill-opacity="0.501961" points="38,50 85,27 101,90" />
<polygon fill="#64a586" fill-opacity="0.501961" points="41,117 36,105 31,114" />
<polygon fill="#211b1b" fill-opacity="0.501961" points="13,-16 25,84 -14,45" />
<polygon fill="#38312a" fill-opacity="0.501961" points="107,28 133,6 148,20" />
<polygon fill="#dcc388" fill-opacity="0.501961" points="68,94 55,81 66,81" />
<polygon fill="#1d1d20" fill-opacity="0.501961" points="72,38 110,46 127,8" />
<polygon fill="#1d3131" fill-opacity="0.501961" points="37,147 -16,184 2,84" />
<polygon fill="#bfbcae" fill-opacity="0.501961" points="58,24 59,15 37,25" />
<polygon fill="#dc5e05" fill-opacity="0.501961" points="174,48 167,39 172,29" />
<polygon fill="#282c2e" fill-opacity="0.501961" points="48,117 32,33 65,24" />
<polygon fill="#ffe5a5" fill-opacity="0.501961" points="253,115 270,123 251,125" />
<polygon fill="#ffea68" fill-opacity="0.501961" points="213,99 216,89 200,84" />
<polygon fill="#c96a35" fill-opacity="0.501961" points="96,70 117,90 91,47" />
<polygon fill="#1b2f25" fill-opacity="0.501961" points="204,77 249,118 223,75" />
<polygon fill="#1c221f" fill-opacity="0.501961" points="182,94 189,99 167,105" />
<polygon fill="#bbb7a9" fill-opacity="0.501961" points="193,62 199,66 200,61" />
<polygon fill="#dd6501" fill-opacity="0.501961" points="152,88 133,84 149,75" />
<polygon fill="#d44900" fill-opacity="0.501961" points="245,71 226,67 243,56" />
<polygon fill="#d38001" fill-opacity="0.501961" points="120,31 113,40 116,62" />
<polygon fill="#837e5b" fill-opacity="0.501961" points="242,66 264,75 241,76" />
<polygon fill="#1b1b16" fill-opacity="0.501961" points="168,85 169,100 148,67" />
<polygon fill="#f06100" fill-opacity="0.501961" points="204,56 196,45 190,48" />
<polygon fill="#0c0e18" fill-opacity="0.501961" points="114,-2 171,-16 141,4" />
<polygon fill="#ff6a00" fill-opacity="0.501961" points="178,40 191,42 182,47" />
<polygon fill="#d09d3a" fill-opacity="0.501961" points="162,76 177,95 189,94" />
<polygon fill="#e5c7ac" fill-opacity="0.501961" points="223,66 222,73 212,74" />
<polygon fill="#6c7264" fill-opacity="0.501961" points="88,45 96,56 110,45" />
<polygon fill="#fa6701" fill-opacity="0.501961" points="89,24 60,22 67,15" />
<polygon fill="#1c312c" fill-opacity="0.501961" points="114,141 179,146 138,184" />
<polygon fill="#2f4c45" fill-opacity="0.501961" points="-16,147 102,111 59,100" />
<polygon fill="#74604b" fill-opacity="0.501961" points="178,12 177,36 164,21" />
<polygon fill="#c6794c" fill-opacity="0.501961" points="76,105 64,88 83,102" />
<polygon fill="#556f66" fill-opacity="0.501961" points="157,119 163,140 153,133" />
<polygon fill="#b6a492" fill-opacity="0.501961" points="141,116 158,122 172,114" />
<polygon fill="#5a2e1f" fill-opacity="0.501961" points="211,66 230,66 237,76" />
<polygon fill="#2e3a33" fill-opacity="0.501961" points="100,120 143,81 129,121" />
<polygon fill="#272629" fill-opacity="0.501961" points="31,26 -16,0 100,-3" />
<polygon fill="#ffb900" fill-opacity="0.501961" points="148,80 131,80 128,63" />
<polygon fill="#f8e8ce" fill-opacity="0.501961" points="166,80 150,63 177,79" />
<polygon fill="#d5bca0" fill-opacity="0.501961" points="123,121 143,118 118,130" />
<polygon fill="#222423" fill-opacity="0.501961" points="148,50 132,24 200,60" />
<polygon fill="#a4998e" fill-opacity="0.501961" points="81,148 99,143 111,129" />
<polygon fill="#252526" fill-opacity="0.501961" points="58,-8 114,41 127,5" />
<polygon fill="#282e30" fill-opacity="0.501961" points="14,61 61,108 49,25" />
<polygon fill="#98b9d0" fill-opacity="0.501961" points="12,101 17,95 11,93" />
<polygon fill="#cdc7b4" fill-opacity="0.501961" points="216,60 223,69 229,38" />
<polygon fill="#7a250e" fill-opacity="0.501961" points="132,65 144,59 153,75" />
<polygon fill="#1f2d2f" fill-opacity="0.501961" points="34,112 -16,107 26,98" />
<polygon fill="#8fabae" fill-opacity="0.501961" points="74,29 66,28 71,35" />
<polygon fill="#2e433b" fill-opacity="0.501961" points="168,47 161,66 199,85" />
<polygon fill="#212322" fill-opacity="0.501961" points="223,49 208,41 223,-12" />
<polygon fill="#93817d" fill-opacity="0.501961" points="119,88 113,87 113,94" />
</g>
</svg>
<img />
</div>
<p>Adipisicing incidunt amet provident alias sapiente hic? Asperiores velit voluptatem consequuntur sunt praesentium? Rerum cum reiciendis adipisci sunt accusamus repellendus? In iure aspernatur pariatur molestiae iste, laborum? Eius nobis vero</p>
<p>Lorem voluptas aut perspiciatis deleniti voluptate. Praesentium ipsam corrupti numquam voluptatum illum Iusto odio qui perferendis corporis quisquam veritatis porro Dicta earum a dolorum atque eius magni? Qui inventore labore</p>
<p>Adipisicing possimus alias nemo ex accusamus. Ullam ut quasi maxime quo magnam. Hic vitae quisquam quae esse harum Unde voluptas illo obcaecati laboriosam magnam eum. Dolor natus provident unde ratione</p>
<p>Amet asperiores dolorum cum blanditiis nemo eum. Vel soluta consectetur possimus ex quos. Tenetur cumque perspiciatis nostrum repellat nisi. Doloremque nulla in nulla expedita iure. Perspiciatis dolores fugiat excepturi ea?</p>
<p>Amet qui corrupti officiis similique dolorem? Quidem nobis repudiandae quam veritatis dolore illum Pariatur corporis necessitatibus ab accusamus molestiae. Similique omnis officia aut minima eaque quibusdam. Officiis incidunt excepturi laborum.</p>
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="338" viewBox="0 0 512 338">
<rect x="0" y="0" width="512" height="338" fill="#4c4d32" />
<g transform="scale(2.000000) translate(0.5 0.5)">
<polygon fill="#feda91" fill-opacity="0.501961" points="185,89 271,106 247,184" />
<polygon fill="#ab9c72" fill-opacity="0.501961" points="-16,120 210,60 34,184" />
<polygon fill="#070605" fill-opacity="0.501961" points="263,-16 245,100 -16,3" />
<polygon fill="#b4c8f5" fill-opacity="0.501961" points="41,70 170,37 101,36" />
<polygon fill="#8dce00" fill-opacity="0.501961" points="-16,51 12,150 55,34" />
<polygon fill="#000000" fill-opacity="0.501961" points="183,48 96,46 27,112" />
<polygon fill="#08000f" fill-opacity="0.501961" points="219,129 9,143 216,184" />
<polygon fill="#bfd7ff" fill-opacity="0.501961" points="176,130 93,131 122,116" />
<polygon fill="#88a1d2" fill-opacity="0.501961" points="202,97 107,94 163,61" />
<polygon fill="#0b1f00" fill-opacity="0.501961" points="-16,-6 192,22 13,59" />
<polygon fill="#92a5ce" fill-opacity="0.501961" points="212,82 209,43 239,63" />
<polygon fill="#debdaf" fill-opacity="0.501961" points="-16,165 100,184 83,154" />
<polygon fill="#b7a241" fill-opacity="0.501961" points="-16,89 82,151 105,102" />
<polygon fill="#0e1331" fill-opacity="0.501961" points="105,116 124,86 225,126" />
<polygon fill="#afb4c0" fill-opacity="0.501961" points="227,53 143,38 187,34" />
<polygon fill="#bcd4ff" fill-opacity="0.501961" points="165,126 207,126 200,136" />
<polygon fill="#fffff4" fill-opacity="0.501961" points="122,167 240,166 177,184" />
<polygon fill="#000000" fill-opacity="0.501961" points="38,74 31,128 45,98" />
<polygon fill="#0b0000" fill-opacity="0.501961" points="162,28 248,-16 271,65" />
<polygon fill="#020001" fill-opacity="0.501961" points="88,166 193,164 87,127" />
<polygon fill="#c1cfe4" fill-opacity="0.501961" points="182,72 139,71 131,93" />
<polygon fill="#5aa105" fill-opacity="0.501961" points="-16,82 29,32 62,65" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="97,42 72,65 53,61" />
<polygon fill="#020004" fill-opacity="0.501961" points="202,68 56,72 106,45" />
<polygon fill="#e0c7c3" fill-opacity="0.501961" points="221,160 221,143 271,155" />
<polygon fill="#f4ee99" fill-opacity="0.501961" points="173,8 151,-16 183,2" />
<polygon fill="#201c23" fill-opacity="0.501961" points="38,136 61,152 -13,157" />
<polygon fill="#a4beef" fill-opacity="0.501961" points="149,49 179,37 108,37" />
<polygon fill="#0d1011" fill-opacity="0.501961" points="185,41 220,93 125,44" />
<polygon fill="#d9ff3a" fill-opacity="0.501961" points="44,104 54,103 46,76" />
<polygon fill="#ddc5b7" fill-opacity="0.501961" points="96,184 65,164 134,167" />
<polygon fill="#000008" fill-opacity="0.501961" points="160,79 144,86 157,90" />
<polygon fill="#0f1222" fill-opacity="0.501961" points="52,60 106,85 54,100" />
<polygon fill="#b8e0ff" fill-opacity="0.501961" points="61,84 73,85 84,78" />
<polygon fill="#cfc773" fill-opacity="0.501961" points="196,106 213,129 271,97" />
<polygon fill="#838700" fill-opacity="0.501961" points="184,97 240,101 192,84" />
<polygon fill="#080000" fill-opacity="0.501961" points="81,-16 14,41 -16,3" />
<polygon fill="#dccbab" fill-opacity="0.501961" points="19,149 47,149 41,143" />
<polygon fill="#000b00" fill-opacity="0.501961" points="52,59 73,28 111,36" />
<polygon fill="#b68e38" fill-opacity="0.501961" points="36,129 -16,84 -6,157" />
<polygon fill="#000018" fill-opacity="0.501961" points="94,127 105,119 115,127" />
<polygon fill="#070000" fill-opacity="0.501961" points="176,99 171,115 219,130" />
<polygon fill="#f5ffff" fill-opacity="0.501961" points="94,43 116,46 112,39" />
<polygon fill="#ae9164" fill-opacity="0.501961" points="79,146 46,138 119,86" />
<polygon fill="#a9bcd5" fill-opacity="0.501961" points="161,101 137,77 138,98" />
<polygon fill="#8c9337" fill-opacity="0.501961" points="271,90 249,105 242,63" />
<polygon fill="#9a9c0b" fill-opacity="0.501961" points="98,112 118,84 35,107" />
<polygon fill="#000000" fill-opacity="0.501961" points="42,144 35,106 33,126" />
<polygon fill="#aab2b8" fill-opacity="0.501961" points="118,83 116,96 141,109" />
<polygon fill="#b9cce8" fill-opacity="0.501961" points="213,82 203,73 223,81" />
<polygon fill="#1b2856" fill-opacity="0.501961" points="185,126 158,116 131,125" />
<polygon fill="#0a2d00" fill-opacity="0.501961" points="114,92 71,85 126,71" />
<polygon fill="#170c0c" fill-opacity="0.501961" points="89,166 224,166 210,129" />
<polygon fill="#333303" fill-opacity="0.501961" points="36,5 155,-16 194,39" />
<polygon fill="#f5f7ff" fill-opacity="0.501961" points="122,129 135,120 113,119" />
<polygon fill="#7b8495" fill-opacity="0.501961" points="166,66 127,73 143,64" />
<polygon fill="#030000" fill-opacity="0.501961" points="239,99 183,80 246,82" />
<polygon fill="#050504" fill-opacity="0.501961" points="131,80 123,82 121,96" />
<polygon fill="#7d5e41" fill-opacity="0.501961" points="271,142 219,121 220,141" />
<polygon fill="#000000" fill-opacity="0.501961" points="103,120 116,100 121,116" />
<polygon fill="#7d8cb6" fill-opacity="0.501961" points="158,133 195,120 190,135" />
<polygon fill="#c4e1ff" fill-opacity="0.501961" points="228,64 215,50 212,54" />
<polygon fill="#1f2c00" fill-opacity="0.501961" points="203,87 214,55 179,72" />
<polygon fill="#aa937f" fill-opacity="0.501961" points="38,153 85,157 3,172" />
<polygon fill="#c7f4e2" fill-opacity="0.501961" points="-16,104 8,124 -16,144" />
<polygon fill="#000000" fill-opacity="0.501961" points="21,161 28,155 9,160" />
<polygon fill="#7c8995" fill-opacity="0.501961" points="139,106 149,113 168,107" />
<polygon fill="#acbf45" fill-opacity="0.501961" points="31,115 3,95 35,84" />
<polygon fill="#8e9f40" fill-opacity="0.501961" points="101,77 126,109 102,92" />
<polygon fill="#2b282b" fill-opacity="0.501961" points="230,60 215,77 267,81" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="117,81 129,78 124,77" />
<polygon fill="#25283e" fill-opacity="0.501961" points="110,130 203,132 154,156" />
<polygon fill="#cec9d6" fill-opacity="0.501961" points="79,149 87,145 71,142" />
<polygon fill="#180e00" fill-opacity="0.501961" points="265,83 171,-13 271,3" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="65,66 59,63 80,55" />
<polygon fill="#96a9cb" fill-opacity="0.501961" points="155,97 171,68 183,77" />
<polygon fill="#599107" fill-opacity="0.501961" points="30,33 60,56 -16,103" />
<polygon fill="#000000" fill-opacity="0.501961" points="175,101 134,100 151,107" />
<polygon fill="#e5eeef" fill-opacity="0.501961" points="131,43 118,38 150,36" />
<polygon fill="#fdffff" fill-opacity="0.501961" points="84,48 98,48 109,40" />
<polygon fill="#5b6b8b" fill-opacity="0.501961" points="169,75 172,108 188,91" />
<polygon fill="#1e4894" fill-opacity="0.501961" points="117,43 164,42 137,50" />
<polygon fill="#cba87d" fill-opacity="0.501961" points="70,117 103,120 105,104" />
<polygon fill="#674611" fill-opacity="0.501961" points="57,122 65,115 90,123" />
<polygon fill="#000001" fill-opacity="0.501961" points="33,112 37,85 48,92" />
<polygon fill="#000000" fill-opacity="0.501961" points="4,151 34,137 15,154" />
<polygon fill="#bdcef0" fill-opacity="0.501961" points="145,132 166,126 123,126" />
<polygon fill="#cfed46" fill-opacity="0.501961" points="49,97 43,85 50,73" />
<polygon fill="#000004" fill-opacity="0.501961" points="55,65 35,80 66,68" />
<polygon fill="#4f6106" fill-opacity="0.501961" points="204,66 192,104 190,67" />
<polygon fill="#266e01" fill-opacity="0.501961" points="60,29 33,33 55,63" />
<polygon fill="#0a0201" fill-opacity="0.501961" points="156,55 202,45 185,76" />
<polygon fill="#a68e7e" fill-opacity="0.501961" points="271,172 219,131 225,184" />
<polygon fill="#c6d9ee" fill-opacity="0.501961" points="161,78 149,85 138,74" />
<polygon fill="#88690d" fill-opacity="0.501961" points="-3,140 24,123 26,94" />
<polygon fill="#a69063" fill-opacity="0.501961" points="40,136 38,104 88,148" />
<polygon fill="#020000" fill-opacity="0.501961" points="59,99 96,88 49,80" />
<polygon fill="#110701" fill-opacity="0.501961" points="179,126 188,94 166,120" />
<polygon fill="#6882ad" fill-opacity="0.501961" points="126,123 167,123 143,116" />
<polygon fill="#af8d4f" fill-opacity="0.501961" points="251,67 232,63 221,51" />
<polygon fill="#040500" fill-opacity="0.501961" points="131,32 103,27 71,49" />
<polygon fill="#1b2125" fill-opacity="0.501961" points="152,113 109,117 104,104" />
<polygon fill="#a79987" fill-opacity="0.501961" points="39,144 11,151 32,152" />
<polygon fill="#000000" fill-opacity="0.501961" points="25,158 43,140 39,150" />
<polygon fill="#020107" fill-opacity="0.501961" points="69,72 87,52 122,48" />
<polygon fill="#aaadba" fill-opacity="0.501961" points="115,95 118,83 125,112" />
<polygon fill="#677aa1" fill-opacity="0.501961" points="70,63 84,80 76,83" />
<polygon fill="#0e1a00" fill-opacity="0.501961" points="154,34 206,-16 188,37" />
<polygon fill="#3f2e3c" fill-opacity="0.501961" points="150,49 189,54 180,40" />
<polygon fill="#bcb2b7" fill-opacity="0.501961" points="10,154 18,158 1,158" />
<polygon fill="#e8ecf1" fill-opacity="0.501961" points="191,127 167,128 179,131" />
<polygon fill="#e9f5ff" fill-opacity="0.501961" points="117,44 127,38 111,39" />
<polygon fill="#c9d3e6" fill-opacity="0.501961" points="184,39 163,43 146,36" />
<polygon fill="#191f27" fill-opacity="0.501961" points="176,113 144,120 124,108" />
<polygon fill="#16100f" fill-opacity="0.501961" points="99,131 82,155 158,145" />
<polygon fill="#e0f2ff" fill-opacity="0.501961" points="96,126 97,131 110,126" />
<polygon fill="#3d69aa" fill-opacity="0.501961" points="207,50 227,78 228,65" />
<polygon fill="#a4927c" fill-opacity="0.501961" points="46,153 -16,171 106,170" />
<polygon fill="#9f971a" fill-opacity="0.501961" points="224,96 190,85 204,110" />
<polygon fill="#010100" fill-opacity="0.501961" points="129,97 137,100 127,85" />
<polygon fill="#9a7f3e" fill-opacity="0.501961" points="96,63 102,76 95,68" />
<polygon fill="#82848d" fill-opacity="0.501961" points="146,141 164,141 152,137" />
<polygon fill="#616a85" fill-opacity="0.501961" points="185,83 145,101 193,96" />
<polygon fill="#b8a689" fill-opacity="0.501961" points="61,150 67,148 58,145" />
<polygon fill="#4d380c" fill-opacity="0.501961" points="258,36 269,59 233,57" />
<polygon fill="#000000" fill-opacity="0.501961" points="89,151 66,156 51,149" />
<polygon fill="#fdffff" fill-opacity="0.501961" points="71,63 62,60 90,47" />
<polygon fill="#171717" fill-opacity="0.501961" points="132,108 119,96 125,109" />
<polygon fill="#267300" fill-opacity="0.501961" points="252,68 271,92 250,95" />
<polygon fill="#000000" fill-opacity="0.501961" points="7,155 24,153 5,150" />
<polygon fill="#0a051f" fill-opacity="0.501961" points="211,56 206,83 202,46" />
<polygon fill="#cbd074" fill-opacity="0.501961" points="218,107 247,100 271,123" />
<polygon fill="#090a05" fill-opacity="0.501961" points="97,48 140,47 140,71" />
<polygon fill="#e1cdac" fill-opacity="0.501961" points="41,146 50,149 46,144" />
<polygon fill="#4f5768" fill-opacity="0.501961" points="137,152 150,147 167,152" />
<polygon fill="#b1bfcc" fill-opacity="0.501961" points="132,93 155,95 132,79" />
<polygon fill="#fbffff" fill-opacity="0.501961" points="126,78 119,81 125,75" />
<polygon fill="#000000" fill-opacity="0.501961" points="150,90 160,86 146,85" />
<polygon fill="#407d04" fill-opacity="0.501961" points="40,61 13,73 -4,32" />
<polygon fill="#7ba512" fill-opacity="0.501961" points="54,65 21,48 34,36" />
<polygon fill="#b6c833" fill-opacity="0.501961" points="84,96 53,100 68,110" />
<polygon fill="#56392a" fill-opacity="0.501961" points="247,162 230,166 220,161" />
<polygon fill="#261a14" fill-opacity="0.501961" points="175,141 104,141 112,161" />
<polygon fill="#1d395f" fill-opacity="0.501961" points="216,72 205,48 227,74" />
<polygon fill="#f6d8b9" fill-opacity="0.501961" points="215,167 200,184 138,168" />
<polygon fill="#c1c7d7" fill-opacity="0.501961" points="127,73 134,72 134,68" />
<polygon fill="#889513" fill-opacity="0.501961" points="49,89 58,105 37,111" />
<polygon fill="#ae8e74" fill-opacity="0.501961" points="30,110 21,135 35,138" />
<polygon fill="#d1c2a7" fill-opacity="0.501961" points="223,159 257,153 222,148" />
<polygon fill="#9da4b4" fill-opacity="0.501961" points="182,74 192,92 166,67" />
</g>
</svg>
<img />
</div>
<p>Consectetur rerum libero accusamus aperiam accusantium corporis unde. Eum provident quia magnam laboriosam fuga Corrupti vel quam debitis quos similique et. Quasi veritatis temporibus ducimus error quas eos voluptate assumenda!</p>
<p>Ipsum ducimus dolorem placeat illo ducimus amet Voluptate sit reprehenderit optio autem quia. Quod architecto dicta molestias accusantium tempore Velit beatae officia animi eos repellat. Nulla dolore nostrum inventore incidunt</p>
<p>Dolor blanditiis hic totam doloribus ipsum Voluptatem earum magnam adipisci corporis adipisci ea minus, nostrum dignissimos ad Corrupti explicabo architecto repellat corrupti voluptatibus Laborum sunt rem autem repudiandae distinctio. Cum?</p>
<p>Adipisicing debitis distinctio aut sunt nam laboriosam at Blanditiis quibusdam vero consequuntur ullam omnis Ab deserunt accusamus hic cumque voluptatem reprehenderit? Optio quasi a facere neque consequatur officiis soluta. Ullam</p>
<p>Sit saepe magni cum maiores ad. Omnis doloribus minus repudiandae maxime laudantium ad Ad animi veritatis autem dolorem ipsum Voluptate alias nulla distinctio ipsa minima a pariatur voluptatibus. Explicabo enim</p>
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="338" viewBox="0 0 512 338">
<rect x="0" y="0" width="512" height="338" fill="#656246" />
<g transform="scale(2.000000) translate(0.5 0.5)">
<polygon fill="#ffffff" fill-opacity="0.501961" points="111,145 -16,139 27,184" />
<polygon fill="#edc9c6" fill-opacity="0.501961" points="90,-16 77,81 232,4" />
<polygon fill="#001700" fill-opacity="0.501961" points="271,153 -16,113 271,55" />
<polygon fill="#f6ffff" fill-opacity="0.501961" points="179,138 271,162 160,163" />
<polygon fill="#273100" fill-opacity="0.501961" points="117,111 -16,144 3,-16" />
<polygon fill="#0007d5" fill-opacity="0.501961" points="165,143 100,153 116,76" />
<polygon fill="#cf896b" fill-opacity="0.501961" points="136,99 55,51 247,15" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="101,160 50,138 -16,163" />
<polygon fill="#8a0f00" fill-opacity="0.501961" points="68,68 -16,6 97,-16" />
<polygon fill="#00001b" fill-opacity="0.501961" points="146,162 -9,164 69,184" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="155,57 164,79 186,58" />
<polygon fill="#3d5400" fill-opacity="0.501961" points="252,-16 148,147 271,150" />
<polygon fill="#a43729" fill-opacity="0.501961" points="99,111 179,32 106,41" />
<polygon fill="#e0ffff" fill-opacity="0.501961" points="147,145 194,164 252,153" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="70,49 103,54 91,79" />
<polygon fill="#778e02" fill-opacity="0.501961" points="94,37 -16,55 34,84" />
<polygon fill="#063400" fill-opacity="0.501961" points="104,86 -16,72 4,132" />
<polygon fill="#9ab1b3" fill-opacity="0.501961" points="215,-12 87,3 213,48" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="132,143 134,161 124,159" />
<polygon fill="#0036e3" fill-opacity="0.501961" points="100,108 149,116 139,86" />
<polygon fill="#e1ffff" fill-opacity="0.501961" points="22,165 104,146 -16,140" />
<polygon fill="#f6f4db" fill-opacity="0.501961" points="149,66 112,65 130,53" />
<polygon fill="#6b5a52" fill-opacity="0.501961" points="271,141 150,116 152,151" />
<polygon fill="#639040" fill-opacity="0.501961" points="129,22 164,59 268,34" />
<polygon fill="#fc0008" fill-opacity="0.501961" points="133,100 164,79 150,68" />
<polygon fill="#18002d" fill-opacity="0.501961" points="136,119 116,179 94,154" />
<polygon fill="#08003c" fill-opacity="0.501961" points="177,177 140,170 123,118" />
<polygon fill="#000000" fill-opacity="0.501961" points="147,66 133,77 114,72" />
<polygon fill="#cbffff" fill-opacity="0.501961" points="213,162 247,149 271,162" />
<polygon fill="#0d3200" fill-opacity="0.501961" points="107,146 20,91 106,91" />
<polygon fill="#f61527" fill-opacity="0.501961" points="95,81 108,96 118,38" />
<polygon fill="#f0ffff" fill-opacity="0.501961" points="94,162 95,144 27,158" />
<polygon fill="#021f00" fill-opacity="0.501961" points="271,136 202,111 249,66" />
<polygon fill="#687b00" fill-opacity="0.501961" points="271,40 217,67 219,-16" />
<polygon fill="#1c1737" fill-opacity="0.501961" points="152,162 234,184 237,162" />
<polygon fill="#c90007" fill-opacity="0.501961" points="154,56 106,53 139,39" />
<polygon fill="#fbfffc" fill-opacity="0.501961" points="138,73 184,55 180,70" />
<polygon fill="#0017bf" fill-opacity="0.501961" points="139,90 133,157 153,142" />
<polygon fill="#2b4f00" fill-opacity="0.501961" points="271,37 149,87 150,132" />
<polygon fill="#ebffff" fill-opacity="0.501961" points="172,147 210,160 161,159" />
<polygon fill="#0023c6" fill-opacity="0.501961" points="109,146 129,152 106,96" />
<polygon fill="#f6ffff" fill-opacity="0.501961" points="98,75 82,44 73,62" />
<polygon fill="#447200" fill-opacity="0.501961" points="90,83 -16,83 68,55" />
<polygon fill="#782a17" fill-opacity="0.501961" points="73,-16 94,47 -16,46" />
<polygon fill="#c1c8b9" fill-opacity="0.501961" points="153,-16 105,52 106,0" />
<polygon fill="#5b8806" fill-opacity="0.501961" points="169,82 192,52 224,72" />
<polygon fill="#faffff" fill-opacity="0.501961" points="128,161 127,146 136,148" />
<polygon fill="#8b888a" fill-opacity="0.501961" points="225,-4 208,56 156,29" />
<polygon fill="#610000" fill-opacity="0.501961" points="131,162 154,144 163,156" />
<polygon fill="#39313b" fill-opacity="0.501961" points="15,162 89,163 13,184" />
<polygon fill="#e5bd6e" fill-opacity="0.501961" points="121,84 95,68 136,80" />
<polygon fill="#9d0026" fill-opacity="0.501961" points="143,97 112,85 162,81" />
<polygon fill="#ff376a" fill-opacity="0.501961" points="144,41 101,54 123,31" />
<polygon fill="#918455" fill-opacity="0.501961" points="83,40 117,84 83,-14" />
<polygon fill="#700b00" fill-opacity="0.501961" points="107,143 96,156 123,159" />
<polygon fill="#000000" fill-opacity="0.501961" points="122,77 113,68 143,72" />
<polygon fill="#d2ebff" fill-opacity="0.501961" points="-5,142 84,142 -16,169" />
<polygon fill="#44373e" fill-opacity="0.501961" points="252,151 169,145 267,124" />
<polygon fill="#ddbe9c" fill-opacity="0.501961" points="111,57 127,72 141,55" />
<polygon fill="#dcf7ff" fill-opacity="0.501961" points="156,146 176,161 221,155" />
<polygon fill="#ffffff" fill-opacity="0.501961" points="173,68 156,53 158,69" />
<polygon fill="#548619" fill-opacity="0.501961" points="159,25 147,35 154,73" />
<polygon fill="#1a58c0" fill-opacity="0.501961" points="135,109 116,84 107,104" />
<polygon fill="#575e47" fill-opacity="0.501961" points="10,140 61,119 112,144" />
<polygon fill="#123200" fill-opacity="0.501961" points="109,112 -16,107 78,71" />
<polygon fill="#f3fffd" fill-opacity="0.501961" points="100,52 76,67 97,73" />
<polygon fill="#490800" fill-opacity="0.501961" points="266,27 230,-5 259,-4" />
<polygon fill="#e9001b" fill-opacity="0.501961" points="114,99 111,79 93,76" />
<polygon fill="#0b5abb" fill-opacity="0.501961" points="140,106 121,102 139,85" />
<polygon fill="#737810" fill-opacity="0.501961" points="25,38 75,61 -16,81" />
<polygon fill="#112700" fill-opacity="0.501961" points="147,90 190,94 148,125" />
<polygon fill="#d00510" fill-opacity="0.501961" points="124,48 97,66 119,35" />
<polygon fill="#d5272f" fill-opacity="0.501961" points="143,42 143,101 157,77" />
<polygon fill="#dfb314" fill-opacity="0.501961" points="136,98 145,93 133,94" />
<polygon fill="#b1b5a5" fill-opacity="0.501961" points="215,-16 100,14 122,37" />
<polygon fill="#61633b" fill-opacity="0.501961" points="237,150 151,136 194,114" />
<polygon fill="#eaffff" fill-opacity="0.501961" points="97,161 54,161 92,146" />
<polygon fill="#692317" fill-opacity="0.501961" points="7,-16 77,51 -16,35" />
<polygon fill="#b4d4fb" fill-opacity="0.501961" points="271,153 198,148 233,163" />
<polygon fill="#365900" fill-opacity="0.501961" points="271,81 171,90 271,21" />
<polygon fill="#7b8431" fill-opacity="0.501961" points="207,58 244,24 217,-13" />
<polygon fill="#000176" fill-opacity="0.501961" points="108,146 117,109 146,114" />
<polygon fill="#455302" fill-opacity="0.501961" points="126,121 126,142 134,145" />
<polygon fill="#c2b49a" fill-opacity="0.501961" points="112,57 137,54 111,69" />
<polygon fill="#abaaad" fill-opacity="0.501961" points="109,-16 206,39 204,-7" />
<polygon fill="#ff0000" fill-opacity="0.501961" points="127,86 119,92 131,91" />
<polygon fill="#b7ee40" fill-opacity="0.501961" points="108,99 116,96 117,90" />
<polygon fill="#f795ab" fill-opacity="0.501961" points="140,36 124,45 114,29" />
<polygon fill="#e3ffff" fill-opacity="0.501961" points="126,161 126,148 136,161" />
<polygon fill="#110c2c" fill-opacity="0.501961" points="261,178 271,164 226,164" />
<polygon fill="#dffaff" fill-opacity="0.501961" points="164,161 165,149 205,161" />
<polygon fill="#44494f" fill-opacity="0.501961" points="72,161 153,184 163,161" />
<polygon fill="#000048" fill-opacity="0.501961" points="117,91 110,80 121,86" />
<polygon fill="#0023b7" fill-opacity="0.501961" points="133,153 154,144 146,120" />
<polygon fill="#5e0d06" fill-opacity="0.501961" points="109,54 127,46 143,52" />
<polygon fill="#6e511d" fill-opacity="0.501961" points="75,58 -16,46 66,34" />
<polygon fill="#3b5a00" fill-opacity="0.501961" points="76,68 29,99 -6,84" />
<polygon fill="#80a74a" fill-opacity="0.501961" points="110,36 94,57 84,43" />
<polygon fill="#fabd7e" fill-opacity="0.501961" points="123,51 130,51 134,67" />
<polygon fill="#dfaf67" fill-opacity="0.501961" points="151,74 151,64 126,85" />
<polygon fill="#4f0300" fill-opacity="0.501961" points="162,160 134,155 149,147" />
<polygon fill="#feffff" fill-opacity="0.501961" points="185,64 180,55 162,63" />
<polygon fill="#effffc" fill-opacity="0.501961" points="83,46 98,59 76,51" />
<polygon fill="#c9ddf4" fill-opacity="0.501961" points="82,143 88,153 108,143" />
<polygon fill="#74815b" fill-opacity="0.501961" points="191,64 214,48 142,18" />
<polygon fill="#40451b" fill-opacity="0.501961" points="106,127 96,143 55,117" />
<polygon fill="#554f48" fill-opacity="0.501961" points="230,149 200,150 237,125" />
<polygon fill="#f6fef6" fill-opacity="0.501961" points="155,55 161,54 162,75" />
<polygon fill="#0d1a2f" fill-opacity="0.501961" points="134,72 148,61 143,71" />
<polygon fill="#6a9fa2" fill-opacity="0.501961" points="180,68 163,80 166,72" />
<polygon fill="#173000" fill-opacity="0.501961" points="271,62 202,92 251,134" />
<polygon fill="#1d0000" fill-opacity="0.501961" points="124,151 120,160 99,157" />
<polygon fill="#648826" fill-opacity="0.501961" points="166,60 180,42 137,34" />
<polygon fill="#bcbfd0" fill-opacity="0.501961" points="143,59 136,64 133,53" />
<polygon fill="#d9eade" fill-opacity="0.501961" points="78,67 91,77 100,69" />
<polygon fill="#aab9cf" fill-opacity="0.501961" points="67,142 23,140 45,147" />
<polygon fill="#ff1f49" fill-opacity="0.501961" points="152,56 146,44 124,36" />
<polygon fill="#738200" fill-opacity="0.501961" points="239,9 217,47 252,42" />
<polygon fill="#3e4415" fill-opacity="0.501961" points="42,106 -16,137 30,139" />
<polygon fill="#6c4c2b" fill-opacity="0.501961" points="222,-16 220,10 253,14" />
<polygon fill="#113100" fill-opacity="0.501961" points="108,101 91,79 11,112" />
<polygon fill="#93340f" fill-opacity="0.501961" points="94,153 99,148 117,153" />
<polygon fill="#000048" fill-opacity="0.501961" points="115,122 140,119 137,132" />
<polygon fill="#000008" fill-opacity="0.501961" points="121,69 112,68 121,76" />
<polygon fill="#002bb4" fill-opacity="0.501961" points="106,113 111,97 137,115" />
<polygon fill="#184bb1" fill-opacity="0.501961" points="119,59 119,65 124,58" />
<polygon fill="#440702" fill-opacity="0.501961" points="134,157 164,150 160,161" />
<polygon fill="#9f7478" fill-opacity="0.501961" points="88,42 104,-15 85,-16" />
<polygon fill="#c6001b" fill-opacity="0.501961" points="137,79 142,97 160,79" />
<polygon fill="#cc0020" fill-opacity="0.501961" points="108,96 93,78 102,71" />
<polygon fill="#919683" fill-opacity="0.501961" points="206,27 107,32 152,15" />
<polygon fill="#994538" fill-opacity="0.501961" points="147,153 163,146 159,154" />
<polygon fill="#000081" fill-opacity="0.501961" points="133,87 138,83 134,94" />
<polygon fill="#e3ffff" fill-opacity="0.501961" points="127,148 130,160 133,146" />
<polygon fill="#002db4" fill-opacity="0.501961" points="107,142 107,109 124,153" />
<polygon fill="#e3f8ff" fill-opacity="0.501961" points="34,144 105,146 45,162" />
<polygon fill="#dee8db" fill-opacity="0.501961" points="101,63 99,50 85,76" />
<polygon fill="#6a6d42" fill-opacity="0.501961" points="41,141 85,131 22,124" />
<polygon fill="#2f2626" fill-opacity="0.501961" points="271,151 239,149 238,122" />
<polygon fill="#ffbc7f" fill-opacity="0.501961" points="145,68 141,57 139,60" />
<polygon fill="#6d9a26" fill-opacity="0.501961" points="104,50 98,67 103,66" />
<polygon fill="#012cbb" fill-opacity="0.501961" points="113,88 145,117 147,102" />
<polygon fill="#eb8e32" fill-opacity="0.501961" points="135,68 121,63 130,71" />
<polygon fill="#ceefff" fill-opacity="0.501961" points="201,162 252,160 218,152" />
<polygon fill="#7b7779" fill-opacity="0.501961" points="223,-7 216,21 202,0" />
<polygon fill="#172400" fill-opacity="0.501961" points="16,98 -16,85 16,138" />
<polygon fill="#770010" fill-opacity="0.501961" points="107,66 105,54 112,67" />
<polygon fill="#8aa0c4" fill-opacity="0.501961" points="17,142 -16,143 -4,137" />
<polygon fill="#380502" fill-opacity="0.501961" points="128,56 140,52 136,49" />
<polygon fill="#d59255" fill-opacity="0.501961" points="136,76 133,85 107,78" />
</g>
</svg>
<img />
</div>
<p>Dolor vero dolorum dolorem impedit ad, voluptatum numquam. Earum enim nemo velit quis assumenda Sit labore ullam assumenda laboriosam dicta assumenda Et modi quidem velit corporis numquam vero excepturi ea</p>
<p>Consectetur alias libero ad in nulla. Labore repudiandae dolore molestias illo enim illum, esse quisquam. Perferendis totam eum aliquam quis saepe Maiores qui impedit harum error nulla? Eos quasi maiores</p>
<p>Dolor nemo corporis dolorum illum laborum. Laborum quisquam rerum corporis laborum magni? Provident voluptates alias expedita ea earum Itaque earum sapiente enim quisquam cupiditate sint maiores! Maiores minus provident maxime</p>
</div>
Raw
script.babel
const getRandom = (min, max) => Math.random() * (max - min) + min;
const recolor = (polygons, initialColors) => {
polygons.forEach((polygon, i) => {
const modifiedColor = chroma(initialColors[i])
.darken(getRandom(0, 0.35))
.brighten(getRandom(0, 0.35))
.hex();
polygon.setAttribute('fill', modifiedColor);
});
};
const getTransitionDuration = element => {
const duration = getComputedStyle(element)['transitionDuration'];
return duration.includes('ms') ? parseInt(duration) : parseInt(duration) * 1000;
};
const isElementInViewport = element => {
const { top, bottom } = element.getBoundingClientRect();
const height = window.innerHeight || document.documentElement.clientHeight;
return top < height && bottom > 0;
};
const fakeImageLoad = (img, cleanUp = Function()) => setTimeout(() => {
const imageOrderInDocument = [
...document.getElementsByTagName('img')
].indexOf(img);
img.classList.add('opaque');
img.src = images[imageOrderInDocument]; // Loaded as data:url from another pen
setTimeout(() => {
cleanUp();
img.classList.add('static');
}, getTransitionDuration(img));
}, 1000 * getRandom(1, 2));
const lazyLoad = (loadImage => {
const lazyImages = new Map();
const animatedPolygons = new Map();
const animatePolygons = () => animatedPolygons.forEach(
({ polygons, initialColors }) => recolor(polygons, initialColors)
);
setInterval(animatePolygons, 100);
const handleLoad = () => {
lazyImages.forEach(({ img, svg, polygons, initialColors }, container) => {
if (isElementInViewport(svg) && !animatedPolygons.get(svg)) {
const cleanUp = () => {
container.removeChild(svg);
animatedPolygons.delete(svg);
lazyImages.delete(container);
};
animatedPolygons.set(svg, { polygons, initialColors });
loadImage(img, cleanUp);
}
});
if (!lazyImages.size) {
window.removeEventListener('load', handleLoad);
window.removeEventListener('resize', handleLoad);
window.removeEventListener('scroll', handleLoad);
}
};
return imageContainer => {
const img = imageContainer.getElementsByTagName('img')[0];
const svg = imageContainer.getElementsByTagName('svg')[0];
const polygons = [...svg.getElementsByTagName('polygon')];
const initialColors = polygons.map(polygon => polygon.getAttribute('fill'));
lazyImages.set(imageContainer, {
svg,
img,
polygons,
initialColors
});
window.addEventListener('load', handleLoad);
window.addEventListener('resize', handleLoad);
window.addEventListener('scroll', handleLoad);
};
})(fakeImageLoad);
[...document.getElementsByClassName('image-container')].forEach(
imageContainer => lazyLoad(imageContainer)
);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.7/chroma.min.js"></script>
<script src="https://codepen.io/Beaglefoot/pen/wjLKza.js"></script>
Raw
style.scss
body {
font-family: Noto Sans;
font-size: 15px;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.image-container {
position: relative;
float: left;
margin-right: 1em;
max-width: 512px;
width: 100%;
&:nth-of-type(2n) {
float: right;
margin: 0;
margin-left: 1em;
}
}
svg {
width: inherit;
height: inherit;
}
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
width: inherit;
transition: opacity 2s;
}
.opaque {
opacity: 1;
}
.static {
position: static;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment