GSAP 小鸟立枝头绘制动画

低多边形艺术动画，小鸟、树枝、浮云。

gsap, bird

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1629
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    box-sizing: border-box;
}
*,
*::after,
*::before {
    box-sizing: inherit;
}
@-webkit-keyframes bounce {
    0% {
        top: 5%;
    }
    50% {
        top: 0%;
    }
    100% {
        top: 5%;
    }
}
@-moz-keyframes bounce {
    0% {
        top: 5%;
    }
    50% {
        top: 0%;
    }
    100% {
        top: 5%;
    }
}
@keyframes bounce {
    0% {
        top: 5%;
    }
    50% {
        top: 0%;
    }
    100% {
        top: 5%;
    }
}
html {
    font-family: Montserrat;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #a5d2ff;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
svg {
    position: fixed;
    top: 50%;
    left: -5%;
    -webkit-transition: 0.2;
    -moz-transition: 0.2;
    transition: 0.2;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}
@media(max-height: 750px) {
    svg {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        left: -12%;
    }
}
svg#cloud {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    top: 5%;
    left: 0%;
    -webkit-animation: bounce 4s infinite linear;
    -moz-animation: bounce 4s infinite linear;
    animation: bounce 4s infinite linear;
}

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg width="616px" height="272px" viewBox="0 0 616 272" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:sketch="https://www.bohemiancoding.com/sketch/ns">
    
    <title>robin</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="0.0524752475%" y1="50.0022928%" x2="100.026238%" y2="50.0022928%" id="linearGradient-1">
            <stop stop-color="#514233" offset="0%"></stop>
            <stop stop-color="#504132" offset="1.316416%"></stop>
            <stop stop-color="#322F22" offset="41.1%"></stop>
            <stop stop-color="#202419" offset="75.37%"></stop>
            <stop stop-color="#1A2015" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="-0.004375%" y1="49.9327122%" x2="99.9308333%" y2="49.9327122%" id="linearGradient-2">
            <stop stop-color="#705E46" offset="0%"></stop>
            <stop stop-color="#6C5C44" offset="4.467952%"></stop>
            <stop stop-color="#5D513E" offset="29.55%"></stop>
            <stop stop-color="#544B3A" offset="58.53%"></stop>
            <stop stop-color="#514939" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="-0.0553497942%" y1="49.9854945%" x2="99.9679012%" y2="49.9854945%" id="linearGradient-3">
            <stop stop-color="#705E46" offset="0%"></stop>
            <stop stop-color="#6C5C44" offset="4.467952%"></stop>
            <stop stop-color="#5D513E" offset="29.55%"></stop>
            <stop stop-color="#544B3A" offset="58.53%"></stop>
            <stop stop-color="#514939" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="8.72735346%" y1="99.1466667%" x2="145.936412%" y2="-75.2862222%" id="linearGradient-4">
            <stop stop-color="#514233" offset="0%"></stop>
            <stop stop-color="#504132" offset="1.316416%"></stop>
            <stop stop-color="#322F22" offset="41.1%"></stop>
            <stop stop-color="#202419" offset="75.37%"></stop>
            <stop stop-color="#1A2015" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="33.4189493%" y1="11.3384365%" x2="102.232083%" y2="116.350814%" id="linearGradient-5">
            <stop stop-color="#706568" offset="0%"></stop>
            <stop stop-color="#A19A94" offset="38.66%"></stop>
            <stop stop-color="#A7A09B" offset="76.52%"></stop>
            <stop stop-color="#AEA7A2" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="51.2282723%" y1="100.374615%" x2="45.4709424%" y2="21.4269231%" id="linearGradient-6">
            <stop stop-color="#705E46" offset="0%"></stop>
            <stop stop-color="#6C5C44" offset="4.467952%"></stop>
            <stop stop-color="#5D513E" offset="29.55%"></stop>
            <stop stop-color="#544B3A" offset="58.53%"></stop>
            <stop stop-color="#514939" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50.3222513%" y1="143.892784%" x2="49.710733%" y2="-63.228866%" id="linearGradient-7">
            <stop stop-color="#514233" offset="0%"></stop>
            <stop stop-color="#504132" offset="1.316416%"></stop>
            <stop stop-color="#322F22" offset="41.1%"></stop>
            <stop stop-color="#202419" offset="75.37%"></stop>
            <stop stop-color="#1A2015" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="103.763039%" y1="84.1377637%" x2="1.00045351%" y2="48.6875527%" id="linearGradient-8">
            <stop stop-color="#F0EEED" offset="0%"></stop>
            <stop stop-color="#DBD9D7" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="2.02057762%" y1="42.7306306%" x2="128.526715%" y2="53.2538288%" id="linearGradient-9">
            <stop stop-color="#D4D2D0" offset="0%"></stop>
            <stop stop-color="#EDEBE9" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="49.9501502%" y1="-3.24901316%" x2="50.7339339%" y2="115.051645%" id="linearGradient-10">
            <stop stop-color="#948A8D" offset="0%"></stop>
            <stop stop-color="#BCB7B2" offset="38.66%"></stop>
            <stop stop-color="#C2BDB9" offset="83.16%"></stop>
            <stop stop-color="#C6C1BD" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="2.23548698%" y1="3.32729592%" x2="97.3038573%" y2="72.4581633%" id="linearGradient-11">
            <stop stop-color="#CBC6C3" offset="0.9251%"></stop>
            <stop stop-color="#D1CECB" offset="69.62%"></stop>
        </linearGradient>
        <linearGradient x1="-6.22913043%" y1="6.33828829%" x2="78.5493913%" y2="122.79482%" id="linearGradient-12">
            <stop stop-color="#D0CCC9" offset="0%"></stop>
            <stop stop-color="#D5D2CF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="49.7442609%" y1="3.1424581%" x2="50.3173043%" y2="108.601955%" id="linearGradient-13">
            <stop stop-color="#A1979A" offset="0%"></stop>
            <stop stop-color="#C5C0BC" offset="38.66%"></stop>
            <stop stop-color="#C7C2BE" offset="49.13%"></stop>
            <stop stop-color="#CEC9C6" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50.290424%" y1="2.78798883%" x2="47.8039474%" y2="107.834916%" id="linearGradient-14">
            <stop stop-color="#C5C0BC" offset="0%"></stop>
            <stop stop-color="#FFFFFF" offset="38.64%"></stop>
            <stop stop-color="#FFFFFF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="96.5119461%" y1="60.7611111%" x2="-42.1267823%" y2="24.1153595%" id="linearGradient-15">
            <stop stop-color="#C7C5C2" offset="0%"></stop>
            <stop stop-color="#E1DFDC" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="-0.0565413534%" y1="50.0093168%" x2="99.9887218%" y2="50.0093168%" id="linearGradient-16">
            <stop stop-color="#DAD7D4" offset="0%"></stop>
            <stop stop-color="#E0DDDB" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="53.2591045%" y1="13.5016393%" x2="35.920597%" y2="206.691803%" id="linearGradient-17">
            <stop stop-color="#D4D2D0" offset="0%"></stop>
            <stop stop-color="#EDEBE9" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="53.2882086%" y1="24.0028698%" x2="-11.6396825%" y2="81.3311258%" id="linearGradient-18">
            <stop stop-color="#634938" offset="0%"></stop>
            <stop stop-color="#543C2D" offset="45.4%"></stop>
            <stop stop-color="#463022" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="30.7261468%" y1="234.687615%" x2="66.4469037%" y2="-28.2174312%" id="linearGradient-19">
            <stop stop-color="#896E54" offset="0%"></stop>
            <stop stop-color="#765C41" offset="54.2%"></stop>
            <stop stop-color="#6B5136" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="15.5740625%" y1="58.4593381%" x2="135.301875%" y2="-9.28723404%" id="linearGradient-20">
            <stop stop-color="#72543E" offset="0%"></stop>
            <stop stop-color="#5E412D" offset="55.36%"></stop>
            <stop stop-color="#533723" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0.0426954733%" y1="50.0442049%" x2="99.9925926%" y2="50.0442049%" id="linearGradient-21">
            <stop stop-color="#4C392A" offset="0%"></stop>
            <stop stop-color="#584434" offset="48.95%"></stop>
            <stop stop-color="#604B3B" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="-0.121212121%" y1="50.0481651%" x2="99.9739394%" y2="50.0481651%" id="linearGradient-22">
            <stop stop-color="#634938" offset="0%"></stop>
            <stop stop-color="#543C2D" offset="45.4%"></stop>
            <stop stop-color="#463022" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50.02625%" y1="73.8931567%" x2="110.62%" y2="-18.4183223%" id="linearGradient-23">
            <stop stop-color="#5B3E2B" offset="0%"></stop>
            <stop stop-color="#533724" offset="34.64%"></stop>
            <stop stop-color="#482E1B" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="68.1332888%" y1="7.93629977%" x2="36.0684492%" y2="125.382201%" id="linearGradient-24">
            <stop stop-color="#6C4E39" offset="0%"></stop>
            <stop stop-color="#644632" offset="40.71%"></stop>
            <stop stop-color="#5C3F2C" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="7.15733945%" y1="56.2682028%" x2="146.111583%" y2="1.00460829%" id="linearGradient-25">
            <stop stop-color="#7E6348" offset="0%"></stop>
            <stop stop-color="#795E43" offset="11.18%"></stop>
            <stop stop-color="#644B31" offset="64.75%"></stop>
            <stop stop-color="#5C442A" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="48.3030702%" y1="60.5210692%" x2="37.6013889%" y2="-82.4883648%" id="linearGradient-26">
            <stop stop-color="#604B3B" offset="0%"></stop>
            <stop stop-color="#5D4838" offset="7.330447%"></stop>
            <stop stop-color="#483526" offset="63.23%"></stop>
            <stop stop-color="#402E20" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="33.8058036%" y1="-7.0804878%" x2="124.033929%" y2="249.658943%" id="linearGradient-27">
            <stop stop-color="#402E20" offset="0%"></stop>
            <stop stop-color="#544131" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="11.071459%" y1="63.7422658%" x2="124.851757%" y2="31.1684096%" id="linearGradient-28">
            <stop stop-color="#7E6348" offset="0%"></stop>
            <stop stop-color="#6A5136" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50.322688%" y1="11.4986607%" x2="12.2990136%" y2="207.568304%" id="linearGradient-29">
            <stop stop-color="#72543E" offset="0%"></stop>
            <stop stop-color="#5E412D" offset="55.36%"></stop>
            <stop stop-color="#533723" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="81.2344538%" y1="197.961538%" x2="26.2665966%" y2="-62.6081731%" id="linearGradient-30">
            <stop stop-color="#5B3D2A" offset="0%"></stop>
            <stop stop-color="#472D1C" offset="55.36%"></stop>
            <stop stop-color="#3C2414" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="2.70215385%" y1="83.4661157%" x2="134.005538%" y2="37.1297521%" id="linearGradient-31">
            <stop stop-color="#A38970" offset="0%"></stop>
            <stop stop-color="#92785D" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="83.8445748%" y1="111.78595%" x2="-5.67331378%" y2="1.09173554%" id="linearGradient-32">
            <stop stop-color="#987C62" offset="0%"></stop>
            <stop stop-color="#866A4F" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="48.9064252%" y1="78.5949029%" x2="52.4194122%" y2="-12.1291262%" id="linearGradient-33">
            <stop stop-color="#4A3728" offset="0%"></stop>
            <stop stop-color="#412F21" offset="42.56%"></stop>
            <stop stop-color="#3B291C" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="4.94520359%" y1="43.6309278%" x2="152.626639%" y2="64.5037801%" id="linearGradient-34">
            <stop stop-color="#4E3722" offset="0%"></stop>
            <stop stop-color="#432D19" offset="47.08%"></stop>
            <stop stop-color="#3B2613" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="87.8925117%" y1="-23.94%" x2="-43.5539782%" y2="307.751351%" id="linearGradient-35">
            <stop stop-color="#4D3621" offset="0%"></stop>
            <stop stop-color="#3B2613" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50.9779848%" y1="90.3666667%" x2="49.3657005%" y2="22.9316151%" id="linearGradient-36">
            <stop stop-color="#4D3621" offset="0%"></stop>
            <stop stop-color="#3B2613" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="48.9039352%" y1="82.2503546%" x2="55.9340278%" y2="2.72222222%" id="linearGradient-37">
            <stop stop-color="#E2653E" offset="0%"></stop>
            <stop stop-color="#DE5631" offset="55.28%"></stop>
            <stop stop-color="#DC502C" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="99.0849138%" y1="49.6681435%" x2="-12.3521552%" y2="58.2109705%" id="linearGradient-38">
            <stop stop-color="#E77C53" offset="0%"></stop>
            <stop stop-color="#E05E37" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="53.7851293%" y1="77.6402707%" x2="4.44375%" y2="-7.34670051%" id="linearGradient-39">
            <stop stop-color="#E0613A" offset="0%"></stop>
            <stop stop-color="#E0613A" offset="1.254731%"></stop>
            <stop stop-color="#DA4D2A" offset="59.82%"></stop>
            <stop stop-color="#D84625" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="102.426573%" y1="52.6835871%" x2="-9.47972028%" y2="15.5267343%" id="linearGradient-40">
            <stop stop-color="#C55331" offset="1.25%"></stop>
            <stop stop-color="#C34A2B" offset="49.63%"></stop>
            <stop stop-color="#C03C20" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0.110638298%" y1="49.9831878%" x2="100.019622%" y2="49.9831878%" id="linearGradient-41">
            <stop stop-color="#CB5E3B" offset="1.25%"></stop>
            <stop stop-color="#C74C2B" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="112.376271%" y1="60.0198142%" x2="12.3974576%" y2="49.1708978%" id="linearGradient-42">
            <stop stop-color="#CB5E3B" offset="1.25%"></stop>
            <stop stop-color="#CB5D3A" offset="4.035718%"></stop>
            <stop stop-color="#C74D2D" offset="58.26%"></stop>
            <stop stop-color="#C64728" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="108.285755%" y1="100.138164%" x2="21.3182336%" y2="14.3666667%" id="linearGradient-43">
            <stop stop-color="#C85735" offset="1.25%"></stop>
            <stop stop-color="#C34426" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="1.39666667%" y1="43.8307692%" x2="123.867273%" y2="91.9913846%" id="linearGradient-44">
            <stop stop-color="#CB5E3B" offset="1.25%"></stop>
            <stop stop-color="#CB5D3A" offset="4.035718%"></stop>
            <stop stop-color="#C74D2D" offset="58.26%"></stop>
            <stop stop-color="#C64728" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="33.0594406%" y1="-28.9845361%" x2="54.2972028%" y2="73.3721649%" id="linearGradient-45">
            <stop stop-color="#B32713" offset="0%"></stop>
            <stop stop-color="#B52D16" offset="42.91%"></stop>
            <stop stop-color="#B93D20" offset="98.65%"></stop>
            <stop stop-color="#B93D20" offset="98.75%"></stop>
        </linearGradient>
        <linearGradient x1="95.045092%" y1="96.703096%" x2="48.7042945%" y2="48.003096%" id="linearGradient-46">
            <stop stop-color="#EB8C63" offset="0%"></stop>
            <stop stop-color="#E9845B" offset="17.56%"></stop>
            <stop stop-color="#E6744C" offset="64.13%"></stop>
            <stop stop-color="#E56E47" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="62.5558442%" y1="79.822956%" x2="46.3748918%" y2="23.9908805%" id="linearGradient-47">
            <stop stop-color="#EA865D" offset="0%"></stop>
            <stop stop-color="#E36941" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0.0196969697%" y1="49.893617%" x2="99.9134199%" y2="49.893617%" id="linearGradient-48">
            <stop stop-color="#EE8F67" offset="0%"></stop>
            <stop stop-color="#E8734D" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="robin" sketch:type="MSLayerGroup">
            <g id="Bird" transform="translate(181.000000, 0.000000)" sketch:type="MSShapeGroup">
                <path d="M210.2,176.5 L149.6,233.2 L187.9,184.9 L210.2,176.5 Z" id="Shape" fill="url(#linearGradient-1)"></path>
                <path d="M139.9,233.2 L149.6,233.2 L187.9,184.9 L139.9,233.2 Z" id="Shape" fill="url(#linearGradient-2)"></path>
                <path d="M156.6,182.4 L110.1,227.6 L120.7,227.9 L117.5,227.3 L158.7,182.7 L156.6,182.4 Z" id="Shape" fill="url(#linearGradient-3)"></path>
                <path d="M158.7,182.7 L173.8,182.9 L118.6,227.7 L117.5,227.3 L158.7,182.7 Z" id="Shape" fill="url(#linearGradient-4)"></path>
                <path d="M215.5,118.8 L145.3,113.4 L105.3,70 L101.2,117.4 L123.1,133.4 L125.2,154.1 L90.1,149.9 L138.7,182.2 L190.6,188.5 L260.3,149.3 L282.1,124.1 L215.5,118.8 L215.5,118.8 Z" id="Shape" fill="#BDC5CF"></path>
                <path d="M286.4,110.1 L300.1,118.4 L339.7,87.7 L286.4,110.1 Z" id="Shape" fill="url(#linearGradient-5)"></path>
                <path d="M0.9,48.9 L39.1,44.5 L25.5,35.9 L0.9,48.9 Z" id="Shape" fill="url(#linearGradient-6)"></path>
                <path d="M0.9,48.9 L33.5,54.2 L39.1,44.5 L0.9,48.9 Z" id="Shape" fill="url(#linearGradient-7)"></path>
                <path d="M123.1,133.4 L101.2,117.4 L105.3,70 L85.7,27.7 L71.7,12.7 L39.2,12.4 L25.5,35.9 L39.1,44.5 L33.5,54.2 L58.9,104.1 L90.1,149.9 L125.2,154.1 L123.1,133.4 Z" id="Shape" fill="#E36941"></path>
                <path d="M101.2,117.4 L145.3,113.4 L105.3,70 L101.2,117.4 Z" id="Shape" fill="url(#linearGradient-8)"></path>
                <path d="M101.2,117.4 L145.3,113.4 L156.6,157.8 L101.2,117.4 Z" id="Shape" fill="url(#linearGradient-9)"></path>
                <path d="M215.5,118.8 L260.3,149.2 L282.1,124 L215.5,118.8 Z" id="Shape" fill="url(#linearGradient-10)"></path>
                <path d="M156.6,157.8 L260.3,149.2 L190.6,188.4 L156.6,157.8 Z" id="Shape" fill="url(#linearGradient-11)"></path>
                <path d="M156.6,157.8 L260.3,149.2 L145.3,113.4 L156.6,157.8 Z" id="Shape" fill="url(#linearGradient-12)"></path>
                <path d="M215.5,118.8 L260.3,149.2 L145.3,113.4 L215.5,118.8 Z" id="Shape" fill="url(#linearGradient-13)"></path>
                <path d="M215.5,118.8 L145.3,113.4 L260.3,149.2 L282.1,124 L215.5,118.8 Z" id="Shape" fill="url(#linearGradient-14)"></path>
                <path d="M156.6,157.8 L138.7,182.1 L190.6,188.4 L156.6,157.8 Z" id="Shape" fill="url(#linearGradient-15)"></path>
                <path d="M156.6,157.8 L138.7,182.1 L90.1,149.9 L156.6,157.8 Z" id="Shape" fill="url(#linearGradient-16)"></path>
                <path d="M156.6,157.8 L123.1,133.4 L125.2,154.1 L156.6,157.8 Z" id="Shape" fill="url(#linearGradient-17)"></path>
                <path d="M339.7,87.7 L289.5,91.4 L306.2,72.8 L243,84.4 L209.1,64.2 L148.8,30.3 L104.7,5.9 L70.6,0.6 L39.2,12.4 L71.7,12.7 L85.7,27.7 L105.3,70 L145.3,113.4 L282.1,124 L335.5,138.8 L286.4,110.1 L339.7,87.7 Z" id="Shape" fill="#605041"></path>
                <path d="M148.8,30.3 L117.7,51.2 L104.7,5.9 L148.8,30.3 Z" id="Shape" fill="url(#linearGradient-18)"></path>
                <path d="M192.5,73 L117.7,51.2 L105.3,70 L192.5,73 Z" id="Shape" fill="url(#linearGradient-19)"></path>
                <path d="M85.7,27.7 L117.7,51.2 L105.3,70 L85.7,27.7 Z" id="Shape" fill="url(#linearGradient-20)"></path>
                <path d="M286.4,110.1 L192.5,73 L189.2,97.6 L286.4,110.1 Z" id="Shape" fill="url(#linearGradient-21)"></path>
                <path d="M85.7,27.7 L71.7,12.7 L104.7,5.9 L85.7,27.7 Z" id="Shape" fill="url(#linearGradient-22)"></path>
                <path d="M85.7,27.7 L117.7,51.2 L104.7,5.9 L85.7,27.7 Z" id="Shape" fill="url(#linearGradient-23)"></path>
                <path d="M192.5,73 L117.7,51.2 L148.8,30.3 L192.5,73 Z" id="Shape" fill="url(#linearGradient-24)"></path>
                <path d="M192.5,73 L145.3,113.4 L105.3,70 L192.5,73 Z" id="Shape" fill="url(#linearGradient-25)"></path>
                <path d="M170.1,92.2 L145.3,113.4 L282.1,124 L170.1,92.2 Z" id="Shape" fill="url(#linearGradient-26)"></path>
                <path d="M170.1,92.2 L192.5,73 L189.2,97.6 L170.1,92.2 Z" id="Shape" fill="url(#linearGradient-27)"></path>
                <path d="M286.4,110.1 L192.5,73 L209.1,64.2 L286.4,110.1 Z" id="Shape" fill="url(#linearGradient-28)"></path>
                <path d="M258.6,93.6 L286.4,110.1 L339.7,87.7 L258.6,93.6 Z" id="Shape" fill="url(#linearGradient-29)"></path>
                <path d="M258.6,93.6 L306.2,72.8 L289.5,91.4 L258.6,93.6 Z" id="Shape" fill="url(#linearGradient-30)"></path>
                <path d="M258.6,93.6 L306.2,72.8 L243,84.4 L258.6,93.6 L258.6,93.6 Z" id="Shape" fill="#6C4E39"></path>
                <path d="M148.8,30.3 L192.5,73 L209.1,64.2 L148.8,30.3 Z" id="Shape" fill="#73593E"></path>
                <path d="M39.2,12.4 L70.6,0.6 L71.7,12.7 L39.2,12.4 Z" id="Shape" fill="url(#linearGradient-31)"></path>
                <path d="M104.7,5.9 L70.6,0.6 L71.7,12.7 L104.7,5.9 Z" id="Shape" fill="url(#linearGradient-32)"></path>
                <path d="M335.5,138.8 L286.4,110.1 L189.2,97.6 L282.1,124 L335.5,138.8 Z" id="Shape" fill="url(#linearGradient-33)"></path>
                <path d="M412,54.3 L306.2,72.8 L289.5,91.4 L410.1,83.8 L434.4,62.3 L412,54.3 Z" id="Shape" fill="#533F30"></path>
                <path d="M434.4,62.3 L306.2,72.8 L289.5,91.4 L434.4,62.3 Z" id="Shape" fill="url(#linearGradient-34)"></path>
                <path d="M434.4,62.3 L306.2,72.8 L412,54.3 L434.4,62.3 Z" id="Shape" fill="url(#linearGradient-35)"></path>
                <path d="M434.4,62.3 L410.1,83.8 L289.5,91.4 L434.4,62.3 Z" id="Shape" fill="url(#linearGradient-36)"></path>
                <path d="M85.7,27.7 L62.1,45 L105.3,70 L85.7,27.7 Z" id="Shape" fill="url(#linearGradient-37)"></path>
                <path d="M101.2,117.4 L58.9,104.1 L105.3,70 L101.2,117.4 Z" id="Shape" fill="url(#linearGradient-38)"></path>
                <path d="M62.1,45 L58.9,104.1 L105.3,70 L62.1,45 Z" id="Shape" fill="url(#linearGradient-39)"></path>
                <path d="M33.5,54.2 L58.9,104.1 L62.1,45 L33.5,54.2 Z" id="Shape" fill="url(#linearGradient-40)"></path>
                <path d="M101.2,117.4 L58.9,104.1 L90.1,149.9 L101.2,117.4 Z" id="Shape" fill="url(#linearGradient-41)"></path>
                <path d="M85.7,27.7 L71.7,12.7 L62.1,45 L85.7,27.7 Z" id="Shape" fill="url(#linearGradient-42)"></path>
                <path d="M90.1,149.9 L123.1,133.4 L125.2,154.1 L90.1,149.9 Z" id="Shape" fill="url(#linearGradient-43)"></path>
                <path d="M90.1,149.9 L123.1,133.4 L101.2,117.4 L90.1,149.9 Z" id="Shape" fill="url(#linearGradient-44)"></path>
                <path d="M62.1,45 L33.5,54.2 L39.1,44.5 L62.1,45 Z" id="Shape" fill="url(#linearGradient-45)"></path>
                <path d="M62.1,45 L71.7,12.7 L39.1,44.5 L62.1,45 Z" id="Shape" fill="url(#linearGradient-46)"></path>
                <path d="M25.5,35.9 L71.7,12.7 L39.1,44.5 L25.5,35.9 Z" id="Shape" fill="url(#linearGradient-47)"></path>
                <path d="M25.5,35.9 L71.7,12.7 L39.2,12.4 L25.5,35.9 Z" id="Shape" fill="url(#linearGradient-48)"></path>
            </g>
            <g id="Wood" transform="translate(0.000000, 92.000000)" sketch:type="MSShapeGroup">
                <path d="M0.8,47.3 L46.5,20.5 L0.8,0.3 L0.8,47.3 Z" id="Shape" fill="#908683"></path>
                <path d="M0.8,47.3 L46.5,20.5 L39.7,41.7 L0.8,47.3 Z" id="Shape" fill="#827E80"></path>
                <path d="M0.8,47.3 L55,58.8 L39.7,41.7 L0.8,47.3 Z" id="Shape" fill="#464343"></path>
                <path d="M46.5,20.5 L55,58.8 L39.7,41.7 L46.5,20.5 Z" id="Shape" fill="#797374"></path>
                <path d="M65.7,78.1 L29,53.3 L55,58.8 L65.7,78.1 Z" id="Shape" fill="#383739"></path>
                <path d="M65.7,78.1 L93.7,86.6 L55,58.8 L65.7,78.1 Z" id="Shape" fill="#636263"></path>
                <path d="M78,46.6 L93.7,86.6 L55,58.8 L78,46.6 Z" id="Shape" fill="#7D7B7C"></path>
                <path d="M78,46.6 L93.7,86.6 L120.5,77.7 L78,46.6 Z" id="Shape" fill="#8D8280"></path>
                <path d="M105.6,66.7 L138.6,62.4 L120.5,77.7 L105.6,66.7 Z" id="Shape" fill="#786C67"></path>
                <path d="M162,81.4 L138.6,62.4 L120.5,77.7 L162,81.4 Z" id="Shape" fill="#796355"></path>
                <path d="M148.5,70.5 L178.5,73.5 L162,81.4 L148.5,70.5 Z" id="Shape" fill="#636263"></path>
                <path d="M148.5,70.5 L178.5,73.5 L171.2,51 L148.5,70.5 Z" id="Shape" fill="#928782"></path>
                <path d="M173.3,57.6 L178.5,73.5 L196,65.1 L173.3,57.6 Z" id="Shape" fill="#928078"></path>
                <path d="M173.3,57.6 L195.4,57.1 L196,65.1 L173.3,57.6 Z" id="Shape" fill="#A88D7A"></path>
                <path d="M210.1,71.6 L195.4,57.1 L196,65.1 L210.1,71.6 Z" id="Shape" fill="#877D7A"></path>
                <path d="M210.1,71.6 L195.4,57.1 L223,54.8 L210.1,71.6 Z" id="Shape" fill="#988277"></path>
                <path d="M235,64.5 L223,54.8 L233,77.2 L235,64.5 Z" id="Shape" fill="#918079"></path>
                <path d="M210.1,71.6 L178.5,73.5 L196,65.1 L210.1,71.6 Z" id="Shape" fill="#4B3D37"></path>
                <path d="M138.6,62.4 L162.2,58.9 L148.5,70.5 L138.6,62.4 Z" id="Shape" fill="#998881"></path>
                <path d="M162,81.4 L127.3,87.7 L120.5,77.7 L162,81.4 Z" id="Shape" fill="#5E544E"></path>
                <path d="M120.5,77.7 L93.7,86.6 L110.5,104.8 L120.5,77.7 Z" id="Shape" fill="#7B7575"></path>
                <path d="M115.7,90.8 L110.5,104.8 L125.2,117.9 L115.7,90.8 Z" id="Shape" fill="#404244"></path>
                <path d="M115.7,90.8 L154.9,104.9 L125.2,117.9 L115.7,90.8 Z" id="Shape" fill="#746D6D"></path>
                <path d="M137.2,138.9 L154.9,104.9 L125.2,117.9 L137.2,138.9 Z" id="Shape" fill="#958C8C"></path>
                <path d="M149,116.3 L143.8,126.3 L158.7,138.3 L149,116.3 Z" id="Shape" fill="#5E544E"></path>
                <path d="M149,116.3 L189.5,115.8 L158.7,138.3 L149,116.3 Z" id="Shape" fill="#877D7A"></path>
                <path d="M174.8,126.6 L158.7,138.3 L184.2,141.4 L174.8,126.6 Z" id="Shape" fill="#757171"></path>
                <path d="M174.8,126.6 L209.4,131.1 L184.2,141.4 L174.8,126.6 Z" id="Shape" fill="#877D7A"></path>
                <path d="M214.1,144.5 L209.4,131.1 L184.2,141.4 L214.1,144.5 Z" id="Shape" fill="#786C67"></path>
                <path d="M214.1,144.5 L209.4,131.1 L236.2,144.2 L214.1,144.5 Z" id="Shape" fill="#81746C"></path>
                <path d="M245.3,127.4 L209.4,131.1 L236.2,144.2 L245.3,127.4 Z" id="Shape" fill="#918079"></path>
                <path d="M245.3,127.4 L260.2,152 L236.2,144.2 L245.3,127.4 Z" id="Shape" fill="#8A7A73"></path>
                <path d="M245.3,127.4 L260.2,152 L260.9,132.1 L245.3,127.4 Z" id="Shape" fill="#B2A198"></path>
                <path d="M260.9,132.1 L260.6,139.8 L277.3,133.3 L260.9,132.1 Z" id="Shape" fill="#A88D7A"></path>
                <path d="M271.2,153.1 L260.6,139.8 L277.3,133.3 L271.2,153.1 Z" id="Shape" fill="#988277"></path>
                <path d="M271.2,153.1 L292.6,146.7 L277.3,133.3 L271.2,153.1 Z" id="Shape" fill="#9F877C"></path>
                <path d="M271.2,153.1 L292.6,146.7 L294.5,157.1 L271.2,153.1 Z" id="Shape" fill="#786C67"></path>
                <path d="M315.8,139.8 L292.6,146.7 L277.3,133.3 L315.8,139.8 Z" id="Shape" fill="#B09D93"></path>
                <path d="M315.8,139.8 L304.7,153.4 L317,160.1 L315.8,139.8 Z" id="Shape" fill="#988277"></path>
                <path d="M292.6,146.7 L304.7,153.4 L315.8,139.8 L292.6,146.7 Z" id="Shape" fill="#AA968B"></path>
                <path d="M315.8,139.8 L316.4,150.4 L345,144.3 L315.8,139.8 Z" id="Shape" fill="#A88D7A"></path>
                <path d="M333.8,162.3 L316.4,150.4 L345,144.3 L333.8,162.3 Z" id="Shape" fill="#AB9C99"></path>
                <path d="M333.8,162.3 L350.9,152.3 L345,144.3 L333.8,162.3 Z" id="Shape" fill="#80716A"></path>
                <path d="M378.3,147.6 L350.9,152.3 L345,144.3 L378.3,147.6 Z" id="Shape" fill="#ACA7A1"></path>
                <path d="M378.3,147.6 L350.9,152.3 L352.1,164.7 L378.3,147.6 Z" id="Shape" fill="#B2A198"></path>
                <path d="M379.5,160.8 L363.1,157.5 L378.3,147.6 L379.5,160.8 Z" id="Shape" fill="#967864"></path>
                <path d="M367.7,167.2 L352.1,164.7 L363.1,157.5 L367.7,167.2 Z" id="Shape" fill="#776966"></path>
                <path d="M367.7,167.2 L379.5,160.8 L363.1,157.5 L367.7,167.2 Z" id="Shape" fill="#928078"></path>
                <path d="M367.7,167.2 L379.5,160.8 L393.5,170.5 L367.7,167.2 Z" id="Shape" fill="#80716A"></path>
                <path d="M406.6,148.7 L379.5,160.8 L393.5,170.5 L406.6,148.7 Z" id="Shape" fill="#998881"></path>
                <path d="M406.6,148.7 L393.5,170.5 L412.8,166 L406.6,148.7 Z" id="Shape" fill="#80716A"></path>
                <path d="M406.6,148.7 L412.8,166 L438.2,160.1 L406.6,148.7 Z" id="Shape" fill="#9F8A80"></path>
                <path d="M427,180 L412.8,166 L438.2,160.1 L427,180 Z" id="Shape" fill="#988277"></path>
                <path d="M427,180 L412.8,166 L393.5,170 L427,180 Z" id="Shape" fill="#786C67"></path>
                <path d="M406.6,148.7 L428.2,147.1 L438.2,160.1 L406.6,148.7 Z" id="Shape" fill="#A69288"></path>
                <path d="M406.6,148.7 L379.5,160.8 L378.3,147.6 L406.6,148.7 Z" id="Shape" fill="#A88D7A"></path>
                <path d="M333.8,162.3 L350.9,152.3 L352.1,164.7 L333.8,162.3 Z" id="Shape" fill="#928782"></path>
                <path d="M333.8,162.3 L316.4,150.4 L317,160.1 L333.8,162.3 Z" id="Shape" fill="#80716A"></path>
                <path d="M294.5,157.2 L292.6,146.7 L317,160.1 L294.5,157.2 Z" id="Shape" fill="#796355"></path>
                <path d="M271.2,153.1 L260.6,139.8 L260.2,152 L271.2,153.1 Z" id="Shape" fill="#786963"></path>
                <path d="M174.8,126.6 L209.4,131.1 L189.5,115.8 L174.8,126.6 Z" id="Shape" fill="#998881"></path>
                <path d="M214.1,122.7 L209.4,131.1 L189.5,115.8 L214.1,122.7 Z" id="Shape" fill="#B2A198"></path>
                <path d="M214.1,122.7 L209.4,131.1 L245.3,127.4 L214.1,122.7 Z" id="Shape" fill="#AB9C99"></path>
                <path d="M149,116.3 L189.5,115.8 L154.9,104.9 L149,116.3 Z" id="Shape" fill="#998881"></path>
                <path d="M78,46.6 L46.5,20.5 L55,58.8 L78,46.6 Z" id="Shape" fill="#6E6C6D"></path>
                <path d="M115.7,90.8 L154.9,104.9 L120.5,77.7 L115.7,90.8 Z" id="Shape" fill="#ADA194"></path>
                <path d="M210.1,71.6 L228.3,65.8 L223,54.8 L210.1,71.6 Z" id="Shape" fill="#A88D7A"></path>
                <path d="M210.1,71.6 L228.3,65.8 L233,77.2 L210.1,71.6 Z" id="Shape" fill="#6E6C6D"></path>
            </g>
        </g>
    </g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg width="578px" id="cloud" id="Clouyd" height="252px" viewBox="0 0 578 252" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:sketch="https://www.bohemiancoding.com/sketch/ns">
    
    <title>Cloud</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="cloud" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Cloud" sketch:type="MSLayerGroup">
            <path d="M495.3,80.1 L543.1,85.2 L531.6,7.8 L495.3,80.1 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M416.3,0.7 L431.7,82.8 L531.6,7.8 L416.3,0.7 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M431.7,82.8 L495.3,80.1 L531.6,7.8 L431.7,82.8 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M506,122.8 C506,122.8 468.2,161.7 471.5,162.7 C474.7,163.7 562.3,191.5 562.3,191.5 L506,122.8 L506,122.8 Z" id="Shape" fill="#BCBCBC" sketch:type="MSShapeGroup"></path>
            <path d="M495.3,80.1 L506,122.8 L543.1,85.2 L495.3,80.1 Z" id="Shape" fill="#D3D3D3" sketch:type="MSShapeGroup"></path>
            <path d="M410.7,194.4 L471.5,162.7 L456.4,251.1 L410.7,194.4 Z" id="Shape" fill="#BCBCBC" sketch:type="MSShapeGroup"></path>
            <path d="M368.3,48.8 L431.7,82.8 L416.3,0.7 L368.3,48.8 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M372,107.8 L431.7,82.8 L368.3,48.8 L372,107.8 Z" id="Shape" fill="#E2E2E2" sketch:type="MSShapeGroup"></path>
            <path d="M506,122.8 L495.3,80.1 L431.7,82.8 L506,122.8 Z" id="Shape" fill="#E2E2E2" sketch:type="MSShapeGroup"></path>
            <path d="M471.5,162.7 L431.7,82.8 L506,122.8 L471.5,162.7 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M372,107.8 L471.5,162.7 L431.7,82.8 L372,107.8 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M410.7,194.4 L389.4,161.3 L471.5,162.7 L410.7,194.4 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M293.5,9.4 L308.9,48.5 L340.5,24.5 L293.5,9.4 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M368.3,48.8 L308.9,48.5 L340.5,24.5 L368.3,48.8 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M372,107.8 L308.9,48.5 L368.3,48.8 L372,107.8 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M290.5,126.8 L308.9,48.5 L372,107.8 L290.5,126.8 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M289.2,224.2 L288.2,164.7 L354.4,223.8 L289.2,224.2 Z" id="Shape" fill="#C2C3C9" sketch:type="MSShapeGroup"></path>
            <path d="M344.2,153.2 L288.2,164.7 L354.4,223.8 L344.2,153.2 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M290.5,126.8 L288.2,164.7 L372,107.8 L290.5,126.8 Z" id="Shape" fill="#D3D3D3" sketch:type="MSShapeGroup"></path>
            <path d="M200.2,68.4 L248.7,71.5 L224.6,38.4 L200.2,68.4 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M308.9,48.5 L248.7,71.5 L290.5,126.8 L308.9,48.5 Z" id="Shape" fill="#D8D9DD" sketch:type="MSShapeGroup"></path>
            <path d="M224.6,38.4 L226.4,38.6 L308.9,48.5 L293.5,9.4 L224.6,38.4 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M248.7,71.5 L308.9,48.5 L224.6,38.4 L248.7,71.5 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M177.8,212.8 L288.2,164.7 L246.8,233.2 L177.8,212.8 Z" id="Shape" fill="#C4C4C4" sketch:type="MSShapeGroup"></path>
            <path d="M152.8,58 L168.2,98.2 L200.2,68.4 L152.8,58 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M110.1,91.4 L168.2,98.2 L152.8,58 L110.1,91.4 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M248.7,71.5 L216.5,122.2 L290.5,126.8 L248.7,71.5 Z" id="Shape" fill="#E2E2E2" sketch:type="MSShapeGroup"></path>
            <path d="M288.2,164.7 L216.5,122.2 L290.5,126.8 L288.2,164.7 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M200.2,68.4 L216.5,122.2 L248.7,71.5 L200.2,68.4 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M177.8,212.8 L225.2,153.8 L288.2,164.7 L177.8,212.8 Z" id="Shape" fill="#EFEFEF" sketch:type="MSShapeGroup"></path>
            <path d="M0.8,206.4 L58.9,181.8 L83,228 L0.8,206.4 Z" id="Shape" fill="#D8D9DD" sketch:type="MSShapeGroup"></path>
            <path d="M25.6,146.3 L58.9,181.8 L0.8,206.4 L25.6,146.3 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M73.5,149.2 L58.9,181.8 L25.6,146.3 L73.5,149.2 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M83,228 L130.4,183.6 L177.8,212.8 L83,228 Z" id="Shape" fill="#A5A5A5" sketch:type="MSShapeGroup"></path>
            <path d="M73.5,149.2 L135,145.5 L110.1,91.4 L73.5,149.2 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M168.2,98.2 L216.5,122.2 L200.2,68.4 L168.2,98.2 Z" id="Shape" fill="#D8D8D8" sketch:type="MSShapeGroup"></path>
            <path d="M130.4,183.6 L225.2,153.8 L177.8,212.8 L130.4,183.6 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M58.9,181.8 L95.5,181.4 L83,228 L58.9,181.8 Z" id="Shape" fill="#C2C3C9" sketch:type="MSShapeGroup"></path>
            <path d="M130.4,183.6 L95.5,181.4 L83,228 L130.4,183.6 Z" id="Shape" fill="#D8D9DD" sketch:type="MSShapeGroup"></path>
            <path d="M73.5,149.2 L95.5,181.4 L58.9,181.8 L73.5,149.2 Z" id="Shape" fill="#E2E2E2" sketch:type="MSShapeGroup"></path>
            <path d="M135,145.5 L168.2,98.2 L110.1,91.4 L135,145.5 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M225.2,153.8 L135,145.5 L130.4,183.6 L225.2,153.8 Z" id="Shape" fill="#D3D3D3" sketch:type="MSShapeGroup"></path>
            <path d="M95.5,181.4 L135,145.5 L73.5,149.2 L95.5,181.4 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M130.4,183.6 L135,145.5 L95.5,181.4 L130.4,183.6 Z" id="Shape" fill="#E2E2E2" sketch:type="MSShapeGroup"></path>
            <path d="M225.2,153.8 L216.5,122.2 L288.2,164.7 L225.2,153.8 Z" id="Shape" fill="#D3D3D3" sketch:type="MSShapeGroup"></path>
            <path d="M135,145.5 L216.5,122.2 L225.2,153.8 L135,145.5 Z" id="Shape" fill="#D8D8D8" sketch:type="MSShapeGroup"></path>
            <path d="M168.2,98.2 L216.5,122.2 L135,145.5 L168.2,98.2 Z" id="Shape" fill="#D3D3D3" sketch:type="MSShapeGroup"></path>
            <path d="M577.8,87.3 L562.3,191.5 L506,122.8 L577.8,87.3 Z" id="Shape" fill="#B2B2B2" sketch:type="MSShapeGroup"></path>
            <path d="M456.4,251.1 L562.3,191.5 L471.5,162.7 L456.4,251.1 Z" id="Shape" fill="#A5A5A5" sketch:type="MSShapeGroup"></path>
            <path d="M372,107.8 L344.2,153.2 L389.4,161.3 L372,107.8 Z" id="Shape" fill="#E2E2E2" sketch:type="MSShapeGroup"></path>
            <path d="M471.5,162.7 L372,107.8 L389.4,161.3 L471.5,162.7 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M344.2,153.2 L354.4,223.8 L389.4,161.3 L344.2,153.2 Z" id="Shape" fill="#D3D3D3" sketch:type="MSShapeGroup"></path>
            <path d="M372,107.8 L288.2,164.7 L344.2,153.2 L372,107.8 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
            <path d="M246.8,233.2 L289.2,224.2 L288.2,164.7 L246.8,233.2 Z" id="Shape" fill="#A5A5A5" sketch:type="MSShapeGroup"></path>
            <path d="M354.4,223.8 L456.4,251.1 L410.7,194.4 L354.4,223.8 Z" id="Shape" fill="#A5A5A5" sketch:type="MSShapeGroup"></path>
            <path d="M389.4,161.3 L410.7,194.4 L354.4,223.8 L389.4,161.3 Z" id="Shape" fill="#F7F7F8" sketch:type="MSShapeGroup"></path>
            <path d="M531.6,7.8 L577.8,87.3 L543.1,85.2 L531.6,7.8 Z" id="Shape" fill="#B2B2B2" sketch:type="MSShapeGroup"></path>
            <path d="M506,122.8 L577.8,87.3 L543.1,85.2 L506,122.8 Z" id="Shape" fill="#A5A5A5" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

低多边形艺术动画，小鸟、树枝、浮云。

gsap, bird

编辑器支持Emmet

快捷键

低多边形艺术动画，小鸟、树枝、浮云。

gsap, bird

GSAP 起起伏伏的多彩小柱动画

GSAP 原子模型动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：