アイソメトリックについて気になったのでいろいろ調査
記事とかでwebサイトのKVにアイソメトリックを使っているのをよく見かけるのでどんな感じで実装を行っているのか気になったので、いろいろと調査してみた。
アイソメトリックとは
傾斜させた立体を、間口・奥行き・高さの3方向で作る角度がそれぞれ120度になるように描き、一つの図で対象物の3面を同程度に表す投影図法。
メリット
奥行き・立体感を出して他のイメージとの差別化した印象的なイメージにできる。
この後紹介する多くのサイトではメインやキービジュアルにアイソメトリックのイメージ採用しています。そこからわかるのは「ここぞ」という場面で使用することでユーザーの印象に残るイメージにすることができるということです。
非現実なイメージでさらに印象を
アイソメトリックのイメージでは等身大以上の大きなスマホにハシゴで登っていたり、ノートPCを台にして人が立っていたりとジオラマの世界のように非現実です。だからこそ、単調なイメージから脱出できます。
このような非現実な表現を、サイトでアピールしたいサービスや商品と置き換えることができればオリジナリティーもあり、ユーザービューのフックにできます。
デメリット
アイソメトリックのイメージを採用する意図がなければトレンドに乗っかっただけのデザインになってしまう
印象的なアイソメトリックのイメージですが、サイトのイメージに採用する明確な意図はあるでしょうか？もし思い当たる理由がなければ一度冷静に考えてみるのも大事です。
最近の素材サイトはハイクオリティーなものが揃っていますが、それをそのまま使用するだけではクリエイターとしては残念です。メリットで触れたとおり、サイト独自の表現を考えましょう！
トレンドが過ぎたら時代遅れのサイトに
最たるデメリットがこれです。流行っている間はいいのですが、それが過ぎ、また新しいトレンドが来ると、当然それ以前のものは「古く」なります。私の感覚では、だいたい2年周期でトレンドが変わっていますので、それも考慮して取り入れるか決めましょう。
引用元のurl
https://webdesignday.jp/inspiration/web-design/5600/
リンク一覧
株式会社メルペイ
実装方法
背景の下に映像を置いている
映像 : https://jp.merpay.com/assets/homePageHeader-bg.mp4
ボラギノールタウン
実装方法
PixiJSを使用 他にもなにかしてそうだけどとりあえず
North Detail
実装方法
人・パソコン・画面の3つの画像を配置している 最初に出た時に出現のタイミングで分けるために画像も分けている
つながる科学研究所
実装方法
これも画像をいくつか重ねて実装している(画像はいっぱいあるので省略)
Storyblok
実装方法
svgで実装している
<svg class="wave__svg" width="1440" height="668" viewBox="0 0 1440 668" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="a" d="M0 0h1440v674H0z"></path> <linearGradient x1="50%" y1="12.1%" x2="50%" y2="100%" id="c"> <stop stop-color="#FFF" stop-opacity="0" offset="0%"></stop> <stop stop-color="#FFF" stop-opacity="0" offset="3.5%"></stop> <stop stop-color="#FFF" stop-opacity=".4" offset="100%"></stop> </linearGradient> <linearGradient x1="-4.2%" y1="-.9%" x2="105.3%" y2="101.9%" id="d"> <stop stop-color="#C3E0FE" offset="0%"></stop> <stop stop-color="#C1DDFC" offset="5.5%"></stop> <stop stop-color="#ABC3EE" offset="64.8%"></stop> <stop stop-color="#A3B9E8" offset="99.9%"></stop> </linearGradient> <linearGradient x1="20.9%" y1="-15.5%" x2="127%" y2="90.4%" id="e"> <stop stop-color="#BEDAFF" offset="0%"></stop> <stop stop-color="#FFF" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="-9.8%" y1="-6.8%" x2="175.7%" y2="169.4%" id="f"> <stop stop-color="#E5F2FF" offset="0%"></stop> <stop stop-color="#FFF" offset="100%"></stop> </linearGradient> <linearGradient x1="50%" y1="0%" x2="50%" y2="108%" id="g"> <stop stop-color="#A9BDEA" offset=".1%"></stop> <stop stop-color="#FFF" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="0%" y1="0%" y2="100%" id="h"> <stop stop-color="#8FE4E0" offset="0%"></stop> <stop stop-color="#86E0DD" offset="44.4%"></stop> <stop stop-color="#07A7AF" offset="100%"></stop> </linearGradient> <linearGradient x1="-29.5%" y1="-68.9%" x2="187.8%" y2="256.1%" id="i"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#E1E9FD" stop-opacity=".6" offset="36.6%"></stop> <stop stop-color="#C7D5FB" stop-opacity=".2" offset="76.3%"></stop> <stop stop-color="#BDCEFA" stop-opacity="0" offset="99.9%"></stop> </linearGradient> <linearGradient x1="3.4%" y1="-21.3%" x2="175.9%" y2="242.7%" id="j"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#E1E9FD" stop-opacity=".6" offset="36.6%"></stop> <stop stop-color="#C7D5FB" stop-opacity=".2" offset="76.3%"></stop> <stop stop-color="#BDCEFA" stop-opacity="0" offset="99.9%"></stop> </linearGradient> <linearGradient x1="11.7%" y1="-8.7%" x2="184.2%" y2="255.4%" id="k"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#E1E9FD" stop-opacity=".6" offset="36.6%"></stop> <stop stop-color="#C7D5FB" stop-opacity=".2" offset="76.3%"></stop> <stop stop-color="#BDCEFA" stop-opacity="0" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-.8%" y1="-7%" x2="101.7%" y2="108%" id="l"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-19.1%" y1="29.6%" x2="221.6%" y2="101.2%" id="m"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="120.6%" x2="50%" y2="-8.7%" id="n"> <stop stop-color="#55D1FF" offset="7.2%"></stop> <stop stop-color="#4FC3EE" stop-opacity=".9" offset="16.4%"></stop> <stop stop-color="#41A0C2" stop-opacity=".7" offset="34.7%"></stop> <stop stop-color="#29677B" stop-opacity=".4" offset="60.2%"></stop> <stop stop-color="#0A191A" stop-opacity=".1" offset="91.9%"></stop> <stop stop-color="#010400" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="1.3%" y1="1.2%" x2="138.2%" y2="141.2%" id="o"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="120.6%" x2="50%" y2="-8.7%" id="p"> <stop stop-color="#55D1FF" offset="7.2%"></stop> <stop stop-color="#4FC3EE" stop-opacity=".9" offset="16.4%"></stop> <stop stop-color="#41A0C2" stop-opacity=".7" offset="34.7%"></stop> <stop stop-color="#29677B" stop-opacity=".4" offset="60.2%"></stop> <stop stop-color="#0A191A" stop-opacity=".1" offset="91.9%"></stop> <stop stop-color="#010400" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="2.6%" y1="2.6%" x2="139.5%" y2="142.6%" id="q"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="120.6%" x2="50%" y2="-8.7%" id="r"> <stop stop-color="#55D1FF" offset="7.2%"></stop> <stop stop-color="#4FC3EE" stop-opacity=".9" offset="16.4%"></stop> <stop stop-color="#41A0C2" stop-opacity=".7" offset="34.7%"></stop> <stop stop-color="#29677B" stop-opacity=".4" offset="60.2%"></stop> <stop stop-color="#0A191A" stop-opacity=".1" offset="91.9%"></stop> <stop stop-color="#010400" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="3.9%" y1="3.9%" x2="140.8%" y2="143.9%" id="s"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="120.6%" x2="50%" y2="-8.6%" id="t"> <stop stop-color="#55D1FF" offset="7.2%"></stop> <stop stop-color="#4FC3EE" stop-opacity=".9" offset="16.4%"></stop> <stop stop-color="#41A0C2" stop-opacity=".7" offset="34.7%"></stop> <stop stop-color="#29677B" stop-opacity=".4" offset="60.2%"></stop> <stop stop-color="#0A191A" stop-opacity=".1" offset="91.9%"></stop> <stop stop-color="#010400" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="5.2%" y1="5.3%" x2="142.1%" y2="145.2%" id="u"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="120.6%" x2="50%" y2="-8.7%" id="v"> <stop stop-color="#55D1FF" offset="7.2%"></stop> <stop stop-color="#4FC3EE" stop-opacity=".9" offset="16.4%"></stop> <stop stop-color="#41A0C2" stop-opacity=".7" offset="34.7%"></stop> <stop stop-color="#29677B" stop-opacity=".4" offset="60.2%"></stop> <stop stop-color="#0A191A" stop-opacity=".1" offset="91.9%"></stop> <stop stop-color="#010400" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="6.5%" y1="6.6%" x2="143.4%" y2="146.6%" id="w"> <stop stop-color="#E4F2FF" offset="0%"></stop> <stop stop-color="#E1EFFF" offset="5.5%"></stop> <stop stop-color="#C7D7FB" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="120.6%" x2="50%" y2="-8.6%" id="x"> <stop stop-color="#55D1FF" offset="7.2%"></stop> <stop stop-color="#4FC3EE" stop-opacity=".9" offset="16.4%"></stop> <stop stop-color="#41A0C2" stop-opacity=".7" offset="34.7%"></stop> <stop stop-color="#29677B" stop-opacity=".4" offset="60.2%"></stop> <stop stop-color="#0A191A" stop-opacity=".1" offset="91.9%"></stop> <stop stop-color="#010400" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="-237%" y1="43%" x2="129.8%" y2="51.9%" id="y"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-107.6%" y1="46.2%" x2="164.1%" y2="52.8%" id="z"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-97.5%" y1="46.4%" x2="174.2%" y2="53%" id="A"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-87.3%" y1="46.7%" x2="184.3%" y2="53.3%" id="B"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-273.5%" y1="42.1%" x2="298.4%" y2="56%" id="C"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-165.6%" y1="44.8%" x2="201.2%" y2="53.7%" id="D"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-47%" y1="47.6%" x2="193.9%" y2="53.5%" id="E"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-.5%" y1="50%" x2="99.3%" y2="50%" id="F"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-2.1%" y1="46.8%" x2="100.4%" y2="51.1%" id="G"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1=".1%" y1="55.2%" x2="99.5%" y2="47.3%" id="H"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-.4%" y1="50%" y2="50%" id="I"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1=".9%" y1="50%" x2="100.3%" y2="50%" id="J"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1=".5%" y1="50%" x2="98.5%" y2="50%" id="K"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-53.8%" y1="45.1%" x2="152.8%" y2="54.8%" id="L"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-64.1%" y1="44.6%" x2="142.5%" y2="54.4%" id="M"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-74.5%" y1="44.1%" x2="132.1%" y2="53.9%" id="N"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-179.4%" y1="39.2%" x2="255.4%" y2="59.7%" id="O"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-8.9%" y1="47.2%" x2="154.3%" y2="54.9%" id="P"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-85.7%" y1="43.6%" x2="97.4%" y2="52.2%" id="Q"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-3.1%" y1="34.9%" x2="123.3%" y2="64.4%" id="R"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-3.3%" y1="34.9%" x2="123.1%" y2="64.3%" id="S"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-3.6%" y1="34.8%" x2="122.9%" y2="64.3%" id="T"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-49.5%" y1="32.6%" x2="77.8%" y2="50.6%" id="U"> <stop stop-color="#E4F2FF" stop-opacity="0" offset="0%"></stop> <stop stop-color="#E1EFFF" stop-opacity=".1" offset="5.5%"></stop> <stop stop-color="#C7D7FB" stop-opacity=".6" offset="64.8%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="100%" y1="50%" x2=".1%" y2="50%" id="V"> <stop stop-color="#9FE9E5" offset="0%"></stop> <stop stop-color="#079089" offset="99.9%"></stop> </linearGradient> <linearGradient x1="50%" y1="14.7%" x2="50%" y2="132.7%" id="W"> <stop stop-color="#FFF" stop-opacity="0" offset="0%"></stop> <stop stop-color="#4EEAE1" offset="100%"></stop> </linearGradient> <linearGradient x1="60.8%" y1="150.4%" x2="34.2%" y2="-96.5%" id="X"> <stop stop-color="#00B7AE" offset="0%"></stop> <stop stop-color="#91EBE7" stop-opacity=".5" offset="64.4%"></stop> <stop stop-color="#00B7AE" offset="100%"></stop> </linearGradient> <linearGradient x1="37.9%" y1="31.1%" x2="169.2%" y2="236.9%" id="Y"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#E1E9FD" stop-opacity=".6" offset="36.6%"></stop> <stop stop-color="#C7D5FB" stop-opacity=".2" offset="76.3%"></stop> <stop stop-color="#BDCEFA" stop-opacity="0" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-26.4%" y1="-63%" x2="234.3%" y2="322.9%" id="Z"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#E1E9FD" stop-opacity=".6" offset="36.6%"></stop> <stop stop-color="#C7D5FB" stop-opacity=".2" offset="76.3%"></stop> <stop stop-color="#BDCEFA" stop-opacity="0" offset="99.9%"></stop> </linearGradient> <linearGradient x1="-21.4%" y1="-15.9%" x2="106.7%" y2="98.4%" id="aa"> <stop stop-color="#FFF" offset="0%"></stop> <stop stop-color="#DAE4FC" offset="58.2%"></stop> <stop stop-color="#BDCEFA" offset="99.9%"></stop> </linearGradient> <linearGradient x1="64.9%" y1="179.4%" x2="30.5%" y2="-97.2%" id="ab"> <stop stop-color="#7F5EFF" offset="0%"></stop> <stop stop-color="#8665FF" offset="24.2%"></stop> <stop stop-color="#9978FF" offset="59.5%"></stop> <stop stop-color="#B391FF" offset="94%"></stop> </linearGradient> <linearGradient x1="83.4%" y1="87.2%" x2="-5.6%" y2="-29.6%" id="ac"> <stop stop-color="#7F5EFF" offset="0%"></stop> <stop stop-color="#8665FF" offset="24.2%"></stop> <stop stop-color="#9978FF" offset="59.5%"></stop> <stop stop-color="#B391FF" offset="94%"></stop> </linearGradient> <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="ad"> <stop stop-color="#FF4F00" offset="0%"></stop> <stop stop-color="#FF3D9D" offset="100%"></stop> </linearGradient> <linearGradient x1="51.3%" y1="-101.1%" x2="49.3%" y2="92.2%" id="ae"> <stop stop-color="#7F5EFF" offset="0%"></stop> <stop stop-color="#8665FF" offset="24.2%"></stop> <stop stop-color="#9978FF" offset="59.5%"></stop> <stop stop-color="#B391FF" offset="94%"></stop> </linearGradient> <path id="af" d="M0 0h19.5v9.6H0z"></path> </defs> <g fill="none" fill-rule="evenodd"> <mask id="b" fill="#fff"> <use xlink:href="#a"></use> </mask> <path d="M-516.1-250.7h1553.6L1440-121.1c55.2 110.9 70.5 167.3 45.9 169.3-227.3 18.9-377.6 271.4-462.4 316.2-299.2 157.8-467.3-10.7-762.8 167.5C39.5 665.2-219.4 664-516.1 528.4v-779.1z" fill="#09B3AF" mask="url(#b)"></path> <path d="M-84.5 92.5L1469 95.1v405.5c-264.9-102-523.8-91.7-776.8 31.3-253 122.9-512 121.7-776.8-3.5V92.5z" fill="url(#c)" mask="url(#b)" transform="matrix(-1 0 0 1 1384.6 0)"></path> <g mask="url(#b)"> <path d="M211.2 561V142c0-11.6-7-25-15.7-30L16 8.3C7.3 3.3.3 8.6.3 20.3V439c0 11.6 7 25 15.7 30l179.5 103.7c8.7 5 15.7-.3 15.7-11.9z" fill="url(#d)" transform="translate(1014.7)"></path> <g fill="#A9BDEA"> <path d="M1020.3 7.6l.3-.2-.3.2zM1221.6 572.8c2.6-2.2 4.3-6.3 4.3-11.9V142c0-11.6-7-25-15.8-30L1030.6 8.3c-3.8-2.2-7.2-2.4-10-1l9.6-5.4c2.9-2.3 6.9-2.4 11.3.2L1221 105.7c8.6 5 15.7 18.5 15.7 30v419c0 6.9-2.6 11.6-6.5 13.1l-8.6 5zM1219 574.3z"></path> </g> <path d="M8 6.7c2.3-.6 5 0 8 1.6L195.5 112c8.7 5 15.7 18.4 15.7 30v419c0 5.5-1.6 9.6-4.3 11.8l2.4-1.4c2.1-2.3 3.4-6 3.4-11V141.5c0-11.6-7-25-15.7-30L17.5 7.8c-3.6-2-7-2.3-9.6-1.1zm-2.4.8l.4-.1-.4.1z" fill="url(#e)" fill-rule="nonzero" transform="translate(1014.7)"></path> <path d="M17.2 17l31 17.8 4.6 11.7a27.3 27.3 0 0 0 10.7 13.2l84.4 48.8c4.4 2.5 8.5 2.2 10.8-.9l4.6-6.3 31 18c5.6 3.1 10 11 10 17.3v421.8c0 6.4-4.4 9-10 5.8L17.2 462c-5.6-3.2-10-11-10-17.3V22.7c0-6.4 4.4-9 10-5.8z" fill="url(#f)" transform="translate(1014.7)"></path> <path d="M1093 59.6l54.8 31.7c1 .6 1.8 0 1.8-1.4 0-1.3-.8-2.8-1.8-3.4L1093 55c-1-.6-1.8 0-1.8 1.3s.8 2.9 1.8 3.4z" fill="#A3B9E8"></path> <path d="M1230.3 252.1l.3-.1c1-.6 1.8-2.2 1.8-3.5v-38.4c0-1.3-.8-2-1.8-1.4l-.3.2c-1 .6-1.8 2.1-1.8 3.4v38.5c0 1.3.9 2 1.8 1.3z" fill="#7B97C9"></path> <path d="M1232.4 252.1l.2-.1c1-.6 1.8-2.2 1.8-3.5v-38.4c0-1.3-.8-2-1.8-1.4l-.2.2c-1 .6-1.9 2.1-1.9 3.4v38.5c0 1.3.9 2 1.9 1.3zM1053.6 14.3c-1.7 1-1.7 2.6 0 3.6a7 7 0 0 0 6.3 0c1.7-1 1.7-2.6 0-3.6a7 7 0 0 0-6.3 0z" fill="#90A9D6"></path> <path d="M1053.6 14.3a7 7 0 0 1 6.3 0c.5.3.8.6 1 .9l-.4-.3a7 7 0 0 0-6.3 0c-1.2.8-1.6 1.8-1 2.8-1.3-1-1.1-2.5.4-3.4z" fill="#7B97C9"></path> <g opacity=".3" fill="#FFF"> <path d="M1021.8 222.2V81.7L1219 278.9v140.6zM1219 237.6L1021.8 40.4V22.7c0-6.4 4.5-9 10-5.8l16 9.2 19.3 19.4.4 1a27.3 27.3 0 0 0 10.7 13.2l7.4 4.3L1219 197.4v40.2zM1021.8 334.5v-80.7L1219 451v80.8zM1021.8 407.2v-18.4l159.5 159.4-43.7-25.2z"></path> </g> <path d="M56.7 53.4c2.3 4 5.5 7.4 8.8 9.3l84.5 48.8c4.4 2.5 8.4 2.2 10.7-.9l4.6-6.2 31 17.8c2 1.1 3.7 2.8 5.2 4.8-1.8-3.3-4.4-6.1-7.2-7.8l-31-17.9-4.6 6.3c-2.3 3-6.4 3.4-10.8.9L63.5 59.7a23.7 23.7 0 0 1-6.8-6.3zM7.1 22.7v421.9c0 4.1 2 9 4.8 12.6-1.7-3-2.8-6.5-2.8-9.6V25.8c0-6.4 4.5-9 10-5.8l30 17.2-1-2.4-31-17.9c-5.5-3.2-10-.6-10 5.8z" fill="url(#g)" fill-rule="nonzero" transform="translate(1014.7)"></path> <g> <g fill="#C3E0FE"> <path d="M1146.5 256.7l54.3 31.4c3.8 2.2 6.9-.1 6.9-5.2 0-5-3-11-6.9-13.1l-54.3-31.4c-3.8-2.2-7 .1-7 5.2 0 5 3.2 11 7 13.1zM1127 271l73.8 42.6c3.8 2.2 6.9-.1 6.9-5.2 0-5-3-11-6.9-13.1l-73.8-42.6c-3.8-2.2-6.9 0-6.9 5.1s3.1 11 6.9 13.2zM1159.4 315.2l41.4 24c3.8 2.1 6.9-.2 6.9-5.3 0-5-3-11-6.9-13.1l-41.4-24c-3.8-2.1-6.8.2-6.8 5.3 0 5 3 11 6.8 13.1z"></path> </g> <path d="M30.6 376.9l155.9 90c6 3.5 11-.3 11-8.4v-85.1c0-8.1-5-17.6-11-21.1l-156-90c-6-3.5-11 .2-11 8.3v85.2c0 8 5 17.6 11 21z" fill="url(#h)" transform="translate(1010.4 65.5)"></path> <path d="M1029.7 81.7V74c0-6.7 4.7-9.4 10.4-6l157.3 90.7a23.2 23.2 0 0 1 10.5 18.2v7.7L1029.7 81.7z" fill="#32BFC5"></path> <g fill="#91EBE7"> <path d="M1189.3 164c0 2.7 2 6 4.3 7.3 2.3 1.3 4.2.3 4.2-2.4 0-2.7-2-6-4.2-7.3-2.4-1.4-4.3-.3-4.3 2.4zM1174.5 155.4c0 2.7 2 6 4.2 7.3 2.4 1.4 4.3.3 4.3-2.4 0-2.7-2-6-4.3-7.3-2.3-1.3-4.2-.2-4.2 2.4zM1159.7 146.9c0 2.7 1.9 6 4.2 7.3 2.3 1.3 4.2.2 4.2-2.4 0-2.7-1.9-6-4.2-7.4-2.3-1.3-4.2-.2-4.2 2.5z"></path> </g> <path fill="#C3E0FE" d="M1029.7 309.6l176.8 102.1v-4l-176.8-102zM1029.7 259.4l176.8 102.1v-4l-176.8-102z"></path> <path d="M1102.9 338.3l32 18.5c2.5 1.5 4.6 0 4.6-3.5V340c0-3.4-2-7.4-4.7-9l-32-18.4c-2.5-1.5-4.6.1-4.6 3.6v13.2c0 3.4 2 7.4 4.7 9zM1043.9 304.3l32 18.4c2.5 1.5 4.6 0 4.6-3.5V306c0-3.5-2-7.5-4.7-9l-32-18.4c-2.5-1.5-4.6 0-4.6 3.5v13.2c0 3.5 2 7.5 4.7 9z" fill="#BEDAFF"></path> <path d="M1181.5 402.1c-.9.7-2 .8-3.4 0l-32-18.5c-2.5-1.5-4.6-5.5-4.6-8.9v-13.2c0-1.8.5-3 1.4-3.7l15.6-11.2c.9-.6 2-.7 3.4 0l32 18.6c2.5 1.4 4.6 5.4 4.6 8.9v13.2c0 1.8-.5 3-1.4 3.7l-15.6 11.1z" fill="#9CC0E8"></path> <path d="M1146.1 383.6l32 18.5c2.6 1.5 4.7 0 4.7-3.5v-13.3c0-3.4-2-7.4-4.7-9l-32-18.4c-2.5-1.5-4.6.1-4.6 3.6v13.2c0 3.4 2 7.4 4.6 9z" fill="#BEDAFF"></path> <g> <path d="M1036 152.5l90.6 52.3c3.4 2 6.1-.1 6.1-4.6v-23.4c0-4.5-2.7-9.8-6.1-11.7l-90.6-52.3c-3.4-2-6.1.1-6.1 4.6v23.4c0 4.5 2.7 9.8 6.1 11.7z" fill="#C3E0FE"></path> <path d="M11.2 25.7l34.3 19.8c.8.5 1.5 0 1.5-1.1v-.1c0-1-.7-2.4-1.5-2.8L11.2 21.7c-.8-.5-1.5 0-1.5 1.1 0 1.2.7 2.4 1.5 3z" fill="url(#i)" transform="translate(1081.2 149.3)"></path> <path d="M1.5 12.4l44 25.3c.8.5 1.5 0 1.5-1v-.2c0-1-.7-2.3-1.5-2.8L1.5 8.4c-.8-.5-1.4 0-1.4 1v.2c0 1 .6 2.3 1.4 2.8z" fill="url(#j)" transform="translate(1081.2 149.3)"></path> <path d="M1.5 4.6l44 25.4c.8.5 1.5 0 1.5-1.1v-.1c0-1.1-.7-2.4-1.5-2.8L1.5.6C.7.1.1.6.1 1.7v.1C0 3 .7 4.2 1.5 4.6z" fill="url(#k)" transform="translate(1081.2 149.3)"></path> <g> <path fill="url(#l)" d="M0 34.3l22.5 13v-21L0 13.3z" transform="translate(1016.7 123.5)"></path> <path fill="#BDCEFA" d="M1016.8 136.9h.1l22-12.8v-.2l22.5 13v20.9l-22.2 13v-21z"></path> </g> </g> <g class="i1__blok"> <path d="M1018.5 255l45.5 26.3c4 2.3 7.4-.2 7.4-5.6v-49.8c0-5.5-3.4-11.8-7.4-14.2l-45.5-26.2c-4-2.3-7.4.2-7.4 5.6v49.8c0 5.5 3.3 11.8 7.4 14.1z" fill="#383E7F"></path> <path d="M1045.6 240c.4.7.5 1.5.5 2.2 0 .7-.2 1.3-.6 1.5-.4.2-.8.2-1.4-.1l-9-5.3v-5.2l9.2 5.3c.6.3 1 .8 1.3 1.6zm-1-7.8c-.3 0-.8.1-1.2-.1l-8.2-4.9v-4.7l8.4 4.9a3.5 3.5 0 0 1 1.6 3.2c0 .9-.2 1.5-.6 1.6zm13.4-12c1 .6 1.7 2 1.7 3.3l.3 41.5c0 1.4-.7 1.8-1.8 1.2L1035 253l-6.5 4.5V249l-5.1-3.2c-1-.6-2-2-2-3.2l.3-41.4c0-1.2.9-1.8 2-1l34.4 19.9zm-5.7 30.5c.4-.8.6-1.8.6-3a13.2 13.2 0 0 0-4.5-10.1c1 0 2-.5 2.6-1.4.6-1 .9-2.1.9-3.5a13.6 13.6 0 0 0-5.6-10.6l-17.7-10.4-.1 29.5 15.7 9.2c1.2.7 2.3 1.1 3.4 1.4 1 .3 2 .3 2.8.1.8-.1 1.5-.5 2-1.2z" fill="#FFF" fill-rule="nonzero"></path> <path d="M1071.4 275.7v-49.8c0-5.5-3.4-11.8-7.4-14.2l-45.5-26.2c-1.7-1-3.4-1.1-4.6-.5l18.4-10.4c1.3-.7 3-.6 4.8.4l45.4 26.3c4 2.3 7.4 8.6 7.4 14v50c0 3-1 5.1-2.7 6l-18.4 10.4c1.5-.9 2.6-3 2.6-6z" fill="#090062"></path> </g> </g> <g> <path d="M966 310.5l64 35.7c2.8 1.6 7.8 1.4 11-.5l37.4-21.5c3.2-1.9 3.6-4.7.8-6.4l-64-35.7c-2.9-1.6-7.9-1.4-11.1.5L966.8 304c-3.3 1.9-3.6 4.8-.8 6.4z" fill="#FFF"></path> <path d="M1 174.3V0c.2.9.8 1.7 1.9 2.3l64 35.7c1.3.8 3.2 1.1 5.1 1v175.4c-1.9 0-3.8-.3-5.1-1.1l-64-35.7c-1.5-.8-2-2-1.9-3.3z" fill="url(#m)" transform="translate(963.1 308.2)"></path> <path d="M78 37.5L115.3 16c1.5-.9 2.4-2 2.6-3.1v174.3c.3 1.4-.6 3-2.6 4.1L78 212.8c-1.7 1-3.9 1.5-6 1.6V39c2.1 0 4.3-.6 6-1.6z" fill="url(#n)" transform="translate(963.1 308.2)"></path> <path d="M1041 345.7l37.4-21.5c1.5-.9 2.4-2 2.6-3.1v174.3c.3 1.4-.6 3-2.6 4.1l-37.3 21.6c-1.7 1-3.9 1.5-6 1.5V347.3c2.1 0 4.3-.6 6-1.6z" fill="#BDCEFA"></path> <g> <path d="M928.8 360.4l64 36.8c2.8 1.6 7.8 1.4 11-.5l21.3-12.7c3.3-1.9 3.7-4.8.8-6.4L962.2 341c-2.8-1.6-7.8-1.4-11.1.5L929.6 354c-3.3 2-3.7 4.8-.8 6.4z" fill="#FFF"></path> <path d="M.3 6.8V.5c.2.9.8 1.7 1.9 2.3l64 36.7a10 10 0 0 0 5.1 1.1V48c-2 0-3.8-.3-5.2-1L2.1 10C.8 9.2.2 8 .4 6.8z" fill="url(#o)" transform="translate(926.6 357.6)"></path> <path d="M77.3 39l21.2-12.6c1.6-1 2.5-2 2.7-3.2v6.3c.3 1.4-.6 3-2.7 4.2L77.3 46.4c-1.8 1-4 1.5-6 1.5v-7.3c2 0 4.2-.5 6-1.5z" fill="url(#p)" transform="translate(926.6 357.6)"></path> <path d="M1003.8 396.7l21.3-12.7c1.6-.9 2.5-2 2.7-3.1v6.2c.3 1.5-.6 3-2.7 4.2l-21.3 12.7c-1.7 1-3.8 1.5-6 1.5v-7.2c2.2 0 4.3-.6 6-1.6z" fill="#BDCEFA"></path> <path d="M901.4 398.5l64 36.8c2.8 1.6 7.8 1.4 11-.5l21.4-12.7c3.3-1.9 3.6-4.7.8-6.4l-63.8-36.5c-2.8-1.7-7.8-1.5-11 .4l-21.6 12.5c-3.3 2-3.6 4.8-.8 6.4z" fill="#FFF"></path> <path d="M.9 6.3V.1c.2.8.8 1.6 1.8 2.2l64 36.8a10 10 0 0 0 5.2 1v7.3c-2 0-3.8-.3-5.2-1L2.7 9.5c-1.4-.9-2-2-1.8-3.3z" fill="url(#q)" transform="translate(898.7 396.2)"></path> <path d="M77.8 38.6l21.3-12.7c1.6-.9 2.5-2 2.7-3.1V29c.2 1.4-.7 3-2.7 4.2L77.8 45.9c-1.7 1-3.8 1.5-6 1.5v-7.2c2.2-.1 4.3-.6 6-1.6z" fill="url(#r)" transform="translate(898.7 396.2)"></path> <path d="M976.5 434.8l21.3-12.7c1.5-.9 2.4-2 2.6-3.1v6.3c.3 1.4-.6 3-2.6 4.1l-21.3 12.7c-1.7 1-3.9 1.5-6 1.5v-7.2c2.1 0 4.3-.6 6-1.6z" fill="#BDCEFA"></path> <g> <path d="M874 436.7l64 36.7c2.9 1.6 7.9 1.4 11.1-.5l21.3-12.7c3.3-1.9 3.7-4.7.8-6.4l-63.7-36.5c-2.8-1.7-7.8-1.5-11.1.4l-21.5 12.5c-3.3 2-3.7 4.8-.8 6.5z" fill="#FFF"></path> <path d="M.4 6.8V.5c.2.9.8 1.7 1.8 2.3l64 36.7a10 10 0 0 0 5.2 1.1v7.3c-2 0-3.8-.3-5.2-1.1L2.2 10C.8 9.2.2 8 .4 6.8z" fill="url(#s)" transform="translate(871.8 433.9)"></path> <path d="M77.3 39l21.3-12.6c1.6-1 2.5-2 2.7-3.2v6.3c.2 1.4-.7 3-2.7 4.1L77.3 46.3c-1.7 1-3.8 1.5-6 1.6v-7.3c2.2 0 4.3-.6 6-1.5z" fill="url(#t)" transform="translate(871.8 433.9)"></path> <path d="M949.1 473l21.3-12.8c1.6-.9 2.5-2 2.7-3.1v6.3c.3 1.4-.6 3-2.7 4.1l-21.3 12.7c-1.7 1-3.8 1.5-5.9 1.6v-7.3c2 0 4.2-.6 6-1.6z" fill="#BDCEFA"></path> </g> <g> <path d="M846.7 474.8l64 36.7c2.8 1.6 7.8 1.4 11.1-.5l21.3-12.7c3.3-1.8 3.6-4.7.8-6.4L880 455.4c-2.8-1.7-7.8-1.5-11 .4l-21.6 12.6c-3.3 1.8-3.6 4.7-.8 6.4z" fill="#FFF"></path> <path d="M1 6.3V0c.1.9.7 1.7 1.8 2.3l64 36.7a10 10 0 0 0 5.2 1.1v7.3c-2 0-3.8-.3-5.2-1.1L2.8 9.6c-1.5-.9-2-2-1.8-3.3z" fill="url(#u)" transform="translate(843.9 472.5)"></path> <path d="M77.9 38.6l21.3-12.7c1.5-1 2.4-2 2.6-3.2V29c.3 1.4-.6 3-2.6 4.1L77.9 45.8c-1.7 1-3.9 1.5-6 1.6V40c2.1 0 4.3-.5 6-1.5z" fill="url(#v)" transform="translate(843.9 472.5)"></path> <path d="M921.8 511l21.3-12.7c1.5-.9 2.4-2 2.6-3.1v6.3c.3 1.4-.6 3-2.6 4.1l-21.3 12.7c-1.7 1-3.9 1.5-6 1.6v-7.3c2.1 0 4.3-.6 6-1.6z" fill="#BDCEFA"></path> </g> <g> <path d="M819.4 512.9l64 36.7c2.8 1.6 7.8 1.4 11-.5l21.3-12.6c3.3-2 3.7-4.8.8-6.5l-63.7-36.5c-2.8-1.7-7.8-1.4-11.1.4l-21.5 12.6c-3.3 1.9-3.7 4.7-.8 6.4z" fill="#FFF"></path> <path d="M.5 6.7V.5c.1.8.7 1.6 1.8 2.2l64 36.8a10 10 0 0 0 5.2 1v7.3c-2 0-3.8-.3-5.2-1L2.3 10C.8 9.2.3 8 .5 6.7z" fill="url(#w)" transform="translate(817 510.1)"></path> <path d="M77.4 39l21.3-12.7c1.5-.9 2.4-2 2.6-3.1v6.3c.3 1.4-.6 3-2.6 4.1L77.4 46.3c-1.7 1-3.9 1.5-6 1.5v-7.2c2.1 0 4.3-.6 6-1.6z" fill="url(#x)" transform="translate(817 510.1)"></path> <path d="M894.5 549.1l21.2-12.6c1.6-1 2.5-2 2.7-3.2v6.3c.3 1.4-.6 3-2.7 4.1l-21.2 12.7c-1.7 1-4 1.5-6 1.6v-7.3c2 0 4.3-.6 6-1.6z" fill="#BDCEFA"></path> </g> </g> </g> <g> <path d="M1012.2 569.4l73.2 42.2c3 1.7 8.2 1.5 11.6-.5l76.6-44.2c3.5-2 3.8-5 .9-6.7l-73.2-42.3c-3-1.7-8.2-1.4-11.6.5l-76.6 44.3c-3.5 2-3.8 5-.9 6.7z" fill="#FEFEFE"></path> <path d="M1012.2 569.4l73.2 42.2c3 1.7 8.2 1.5 11.6-.5l76.6-44.2c2-1.1 3-2.5 2.9-3.9v3c0 1.3-1 2.7-2.9 3.8l-76.6 44.3c-3.4 2-8.6 2.2-11.6.5l-73.2-42.3c-1.3-.7-2-1.8-2-2.8v-3c0 1.1.7 2.1 2 2.9z" fill="#BDCEFA"></path> <path d="M91.9 36.5l29.5 17c1 .6 2.8.6 4-.1l19.4-11.2c1.1-.7 1.3-1.7.3-2.3l-29.6-17c-1-.6-2.7-.6-3.9.1L92.2 34.2c-1.2.7-1.3 1.7-.3 2.3z" fill="url(#y)" transform="translate(1020 523)"></path> <path d="M41.8 20.7l68.4 39.5c1 .5 2.6.4 3.6-.2 1.1-.6 1.3-1.6.3-2.1L45.7 18.4c-1-.5-2.6-.5-3.7.2-1 .6-1.2 1.5-.2 2z" fill="url(#z)" transform="translate(1020 523)"></path> <path d="M34.3 25l68.4 39.5c.9.6 2.5.5 3.6-.1 1.1-.7 1.2-1.6.3-2.2L38.2 22.7c-1-.5-2.6-.4-3.7.2-1 .6-1.2 1.6-.2 2.1z" fill="url(#A)" transform="translate(1020 523)"></path> <path d="M26.8 29.4l68.4 39.4c.9.6 2.5.5 3.6-.1s1.2-1.6.3-2.1L30.7 27c-1-.6-2.6-.5-3.7.1-1 .7-1.2 1.6-.2 2.2z" fill="url(#B)" transform="translate(1020 523)"></path> <path d="M57.9 56l29.7 17.2c1 .5 2.6.5 3.7-.2 1.1-.6 1.2-1.6.3-2.1L61.8 53.7c-1-.5-2.6-.5-3.7.2-1 .6-1.2 1.6-.2 2.1z" fill="url(#C)" transform="translate(1020 523)"></path> <path d="M53.3 14.2l29.5 17c1 .6 2.7.5 4-.1L106 19.9c1.2-.7 1.3-1.7.3-2.3L77 .6c-1-.6-2.8-.6-4 .1L53.6 12c-1.1.7-1.3 1.7-.2 2.3z" fill="url(#D)" transform="translate(1020 523)"></path> <path d="M1.3 44.2l68.2 39.3c1 .6 2.8.5 4-.1l9.2-5.4c1.2-.7 1.3-1.7.3-2.3L14.9 36.4c-1-.6-2.8-.5-4 .1L1.6 42c-1.1.7-1.3 1.7-.3 2.3z" fill="url(#E)" transform="translate(1020 523)"></path> <g> <path d="M1012.2 574.6l73.2 42.3c3 1.7 8.2 1.5 11.6-.5l76.6-44.3c2-1 3-2.5 2.9-3.8v2.9c0 1.3-1 2.8-2.9 3.9l-76.6 44.2c-3.4 2-8.6 2.2-11.6.5l-73.2-42.2c-1.3-.8-2-1.8-2-2.9v-2.9c0 1 .7 2 2 2.8z" fill="#BDCEFA"></path> <path d="M3 5.3L76 47.5c3 1.7 8.2 1.5 11.6-.5l76.7-44.2a5.7 5.7 0 0 0 2.5-2.6c.7 1.6-.1 3.5-2.5 4.9L87.7 49.3c-3.4 2-8.6 2.2-11.6.5L3 7.6C1 6.6.6 5 1.2 3.5A4 4 0 0 0 3 5.3z" fill="url(#F)" transform="translate(1009.3 567)"></path> </g> <g> <path d="M1012.2 579.9l73.2 42.2c3 1.7 8.2 1.5 11.6-.5l76.6-44.2c2-1.1 3-2.6 2.9-3.9v2.9c0 1.4-1 2.8-2.9 4l-76.6 44.2c-3.4 2-8.6 2.2-11.6.4l-73.2-42.2c-1.3-.8-2-1.8-2-2.8v-3c0 1.1.7 2.1 2 2.9z" fill="#BDCEFA"></path> <path d="M3 5.1L76 47.4c3 1.7 8.2 1.5 11.6-.5l76.7-44.2a5.7 5.7 0 0 0 2.5-2.7c.7 1.6-.1 3.6-2.5 5L87.7 49.2c-3.4 2-8.6 2.2-11.6.5L3 7.4C1 6.4.6 4.8 1.2 3.4A4 4 0 0 0 3 5z" fill="url(#G)" transform="translate(1009.3 572.4)"></path> </g> <g> <path d="M1012.2 585.1l73.2 42.2c3 1.8 8.2 1.5 11.6-.4l76.6-44.3c2-1 3-2.5 2.9-3.9v3c0 1.3-1 2.7-2.9 3.9l-76.6 44.2c-3.4 2-8.6 2.2-11.6.5l-73.2-42.3c-1.3-.7-2-1.7-2-2.8v-2.9c0 1 .7 2 2 2.8z" fill="#BDCEFA"></path> <path d="M3 6L76 48.4c3 1.7 8.2 1.5 11.6-.5l76.7-44.2a5.7 5.7 0 0 0 2.5-2.6c.7 1.6-.1 3.5-2.5 4.9L87.7 50.1c-3.4 2-8.6 2.2-11.6.5L3 8.4C1 7.4.6 5.8 1.2 4.3A4 4 0 0 0 3 6z" fill="url(#H)" transform="translate(1009.3 576.7)"></path> </g> <g> <path d="M1012.2 590.3l73.2 42.3c3 1.7 8.2 1.5 11.6-.5l76.6-44.2c2-1.1 3-2.6 2.9-4v3c0 1.3-1 2.8-2.9 3.9L1097 635c-3.4 2-8.6 2.2-11.6.5l-73.2-42.2c-1.3-.8-2-1.8-2-2.9v-2.8c0 1 .7 2 2 2.7z" fill="#BDCEFA"></path> <path d="M3 6L76 48.2c3 1.7 8.2 1.5 11.6-.5l76.7-44.2a5.7 5.7 0 0 0 2.5-2.7c.7 1.7-.1 3.6-2.5 5L87.7 50c-3.4 2-8.6 2.2-11.6.5L3 8.3C1 7.2.6 5.6 1.2 4.2A4 4 0 0 0 3 6z" fill="url(#I)" transform="translate(1009.3 582)"></path> </g> <g> <path d="M1012.2 595.6l73.2 42.2c3 1.7 8.2 1.5 11.6-.5l76.6-44.2c2-1.1 3-2.5 2.9-3.9v3c0 1.3-1 2.7-2.9 3.8l-76.6 44.3c-3.4 2-8.6 2.2-11.6.5l-73.2-42.3c-1.3-.7-2-1.7-2-2.8v-3c0 1.1.7 2.1 2 2.9z" fill="#BDCEFA"></path> <path d="M3 5.8L76 48.1c3 1.7 8.2 1.5 11.6-.5l76.7-44.3a5.7 5.7 0 0 0 2.5-2.6c.7 1.6-.1 3.5-2.5 5L87.7 49.8c-3.4 2-8.6 2.2-11.6.5L3 8C1 7.1.6 5.5 1.2 4.1A4 4 0 0 0 3 5.7z" fill="url(#J)" transform="translate(1009.3 587.5)"></path> </g> <g> <path d="M1012.2 600.8l73.2 42.3c3 1.7 8.2 1.5 11.6-.5l76.6-44.3c2-1 3-2.5 2.9-3.8v2.9c0 1.3-1 2.8-2.9 3.9l-76.6 44.2c-3.4 2-8.6 2.2-11.6.5l-73.2-42.2c-1.3-.8-2-1.8-2-2.9V598c0 1 .7 2 2 2.8z" fill="#BDCEFA"></path> <path d="M3 5.7L76 47.9c3 1.7 8.2 1.5 11.6-.4l76.7-44.3a5.7 5.7 0 0 0 2.5-2.6c.7 1.6-.1 3.5-2.5 5L87.7 49.7c-3.4 2-8.6 2.1-11.6.4L3 8C1 7 .6 5.4 1.2 3.9A4 4 0 0 0 3 5.7z" fill="url(#K)" transform="translate(1009.3 592.8)"></path> </g> <g> <path d="M835.7 436.9L762.6 479c-3 1.7-8.2 1.5-11.6-.4l-76.7-44.3c-3.4-2-3.8-5-.8-6.7l73.2-42.2c3-1.7 8.2-1.5 11.6.4l76.6 44.3c3.4 2 3.8 5 .8 6.7z" fill="#FFF"></path> <path d="M835.7 436.9L762.6 479c-3 1.7-8.2 1.5-11.6-.4l-76.7-44.3c-1.9-1.1-2.8-2.5-2.8-3.9v3c0 1.3.9 2.7 2.8 3.8l76.7 44.3c3.4 2 8.6 2.2 11.6.5l73.1-42.3c1.4-.7 2-1.7 2-2.8v-2.9c0 1-.7 2-2 2.8z" fill="#BDCEFA"></path> <path d="M104.4 21.4L36 60.9c-.9.5-2.5.4-3.6-.2-1.1-.6-1.2-1.6-.3-2.1L100.5 19c1-.6 2.6-.5 3.7.1 1 .7 1.2 1.6.2 2.2z" fill="url(#L)" transform="translate(681.7 389.8)"></path> <path d="M112 25.7L43.6 65.2c-1 .5-2.6.5-3.7-.2-1.1-.6-1.2-1.5-.3-2L108 23.3c1-.5 2.6-.4 3.7.2 1 .6 1.2 1.6.3 2.1z" fill="url(#M)" transform="translate(681.7 389.8)"></path> <path d="M119.5 30L51 69.5c-1 .6-2.6.5-3.7-.1-1.1-.7-1.2-1.6-.3-2.1l68.4-39.5c1-.6 2.6-.5 3.7.1 1 .6 1.2 1.6.3 2.1z" fill="url(#N)" transform="translate(681.7 389.8)"></path> <path d="M88.3 56.7L58.6 73.9c-1 .5-2.6.4-3.7-.2-1-.6-1.2-1.6-.3-2.1l29.8-17.2c1-.5 2.6-.5 3.7.2 1 .6 1.2 1.5.2 2z" fill="url(#O)" transform="translate(681.7 389.8)"></path> <path d="M93 14.9L24.8 54.3c-1 .6-2.8.5-4-.2L1.5 43c-1.1-.7-1.2-1.7-.2-2.3L69.3 1.2c1-.6 2.8-.5 4 .2l19.4 11.2c1.1.7 1.3 1.7.3 2.3z" fill="url(#P)" transform="translate(681.7 389.8)"></path> <path d="M144.9 44.9L76.7 84.2c-1 .6-2.7.5-4-.2l-9.2-5.3c-1.2-.7-1.3-1.7-.3-2.3l68.2-39.3c1-.6 2.7-.6 4 .1l9.2 5.4c1.2.7 1.3 1.7.3 2.3z" fill="url(#Q)" transform="translate(681.7 389.8)"></path> <g> <path d="M835.7 442.1l-73.1 42.3c-3 1.7-8.2 1.5-11.6-.5l-76.7-44.2c-1.9-1.2-2.8-2.6-2.8-4v3c0 1.3.9 2.8 2.8 3.9l76.7 44.2c3.4 2 8.6 2.2 11.6.5l73.1-42.2c1.4-.8 2-1.8 2-2.9v-2.9c0 1.1-.7 2-2 2.8z" fill="#BDCEFA"></path> <path d="M164.7 6L91.6 48.2c-3 1.7-8.2 1.5-11.6-.5L3.3 3.5A5.8 5.8 0 0 1 .8.8c-.8 1.7.1 3.6 2.5 5L80 50c3.4 2 8.6 2.2 11.6.5l73.1-42.2c1.9-1.1 2.4-2.6 1.8-4.1a4 4 0 0 1-1.8 1.8z" fill="url(#R)" transform="translate(671 433.9)"></path> </g> <g> <path d="M835.7 447.4l-73.1 42.2c-3 1.7-8.2 1.5-11.6-.5L674.3 445c-1.9-1.1-2.8-2.5-2.8-3.9v3c0 1.3.9 2.7 2.8 3.8l76.7 44.3c3.4 2 8.6 2.2 11.6.5l73.1-42.3c1.4-.7 2-1.7 2-2.8v-3c0 1.1-.7 2.1-2 2.9z" fill="#BDCEFA"></path> <path d="M164.7 5.8L91.6 48.1c-3 1.7-8.2 1.5-11.6-.5L3.3 3.3A5.8 5.8 0 0 1 .8.7c-.8 1.6.1 3.5 2.5 5L80 49.8c3.4 2 8.6 2.2 11.6.5L164.7 8c1.9-1 2.4-2.6 1.8-4a4 4 0 0 1-1.8 1.7z" fill="url(#S)" transform="translate(671 439.2)"></path> </g> <g> <path d="M835.7 452.6L762.6 495c-3 1.7-8.2 1.5-11.6-.5L674.3 450c-1.9-1-2.8-2.5-2.8-3.8v2.9c0 1.3.9 2.8 2.8 3.9l76.7 44.2c3.4 2 8.6 2.2 11.6.5l73.1-42.2c1.4-.8 2-1.8 2-2.9v-2.9c0 1-.7 2-2 2.8z" fill="#BDCEFA"></path> <path d="M164.7 5.7L91.6 47.9c-3 1.8-8.2 1.5-11.6-.4L3.3 3.2A5.8 5.8 0 0 1 .8.6C0 2.2.9 4 3.3 5.6L80 49.7c3.4 2 8.6 2.2 11.6.4L164.7 8c1.9-1 2.4-2.6 1.8-4.1a4 4 0 0 1-1.8 1.8z" fill="url(#T)" transform="translate(671 444.6)"></path> </g> </g> </g> <g> <path d="M809 345.7c-14.8 8.6-14.8 22.4 0 31a59.3 59.3 0 0 0 53.8 0c14.8-8.6 14.8-22.4 0-31a59.3 59.3 0 0 0-53.7 0z" fill="#FFF"></path> <path d="M11.3 38.4a59.3 59.3 0 0 0 53.7 0c7.4-4.2 11.1-9.8 11.2-15.4v13.6c0 5.6-3.7 11.3-11.2 15.6a59.3 59.3 0 0 1-53.7 0C4 47.9.2 42.2.3 36.6V23c0 5.6 3.7 11.2 11 15.4z" fill="url(#U)" transform="translate(797.7 338.3)"></path> <path d="M61.5 16.9a51.5 51.5 0 0 0-46.6 0 19 19 0 0 0-9 9.7c-2.1-6 .9-12.5 9-17.2a51.5 51.5 0 0 1 46.6 0c8 4.7 11 11.2 9 17.2a19 19 0 0 0-9-9.7z" fill="url(#V)" transform="translate(797.7 338.3)"></path> <path d="M812.6 355.1a51.5 51.5 0 0 1 46.6 0 19 19 0 0 1 9 9.8 19 19 0 0 1-9 9.8 51.5 51.5 0 0 1-46.6 0 19 19 0 0 1-9-9.8 19 19 0 0 1 9-9.8z" fill="#72FFF8"></path> <g transform="translate(809.5 343.7)"> <path class="i1_rect1" d="M29.2 15.2h4.3v-4.4a1.4 1.4 0 1 1 2.9 0v4.4h4.3a1.4 1.4 0 1 1 0 2.8h-4.3v4.3a1.4 1.4 0 1 1-2.9 0V18h-4.3a1.4 1.4 0 1 1 0-2.8zM5.6 10.7h4.3V6.4a1.4 1.4 0 1 1 2.9 0v4.3H17a1.4 1.4 0 0 1 0 2.9h-4.3v4.3a1.4 1.4 0 0 1-3 0v-4.3H5.7a1.4 1.4 0 1 1 0-2.9z" fill="#00E9FF"></path> <path class="i1_rect6" d="M33.3 6.4h4.3V2.1a1.4 1.4 0 1 1 3 0v4.3h4.2a1.4 1.4 0 0 1 0 2.9h-4.3v4.3a1.4 1.4 0 1 1-2.9 0V9.3h-4.3a1.4 1.4 0 1 1 0-2.9zM13.8 20.4H18V16a1.4 1.4 0 1 1 2.9 0v4.3h4.3a1.4 1.4 0 1 1 0 2.9H21v4.3a1.4 1.4 0 1 1-3 0v-4.3h-4.2a1.4 1.4 0 1 1 0-3z" fill="#00E9FF"></path> <ellipse class="i1_rect6" fill="#0382FF" cx="19.5" cy="11" rx="3.1" ry="3.1"></ellipse> <ellipse class="i1_rect4" fill="#0382FF" cx="8.3" cy="10.5" rx="3.1" ry="3.1"></ellipse> <path class="i1_rect6" d="M28.2 4.4a3 3 0 1 0 6.1 0 3 3 0 0 0-6.1 0z" fill="#0382FF"></path> <ellipse class="i1_rect5" fill="#0382FF" cx="20.9" cy="10.7" rx="3.1" ry="3.1"></ellipse> <ellipse class="i1_rect6" fill="#0382FF" cx="44.4" cy="10.5" rx="3.1" ry="3.1"></ellipse> <ellipse class="i1_rect1" fill="#0382FF" cx="32.7" cy="12.9" rx="3.1" ry="3.1"></ellipse> <ellipse class="i1_rect3" fill="#0382FF" cx="11.3" cy="18.4" rx="3.1" ry="3.1"></ellipse> <ellipse class="i1_rect4" fill="#0382FF" cx="42.1" cy="25.2" rx="3.1" ry="3.1"></ellipse> <path class="i1_rect1" fill="#3A55CA" d="M44.2 25l-7.7-7.6 7.7-7.7 7.7 7.7z"></path> <path class="i1_rect2" fill="#3A55CA" d="M20.9 18.9l-7.7-7.7 7.7-7.7 7.7 7.7z"></path> <path class="i1_rect3" fill="#3A55CA" d="M8.3 25.8L.6 18.1l7.7-7.7 7.7 7.7z"></path> <path class="i1_rect4" fill="#3A55CA" d="M29.6 30.3L22 22.6l7.7-7.7 7.7 7.7z"></path> </g> <path d="M71 253c.5 5.1-2.7 10.3-9.5 14.2a51.5 51.5 0 0 1-46.6 0c-6.8-3.9-10-9-9.6-14.2V20.2C4.9 15 8 9.9 14.9 6a51.5 51.5 0 0 1 46.6 0c6.8 3.9 10 9 9.6 14.2V253z" fill="url(#W)" transform="translate(797.7 107.4)"></path> </g> <g> <path d="M20.1 2.7L155 80.5c10.5 6 19.2 21 19.2 33.2v16.2c0 12.1-8.7 17.1-19.2 11L54.6 83l6 31.7L26 66.5 20 63.1C9.6 57.1 1 42.1 1 30V13.7C1 1.5 9.6-3.4 20 2.7z" fill="url(#X)" transform="translate(1208 308.2)"></path> <path d="M2.6 7.6l131.1 75.7c1.4.7 2.5-.1 2.5-2 0-1.7-1.1-3.9-2.5-4.6L2.7 1C1.2.2.1 1 .1 2.9c0 1.8 1 3.9 2.4 4.7z" fill="url(#Y)" transform="translate(1227.3 329.7)"></path> <path d="M69.8 63.4l64.2 37c1.2.8 2.2 0 2.2-1.6V98c0-1.6-1-3.4-2.2-4.1l-64.2-37c-1.1-.8-2.1 0-2.1 1.5v.9c0 1.6 1 3.4 2.1 4.1z" fill="url(#Z)" transform="translate(1227.3 329.7)"></path> </g> <g> <g transform="translate(1135 288.9)"> <path d="M16.5 107.3c0 .5-.3.9-1 1.3-.1.1 0-2.6-.6-2.2-.2.2-9 7-14 5.8-.6-.1-.7-.7-.8-1V110c0-1.2 1.9-3.2 4.7-6 3.1-3 5.1-4.9 9.8-2.2 1.3.8 1.9 1.4 1.9 1.9v3.6z" fill="#000"></path> <path d="M4.8 104c-3.8 3.8-5.9 6-4 7 2 1.2 6-.5 9.9-3.5 3.5-2.7 8.6-3 4-5.7-4.8-2.7-6.8-.8-10 2.3z" fill="#484968"></path> <path d="M8.6 102l.2-29.1c0-1.4.9-2.7 2.2-3.2l2.3-.8 9.5 6.3-4.6 2.4s.8 8-1.5 15.6c0 0-1.6 3.2-1.2 10.9 0 0-5.1 1.6-7-2.1z" fill="#F1AC85"></path> <path d="M30.5 114.2c0 .5-.3 1-1 1.4-.2 0 0-2.7-.6-2.2-.2.1-9 7-14 5.8-.6-.2-.8-.7-.8-1.1V117c0-1.3 1.8-3.2 4.7-6 3-3 5-5 9.8-2.2 1.3.7 1.8 1.3 1.8 1.8v3.6z" fill="#000"></path> <path d="M18.8 111c-3.8 3.7-5.9 5.9-4 7 2 1.1 5.9-.6 9.9-3.6 3.4-2.6 8.5-3 3.9-5.6-4.7-2.7-6.7-.8-9.8 2.2z" fill="#484968"></path> <path d="M22.6 109.3l.2-34 11.3 3.6-2 5.5s1 7.4-1.4 15c0 0-1.6 3.2-1.3 10.8 0 0-4 2.4-6.8-1z" fill="#F1AC85"></path> <path d="M32.6 40.6S20.1 29.2 27.7 8.9l6 21-1 10.7z" fill="#943BBB"></path> <path d="M17.8 68.4c2 .5 4-.6 4.6-2.5l10-34.3a3.7 3.7 0 0 0-7-2L15.2 63.7c-.6 2 .5 4 2.5 4.6z" fill="#F1AC85"></path> <path d="M28 59.2L11 69.7s6-1.4 21.2 14.7l16.7-9.7L28 59.2z" fill="#8800BF"></path> <path d="M46.7 76.2a1 1 0 0 1-.5.2c-2.4.2-11.3-1.8-20.2-11.8-.7-.8-1.2-2-1.2-2.8V33.4c0-2.2.8-3.7 2-4.4l6.7-3.9c1.2-.7 2.9-.6 4.7.5l9.1 5.2C51 33 54 38.2 54 42.4V71c0 .6-.2 1.1-.6 1.3l-6.7 4z" fill="#FFFFEB"></path> <path d="M45.7 32.6c0 .7-.4 1.4-1.4 2-1.8 1-4.8 1-6.6 0-1-.6-1.4-1.3-1.4-2v-6.2c0-.7.4-1.4 1.4-2 1.8-1 4.8-1 6.6 0 1 .6 1.4 1.3 1.4 2v6.2z" fill="#DD936F"></path> <ellipse fill="#F1AC85" cx="41" cy="16.5" rx="13" ry="13"></ellipse> <path d="M37.2 40.6s9.6-10.7 2.9-30.3l-12 4.1S24 4.2 37.5 1.2c0 0 9.1-2 12.2 5.5 0 0 7.3.6 4.6 15.6 0 0-.4 14.1-17.1 18.3z" fill="#943BBB"></path> </g> <path fill="#BDCEFA" d="M1140.5 357l24.5 14.1 18.7-10.2-25-14.3z"></path> <path fill="url(#aa)" d="M4.5 25.2L.7.7l27.1 15.7L29 39.3z" transform="translate(1136 331.9)"></path> <path d="M1160.1 358.1a3.7 3.7 0 0 0 5.2-.4l23-27a3.7 3.7 0 0 0-5.6-4.8l-23 27a3.7 3.7 0 0 0 .4 5.2z" fill="#F1AC85"></path> </g> <g> <path d="M902 611s2 13.3 3.7 20.6c0 0 .4 12.1.7 16.3l1.4 13.2s1.2 1 2.6.4l2.1-30c.4-4.3 1.6-23 1.6-23s-4-3.7-12.2 2.6zM915 605.9s2 13.2 3.8 20.5c0 0 .3 12.1.7 16.3.3 4.2 1.3 13.2 1.3 13.2s1.3 1 2.7.4l2-30.1c.4-4.2.6-22.8.6-22.8s-3-3.8-11.2 2.5z" fill="#F5B697"></path> <path d="M904.5 593.2s-4.9 5.4-2 23.7c.1 2.6 1.8 9.3 1.8 9.3s6.5 1 14.1-2c7.7-2.9 7.8-4.4 7.8-4.4s.4-22.9-1.4-28.8c-1.7-6-20.3 2.2-20.3 2.2z" fill="#113C7A"></path> <path d="M923.5 655s-.1 1.3 1.3 2.4c1.3 1 4 3 4.4 4 0 1-3.3 0-4.8-.8s-2.9-2.6-2.9-2.6l.1.8s-.5 0-1-.5c-.4-.4.2-3 .2-3l2.7-.3zM910.5 661s-.2 1.3 1.2 2.4c1.4 1 4 3 4.5 4 0 1-3.3 0-4.8-.8s-2.9-2.6-2.9-2.6l.1.8s-.5 0-1-.5c-.4-.4.1-3 .1-3l2.8-.3z" fill="#5167B0"></path> <path d="M45 28.2s4.5.7 7.4 10.5c1.8 6.5 4.3 7 7.2 7.6 3 .6 15.3 0 16.3 0s2.1 2.2.7 3.8c-1.3 1.5-18.3 3-21.6 3-3.4 0-11-6.2-14.1-11.2-3.1-5.1 0-14.1 4-13.7z" fill="url(#ab)" transform="translate(878.3 530.5)"></path> <path d="M921.1 534.3s4.5 5.8 3.5 12.2c-1 6.5-6.6 6.2-7.6 9.7-1 3.5 2.7 8.6-2.3 11.9-5.1 3.3-7.5 2.5-8.8 9.6-1.4 7-6.3 10.7-14.7 11.5-8.4.8-14.2-9.4-12-16.8 2-7.4 9.5-5 11-11.1 1.6-6.1 1-10.9 6.3-13.2 5.3-2.4 3.3-11.3 8.6-14 5.4-2.8 12.1-4.3 16 .2z" fill="#113C7A"></path> <path d="M11.8 23s-9.6 7-10.6 9.2c-1 2.3-2.3 9.4.8 13 5.5 6 2.2 16.4 3 19.5.6 3 8 3.5 13.1 2.5s9.9-3.6 9.7-9.6c-.2-6 1.4-14.2 1.7-16.8.3-2.7 0-9.5-1.3-14-.3-1-3.5-2-3.5-2s-3.4-2.2-12.9-1.8z" fill="url(#ac)" transform="translate(897.6 533.8)"></path> <path d="M917.8 555.5v.3c.1.7.5 2.5.5 3.2.1.8-.7 2-2.7 2s-5.3-.9-6.4-3.2c.1-.4 0-4.7-.3-6.9l9 4.6z" fill="#FF7C40"></path> <path d="M923.2 542.4c-1-5.6-5.4-8.7-10.5-7.6 0 0-5.4.6-7.8 5.4-2.4 4.7 1.1 8.8 3.4 11.3l2.1 2.3.5.6c1.6 1.6 3.4 2.5 4.7 2.9 2.2.6 4.8.3 6.2-1.2 1.4-1.5 2.5-8 1.4-13.7z" fill="#FF9D6F"></path> <path d="M924.1 546.2s-4 .4-6.3-2.3c-2.4-2.8-5.7 0-8.4-2.4 0 0 1.2 3 0 5.9-1.2 3-1.6 7.4-1.6 7.4l-5-8v-7l6.4-6 8.6-.5 4 4s2.7 6 2.3 9z" fill="#113C7A"></path> <path d="M23.6 49.8l12.1 3.8L47 50.5C47 51 44 60 37.4 61.8c-4.7 1.2-10.2-3-13-5.4 0-1.7-.4-3.3-1.1-5l.3-1.6z" fill="url(#ad)" opacity=".4" transform="translate(878.3 530.5)"></path> <g> <path d="M4.8.8S-1.7-.8 1 8C3.8 16.8 13 23.2 16.3 22.8A56.2 56.2 0 0 0 33.1 6.4c0-1.7-1.6-2.9-3.1-2.5-1.6.4-12 11.5-13 11.1-.9-.4-7-10.5-12.2-14.2z" fill="url(#ae)" transform="translate(897.6 568.1)"></path> <path d="M928.9 575.2s-1.9-.5-1.3-2.5c.5-2 4-3.4 4.6-3.5.5-.1 5.8 1 6 1.6.2.6-1 1-2.2.6-1.3-.3-3.3-.4-3.3-.4s1.4 1.5 1.3 2.2a4 4 0 0 1-2 2.4c-1 .6-2.3-.6-2.3-.6l-.8.2z" fill="#FF9D6F"></path> </g> <path d="M952.5 577.2s4.3-3.7 4.5-3c.2.6-1.5 2.4-1.5 2.4s5.7-2.1 5.8-1.4c0 .7-3 3-3.8 3.6a21 21 0 0 1-3.7 1.3s-1.6-2-1.3-3z" fill="#FF9D6F"></path> <g class="i1__display" opacity=".6" fill="#7EF4ED"> <path d="M933.2 544.8a5.6 5.6 0 0 0-2.6 4.4l.2 59.9c0 3.8 2.7 5.4 6 3.5l35.7-20.6a5.6 5.6 0 0 0 2.5-4.4l-.1-60c0-3.7-2.8-5.3-6-3.4l-35.7 20.6z"></path> </g> <g fill="#FFF"> <path d="M938.6 566.5c-.4.3-.7.8-.7 1.3v3.2c0 .5.3.7.8.4l29-16.8c.5-.2.8-.8.8-1.3v-3.2c0-.4-.4-.6-.8-.4l-29 16.8zM938.7 573.4c-.5.3-.8.9-.8 1.3v3.2c0 .5.4.7.8.4l29-16.7c.5-.3.8-.9.8-1.3V557c0-.5-.3-.7-.8-.5l-29 16.8zM950 578.6a4 4 0 0 0-1.8 3v.8c0 1.2.8 1.6 1.8 1l9.4-5.4a4 4 0 0 0 1.8-3v-.8c0-1.2-.8-1.6-1.8-1l-9.4 5.4z"></path> </g> </g> <g transform="translate(984 182)"> <g transform="translate(33.5 126.4)"> <mask id="ag" fill="#fff"> <use xlink:href="#af"></use> </mask> <path d="M5.4 0l4.3 3.2s13.9-1 8.5 6.4H0V1.1L5.4 0z" fill="#090062" mask="url(#ag)"></path> </g> <path d="M12.3 39.3s-2.3 9.9 0 11.3l7.1-4.2-4.7-9-2.4 2z" fill="#F6B9AD"></path> <path d="M38.5 126.3l-6.2-26-6.3 8.4s5.2 16.6 8.4 18.6l4.1-1z" fill="#B98B82"></path> <path class="i1__hand2" d="M42.7 37.2s-4.2-6.2-8.3 0c0 0 1 4.1 0 6.2l-4.2 9.3h-9.4V58L32.3 61l7.3-17.6v-4.1l3.1-2.1z" fill="#F6B9AD"></path> <path fill="#5989A1" d="M28 49.6L26 61l-8.4-2v-9.4z"></path> <ellipse fill="#F6B9AD" cx="11.3" cy="33.1" rx="9.4" ry="9.3"></ellipse> <path d="M9.2 32l8.4-10.3s-5.3-1.5-10.4.5c-9.4 3.5-9.4 17 0 20.5 1.3.6 2.7.8 4.1.7v-6.2H8.2l1-5.2z" fill="#3D213C"></path> <path class="i1__hand" d="M32.3 10.3l-1 18.6-8.5 10.4-5.2-3.1L25 24.8 28.1 7S26.3 2.7 35.3.4a1.8 1.8 0 0 1 2.2 1.8c-.1 2.6-1 6.7-5.2 8z" fill="#F6B9AD"></path> <path class="i1__hand" d="M23.9 92.1l1 8.3s-9.4 7.2-9.4 17.6l-1 2 3.1 3.2 16.7-19.7s0-11.4-3-14.5L23.8 92z" fill="#F6B9AD"></path> <path d="M18.6 122v5.3s8.4 1 6.3 6.2h-8.3l-8.4-10.3 6.3-5.2 4.1 4z" fill="#090062"></path> <path d="M34.4 91s-9.5 7.3-13.6 5.3l-3.2-14.5s-4.2 0-6.3-5.2v-6.3l20 6.3s0 11.4 3 14.5z" fill="#383E7F"></path> <path d="M26 39.3L17.6 33s-4.2 12.5-6.3 12.5c-2 0-2 11.4 1 13.4l-1 11.4 20 6.3s-3.2-20.8-9.5-28l4.2-9.3z" fill="#34ABE6"></path> </g> </g> </g> </svg>
コード自体はこんな感じだった
RUYA
実装方法
three.jsを使って実装している
Chronicled
実装方法
一枚の画像を配置しているのみ ソースコード見る感じいろいろなサイズの画像使ってそう。
丸の内15丁目プロジェクト
実装方法
CreateJSで何かやってそう。
ウクライナの自動車保険のサイト
実装方法
svgを使って実装してた（コードについては省略）
所感
基本的に見せたいだけなら画像 or 映像だったので、実装自体はすごく楽そう。 ものによってはsvgアニメーションとかもあったので、svgとか理解すればいい感じに入れることができるかも。。 指定の場所クリック・ホバーまでだとjsのライブラリを使う感じだったので、学習コストがすごく高そう。
