2015年网页设计开发文章作品荟萃#20 - 原子化设计

Source: http://bradfrost.com/blog/post/atomic-design-in-one-gif/

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

TweenLite.set(".card-wrapper");
    TweenLite.set(".card", {
        transformStyle: "preserve-3d",
        transformOrigin: "left 50%",
        transformPerspective: 1800
    });
    TweenLite.set(".back", {
        rotationY: 180
    });
    TweenLite.set([".back", ".front"], {
        backfaceVisibility: "hidden"
    });
    TweenLite.set(".card__contents", {
        scale: 0,
        autoAlpha: 0
    });

$('.card-wrapper').bind({
        click: function() {
            TweenLite.to($(this).find(".card"), 0.8, {
                rotationY: -120,
                ease: Back.easeOut
            });
            TweenLite.to(".card__contents", 1.2, {
                scale: 1,
                autoAlpha: 1,
                delay: 0.5,
                ease: Elastic.easeOut
            });
        }
    });

$('.close').bind({
        click: function() {
            TweenLite.to(".card__contents", 0.4, {
                scale: 0,
                autoAlpha: 0,
                ease: Power1.easeOut
            });
            TweenLite.to(".card", 0.6, {
                rotationY: 0,
                delay: 0.5,
                ease: Power1.easeOut
            });
        }
    });

TweenLite.set(".text-box", {
        autoAlpha: 0,
        y: '20px'
    });

/*
$('.arrow--right').bind({
    click: function() {
     TweenLite.to(".text-box", 0.8, {autoAlpha: 1, y: '0px', ease:Power1.easeOut});
			TweenLite.to(".text-box", 0.8, {autoAlpha: 0, y: '40px', delay: 2, ease:Power1.easeIn});
    }
});*/

//Flying Robin animation
    TweenLite.set("#robin", {
        x: 1100,
        y: 30,
        autoAlpha: 0
    }, 2);

var robin = document.getElementById("robin")
    var wing = document.getElementById("wing")
    var tl = new TimelineMax({
        repeatDelay: 1.5
    });

TweenLite.set(wing, {
        transformOrigin: "left top"
    });

tl.to(robin, 3, {
            bezier: {
                type: "soft",
                values: [{
                    x: 1100,
                    y: 30
                }, {
                    x: 700,
                    y: 100
                }, {
                    x: 500,
                    y: 0
                }, {
                    x: 300,
                    y: 100
                }, {
                    x: 100,
                    y: 220
                }],
                autoRotate: false,
                ease: Power1.easeInOut,
            }
        }, 2)
        .to(robin, 0.6, {
            rotation: 30,
            ease: Power1.easeInOut
        }, "-=3")
        .to(robin, 0.2, {
            autoAlpha: 1
        }, "-=3")
        .to(wing, 0.6, {
            rotation: 30
        }, "-=3")
        .to(robin, 1, {
            rotation: -30,
            ease: Power1.easeInOut
        }, "-=2.4")
        .to(wing, 0.6, {
            rotation: -40
        }, "-=2.4")
        .to(robin, 1, {
            rotation: 0,
            ease: Power1.easeInOut
        }, "-=1")
        .to(wing, 0.6, {
            rotation: -10
        }, "-=1")

});

编译

CSS

/* Foreground styles */

*,
html,
body {
    box-sizing: border-box;
}
body {
    height: 100vh;
    background-color: #e7f4fa;
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: 'Lato', sans-serif;
    color: #0c1110;
}
.background {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: -webkit-linear-gradient(#3a2959, #64a9ea) no-repeat;
    background: linear-gradient(#3a2959, #64a9ea) no-repeat;
}
.foreground {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0.99;
}
svg.background__ground {
    position: absolute;
    bottom: 0;
}
@media screen and (min-width: 1100px) {
    svg.background__ground {
        bottom: -2em;
    }
}
@media screen and (min-width: 1400px) {
    svg.background__ground {
        bottom: -4em;
    }
}
#snowman {
    width: 14em;
    position: absolute;
    bottom: 0;
    margin: 1em;
}
@media screen and (min-width: 720px) {
    #snowman {
        bottom: 2em;
        left: 1em;
        width: 22em;
    }
}
@media screen and (min-width: 900px) {
    #snowman {
        bottom: 3em;
    }
}
@media screen and (min-width: 1100px) {
    #snowman {
        left: 4em;
        width: 28em;
        bottom: 2em;
    }
}
@media screen and (min-width: 1500px) {
    #snowman {
        bottom: 4em;
    }
}
#cracker {
    width: 5em;
    position: absolute;
    bottom: 0;
    left: 2em;
    margin: 1em;
}
@media screen and (min-width: 720px) {
    #cracker {
        bottom: 3.5em;
        left: 4em;
        width: 8em;
    }
}
@media screen and (min-width: 1100px) {
    #cracker {
        left: 6em;
        width: 10em;
    }
}
@media screen and (min-width: 1500px) {
    #cracker {
        bottom: 5em;
        left: 8em;
    }
}
#cat2 {
    bottom: 1em;
    right: 2em;
    width: 4em;
    position: absolute;
}
@media screen and (min-width: 720px) {
    #cat2 {
        width: 6.5em;
        bottom: 2em;
    }
}
@media screen and (min-width: 1100px) {
    #cat2 {
        width: 10em;
    }
}
@media screen and (min-width: 1500px) {
    #cat2 {
        right: 4em;
    }
}
g#scarf-behind {
    -webkit-transform-origin: right 50%;
    transform-origin: right 50%;
    -webkit-animation: 3s blow 2s infinite;
    animation: 3s blow 2s infinite;
}
@-webkit-keyframes blow {
    0% {
        -webkit-transform: rotate() scaleX(1);
        transform: rotate() scaleX(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    20% {
        -webkit-transform: rotate(5deg) scaleX(0.9);
        transform: rotate(5deg) scaleX(0.9);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    40% {
        -webkit-transform: rotate(-4deg) scaleX(1);
        transform: rotate(-4deg) scaleX(1);
    }
    60% {
        -webkit-transform: rotate(0) scaleX(1);
        transform: rotate(0) scaleX(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes blow {
    0% {
        -webkit-transform: rotate() scaleX(1);
        transform: rotate() scaleX(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    20% {
        -webkit-transform: rotate(5deg) scaleX(0.9);
        transform: rotate(5deg) scaleX(0.9);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    40% {
        -webkit-transform: rotate(-4deg) scaleX(1);
        transform: rotate(-4deg) scaleX(1);
    }
    60% {
        -webkit-transform: rotate(0) scaleX(1);
        transform: rotate(0) scaleX(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
#snowman1 {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
#snowman2 {
    -webkit-transform-origin: 50% 100%;
    /*@keyframes rock {
  0% { transform: rotate(0); }
  30% { transform: rotate(-1deg); }
  40% { transform: rotate(0.5deg); }
  60% { transform: rotate(0); }
}*/
    
    transform-origin: 50% 100%;
}
g.background__snowman {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.red {
    fill: #aa1231;
    -webkit-animation: 0.6s red-flash ease-in-out infinite;
    animation: 0.6s red-flash ease-in-out infinite;
}
@-webkit-keyframes red-flash {
    40% {
        fill: #ea385c;
    }
    80% {
        fill: #aa1231;
    }
}
@keyframes red-flash {
    40% {
        fill: #ea385c;
    }
    80% {
        fill: #aa1231;
    }
}
.yellow {
    fill: #c1881c;
    -webkit-animation: 0.6s yellow-flash ease-in-out infinite;
    animation: 0.6s yellow-flash ease-in-out infinite;
}
@-webkit-keyframes yellow-flash {
    40% {
        fill: #e7b75c;
    }
    80% {
        fill: #c1881c;
    }
}
@keyframes yellow-flash {
    40% {
        fill: #e7b75c;
    }
    80% {
        fill: #c1881c;
    }
}
.blue-lt {
    fill: #1f3e64;
    -webkit-animation: 0.6s blue-lt-flash ease-in-out infinite;
    animation: 0.6s blue-lt-flash ease-in-out infinite;
}
@-webkit-keyframes blue-lt-flash {
    40% {
        fill: #386fb1;
    }
    80% {
        fill: #1f3e64;
    }
}
@keyframes blue-lt-flash {
    40% {
        fill: #386fb1;
    }
    80% {
        fill: #1f3e64;
    }
}
.blue-dk {
    fill: #0f1f2f;
    -webkit-animation: 0.6s blue-dk-flash ease-in-out infinite;
    animation: 0.6s blue-dk-flash ease-in-out infinite;
}
@-webkit-keyframes blue-dk-flash {
    40% {
        fill: #28527c;
    }
    80% {
        fill: #0f1f2f;
    }
}
@keyframes blue-dk-flash {
    40% {
        fill: #28527c;
    }
    80% {
        fill: #0f1f2f;
    }
}
.gold-dk {
    fill: #69512a;
    -webkit-animation: 0.6s gold-dk-flash ease-in-out infinite;
    animation: 0.6s gold-dk-flash ease-in-out infinite;
}
@-webkit-keyframes gold-dk-flash {
    40% {
        fill: #b28947;
    }
    80% {
        fill: #69512a;
    }
}
@keyframes gold-dk-flash {
    40% {
        fill: #b28947;
    }
    80% {
        fill: #69512a;
    }
}
.baubles-g1 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.baubles-g2 {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.star-left {
    fill: #e7b75c;
}
.star-right {
    fill: #b28947;
}
.container--snowflakes {
    max-width: 1200px;
    margin: 3em auto 1em auto;
}
#robin {
    position: absolute;
    bottom: 20em;
    width: 4em;
}
@media screen and (min-width: 1100px) {
    #robin {
        width: 5em;
    }
}
#stars1 {
    opacity: 0;
    -webkit-animation: starshine 12s ease-out 0.8s infinite;
    animation: starshine 12s ease-out 0.8s infinite;
}
#stars2 {
    opacity: 0;
    -webkit-animation: starshine 10s ease-out 5s infinite;
    animation: starshine 10s ease-out 5s infinite;
}
#stars3 {
    opacity: 0;
    -webkit-animation: starshine 10s ease-out 7s infinite;
    animation: starshine 10s ease-out 7s infinite;
}
#stars4 {
    opacity: 0;
    -webkit-animation: starshine 12s ease-out 8s infinite;
    animation: starshine 12s ease-out 8s infinite;
}
@-webkit-keyframes starshine {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes starshine {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
h1 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
}
h2 {
    font-weight: 400;
    font-size: 1em;
}
.about {
    display: block;
    max-width: 8em;
    float: right;
    padding: 1em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
    font-size: 0.9em;
    background-color: #33244f;
    color: #64a9ea;
    border-radius: 0.5em;
    margin: 1em;
}
.wrapper--header {
    clear: both;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 52em;
    margin: 0 auto;
    padding: 1em;
    z-index: -10000000;
    text-align: center;
}
.wrapper--header h1 {
    color: #e7f4fa;
    text-shadow: -0.1em 0.1em 0.5em #3a2959;
}
.wrapper--header h2 {
    color: #2f2148;
}
.wrapper--main {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1em;
}
.card-wrapper,
.card-face,
.card-under {
    width: 10em;
    height: 10em;
}
.card-wrapper {
    position: relative;
    cursor: pointer;
    display: block;
}
.card {
    z-index: 100;
}
.card-face {
    position: absolute;
    overflow: hidden;
    border-radius: 0.5em;
    z-index: 200;
}
.front {
    background: -webkit-linear-gradient(45deg, #3a2959, #64a9ea);
    background: linear-gradient(45deg, #3a2959, #64a9ea);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.front h1 {
    font-size: 3em;
    color: #3a2959;
}
.back {
    background-color: #2f2148;
}
.card-under {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #3a2959;
    z-index: 0;
    border-radius: 0.5em;
    box-shadow: -0.3em 0.3em 0.2em #2f2148 inset;
}
.front {
    border-top: 2px solid #64a9ea;
    border-right: 2px solid #64a9ea;
    border-bottom: 2px solid #3a2959;
    border-left: 2px solid #3a2959;
}
.card-under {
    border-top: 2px solid #2f2148;
    border-right: 2px solid #2f2148;
    border-bottom: 2px solid #2f2148;
}
.card__contents {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999999;
}
.card__contents .contents__wrapper {
    position: relative;
    max-width: 40em;
    margin: 0 auto;
    background-color: #e7f4fa;
    padding: 2em;
    border: 1px solid #bde1f1;
    box-shadow: -0.1em 0.1em 0.5em #3a2959;
}
.card__contents p {
    line-height: 1.4;
}
.card__contents a {
    color: #64a9ea;
}
.card__contents a.article__link {
    padding: 0.5em;
    background-color: #64a9ea;
    border-radius: 0.3em;
    color: #e7f4fa;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.card__contents a.article__link:focus,
.card__contents a.article__link:hover,
.card__contents a.article__link:active {
    background-color: #3a2959;
    color: #e7f4fa;
}
.card__contents a:focus,
.card__contents a:hover,
.card__contents a:active {
    color: #3a2959;
}
.card__contents a.close {
    position: absolute;
    top: 1em;
    right: 1em;
    cursor: pointer;
    padding: 0.2em;
    width: 2em;
    height: 2em;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #64a9ea;
    font-weight: 700;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.card__contents a.close:focus,
.card__contents a.close:hover,
.card__contents a.close:active {
    border: 2px solid #3a2959;
}
.card__contents #holly {
    position: absolute;
    top: -1em;
    left: -0.5em;
    width: 6em;
}
.arrow {
    display: block;
    width: 2.5em;
    height: 2.5em;
    cursor: pointer;
    fill: #3a2959;
    opacity: 0.5;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.arrow:focus,
.arrow:hover,
.arrow:active {
    opacity: 1;
}
.text-box {
    position: absolute;
    top: 45vh;
    width: 100%;
    text-align: center;
}
.text-box p {
    max-width: 20em;
    margin: 0 auto;
    background-color: orange;
    padding: 1em;
    border-radius: 0.2em;
    /* Tablet styles */
    
    box-shadow: -0.1em 0.1em 0.5em #3a2959;
}
@media screen and (min-width: 22em) {
    .card-wrapper,
    .card-face,
    .card-under {
        width: 12em;
        height: 12em;
    }
}
@media screen and (min-width: 720px) {
    .wrapper--header,
    .wrapper--main {
        padding: 1em 2em;
    }
    h1 {
        font-size: 2.2em;
    }
    h2 {
        font-size: 1.1em;
    }
    .card-wrapper,
    .card-face,
    .card-under {
        width: 16em;
        height: 16em;
    }
    .front h1 {
        font-size: 5em;
    }
}
@media screen and (min-width: 1100px) {
    h1 {
        font-size: 2.8em;
        margin-bottom: 0.5em;
    }
    h2 {
        font-size: 1.2em;
    }
}
@media screen and (min-width: 1400px) {
    .card-wrapper,
    .card-face,
    .card-under {
        width: 22em;
        height: 22em;
    }
    .wrapper--header {
        padding: 2em;
    }
    h1 {
        font-size: 3.4em;
        margin-bottom: 0.5em;
    }
    h2 {
        font-size: 1.4em;
    }
}

HTML

<div class="foreground">
    <a class="about" href="#" target="_blank">About</a>

<header class="wrapper wrapper--header">
        <h1>2015 Web Design Advent</h1>
        <h2>The best articles, tips and inspiration from the past year in web design</h2>
    </header>

<div class="main">
            <a class="card-wrapper" onclick=''>
                <div class="card-under"></div>
                <div class="card">
                    <div class="card-face front">
                        <h1 class="number">20</h1>
                    </div>
                    <div class="card-face back"></div>
                </div>
            </a>
            <div class="card__contents">
                <div class="contents__wrapper">
                    <h3>Atomic Design in One GIF</h3>
                    <p>Brad Frost’s Atomic Design methodology has increasingly been adopted as one of the best ways to approach designing for the web. By starting with the smallest components (atoms) and building these into molecules, organisms, templates
                        and, finally, pages we can create design systems that are truly modular.</p>
                    <p>In <a href="https://bradfrost.com/blog/post/atomic-design-in-one-gif/" target="_blank">this post</a>, Brad neatly encapsulates the methodology in one handy GIF. If you haven’t already read up on Atomic Design, you can find more information
                        in the <a href="https://bradfrost.com/blog/post/atomic-web-design/" target="_blank">original article</a> from 2013.</p>
                    <a class="article__link" href="https://bradfrost.com/blog/post/atomic-design-in-one-gif/" target="_blank">Read the article</a>
                    <a class="close">x</a>
                    <svg id="holly" xmlns="https://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 210.5 169.3" xml:space="preserve">
                        <style type="text/css">
                            .leaf {
                                fill: #004136;
                            }
                            .berry1 {
                                fill: #B22B5C;
                            }
                            .berry2 {
                                fill: #CC2F60;
                            }
                            .berry3 {
                                fill: #E73362;
                            }
                        </style>
                        <path class="leaf" d="M70.5 26.6c0 0 29.9 17.2 37.7 49.8 0 0 27.9-31.8 62.7 11.5 0 0 6-40.1 39.6-35.6 0 0-21.3-11.5-23.6-40.4 0 0-46.2 22.6-64.7-11.9C122.2 0 100.5 32.1 70.5 26.6zM70.2 35.4c0 0-19.9 27.4-52.4 31.6 0 0 28.1 30.5-17.7 59.9 0 0 38.4 10 30.6 42.3 0 0 13.4-19.6 41.9-18.8 0 0-17.2-47.4 18.3-61.8C90.8 88.6 61.7 64.1 70.2 35.4z"
                        />
                        <circle class="berry1" cx="76" cy="48" r="14.5" />
                        <circle class="berry2" cx="71.8" cy="28.1" r="16.5" />
                        <circle class="berry3" cx="54.9" cy="46.4" r="16.5" />
                    </svg>
                </div>
            </div>
        </div>

</main>
    <div class="text-box">
        <p>Sorry, no peeking before tomorrow!</p>
    </div>
</div>

<div class="background">
    
    <svg class="background__ground" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Layer_2" x="0" y="0" viewBox="0 0 1314 227.7" xml:space="preserve">
        <style type="text/css">
            .snow {
                fill: #E7F4FA;
            }
        </style>
        <g class="snow" id="ground">
            <path d="M0 21.6c141-41.8 293.2-11.1 441.1-5.1 107.2 4.4 214.4-4.5 321.6-9.3C814.4 4.8 866.3 3.4 918 8c46.2 4.1 92 13.1 138.3 13.2 86.5 0.1 175.7-30.4 257.7-2.5v209H0V21.6z" />
        </g>
    </svg>
    
    <svg id="snowman" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="-1843.6 483.2 462.7 330" xml:space="preserve">
        <style type="text/css">
            .scarf1 {
                fill: #E7B75C;
            }
            .scarf2 {
                fill: #EA385C;
            }
            .shadow {
                fill: #B9C3C6;
            }
            .arm {
                fill: none;
                stroke: #202123;
                stroke-width: 3;
                stroke-miterlimit: 10;
            }
            .st4 {
                fill: #E7F4FA;
            }
            .eyes {
                fill: #202123;
            }
            .mouth {
                fill: none;
                stroke: #C8C8CC;
                stroke-width: 3;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-miterlimit: 10;
            }
            .st7 {
                fill: none;
                stroke: #202123;
                stroke-width: 4;
                stroke-miterlimit: 10;
            }
            .buttons {
                fill: #808080;
            }
            .st9 {
                fill: #332C28;
            }
            .st10 {
                fill: #00513E;
            }
            .st11 {
                fill: #003828;
            }
            .gift1 {
                fill: #386FB1
            }
        </style>
        <ellipse id="shadow" class="shadow" transform="matrix(0.9976 -6.985204e-02 6.985204e-02 0.9976 -55.1049 -100.9228)" class="st2" cx="-1470.6" cy="737.5" rx="55.9" ry="11.2" />
        <ellipse id="shadow_1_" class="shadow" transform="matrix(6.985503e-02 0.9976 -0.9976 6.985503e-02 -699.3292 1884.1479)" cx="-1355" cy="517.1" rx="11.2" ry="55.9" />
        <g id="snowman1">
            <g id="scarf-behind">
                <path class="scarf1" d="M-1815.8 609.9l-1.4-4.6h0.1c0.8-0.1 1.3-0.2 1.3-0.2l-1.8-5.7c0 0-0.3 0.1-0.9 0.4 -0.3 0.1-0.7 0.3-1.1 0.4s-0.9 0.3-1.5 0.4c-0.6 0.2-1.2 0.3-1.8 0.4 -0.7 0.1-1.4 0.2-2.1 0.3 -1.5 0.2-3.2 0.3-4.8 0.4 -1.7 0.1-3.4 0.3-5 0.4 -0.8 0.1-1.6 0.2-2.3 0.3 -0.7 0.1-1.4 0.3-2 0.4 -0.6 0.1-1.2 0.3-1.7 0.5 -0.5 0.1-0.9 0.3-1.3 0.4 -0.7 0.3-1.1 0.4-1.1 0.4s0.4-0.1 1.1-0.2c0.4-0.1 0.8-0.1 1.3-0.1s1.1-0.1 1.7-0.1 1.3 0 2 0 1.5 0.1 2.2 0.2c1.5 0.2 3.2 0.4 4.8 0.7 1.7 0.3 3.4 0.5 5 0.7 0.8 0.1 1.6 0.2 2.4 0.2 0.2 0 0.4 0 0.7 0 -0.3 0.1-0.6 0.1-1 0.2 -0.7 0.1-1.4 0.2-2.1 0.3 -1.5 0.2-3.2 0.3-4.8 0.4 -1.7 0.1-3.4 0.3-5 0.4 -0.8 0.1-1.6 0.2-2.3 0.3 -0.7 0.1-1.4 0.3-2 0.4s-1.2 0.3-1.7 0.5c-0.5 0.1-0.9 0.3-1.3 0.4 -0.7 0.3-1.1 0.4-1.1 0.4s0.4-0.1 1.1-0.2c0.4-0.1 0.8-0.1 1.3-0.1s1.1-0.1 1.7-0.1 1.3 0 2 0 1.5 0.1 2.2 0.2c1.5 0.2 3.2 0.4 4.8 0.7 1.7 0.3 3.4 0.5 5 0.7 0.8 0.1 1.6 0.2 2.4 0.2 0.2 0 0.4 0 0.7 0 -0.3 0.1-0.6 0.1-1 0.2 -0.7 0.1-1.4 0.2-2.1 0.3 -1.5 0.2-3.2 0.3-4.8 0.4 -1.7 0.1-3.4 0.3-5 0.4 -0.8 0.1-1.6 0.2-2.3 0.3 -0.7 0.1-1.4 0.3-2 0.4 -0.6 0.1-1.2 0.3-1.7 0.5 -0.5 0.1-0.9 0.3-1.3 0.4 -0.7 0.3-1.1 0.4-1.1 0.4s0.4-0.1 1.1-0.2c0.4-0.1 0.8-0.1 1.3-0.1s1.1-0.1 1.7-0.1 1.3 0 2 0 1.5 0.1 2.2 0.2c1.5 0.2 3.2 0.4 4.8 0.7 1.7 0.3 3.4 0.5 5 0.7 0.8 0.1 1.6 0.2 2.4 0.2 0.2 0 0.4 0 0.7 0 -0.3 0.1-0.6 0.1-1 0.2 -0.7 0.1-1.4 0.2-2.1 0.3 -1.5 0.2-3.2 0.3-4.8 0.4 -1.7 0.1-3.4 0.3-5 0.4 -0.8 0.1-1.6 0.2-2.3 0.3 -0.7 0.1-1.4 0.3-2 0.4s-1.2 0.3-1.7 0.5c-0.5 0.1-0.9 0.3-1.3 0.4 -0.7 0.3-1.1 0.4-1.1 0.4s0.4-0.1 1.1-0.2c0.4-0.1 0.8-0.1 1.3-0.1s1.1-0.1 1.7-0.1 1.3 0 2 0 1.5 0.1 2.2 0.2c1.5 0.2 3.2 0.4 4.8 0.7 1.7 0.3 3.4 0.5 5 0.7 0.8 0.1 1.6 0.2 2.4 0.2 0.2 0 0.4 0 0.7 0 -0.3 0.1-0.6 0.1-1 0.2 -0.7 0.1-1.4 0.2-2.1 0.3 -1.5 0.2-3.2 0.3-4.8 0.4 -1.7 0.1-3.4 0.3-5 0.4 -0.8 0.1-1.6 0.2-2.3 0.3 -0.7 0.1-1.4 0.3-2 0.4 -0.6 0.1-1.2 0.3-1.7 0.5 -0.5 0.1-0.9 0.3-1.3 0.4 -0.7 0.3-1.1 0.4-1.1 0.4s0.4-0.1 1.1-0.2c0.4-0.1 0.8-0.1 1.3-0.1s1.1-0.1 1.7-0.1 1.3 0 2 0 1.5 0.1 2.2 0.2c1.5 0.2 3.2 0.4 4.8 0.7 1.7 0.3 3.4 0.5 5 0.7 0.8 0.1 1.6 0.2 2.4 0.2s1.5 0 2.2 0 1.3-0.1 1.9-0.1 1.1-0.1 1.5-0.2c0.8-0.1 1.3-0.2 1.3-0.2l-1.4-4.6h0.1c0.8-0.1 1.3-0.2 1.3-0.2l-1.4-4.6h0.1c0.8-0.1 1.3-0.2 1.3-0.2l-1.4-4.6h0.1C-1816.2 610-1815.8 609.9-1815.8 609.9z"
                />
                <path class="scarf2" d="M-1716.1 626.1c-33.1 15.7-66.1-14.4-99.2-1.2 -1.3 0.5-2.8-0.4-2.8-1.8v-22.6c0-0.8 0.5-1.5 1.2-1.8 33.6-14.9 67.2 16.5 100.8 0.5C-1716.1 608.1-1716.1 617.1-1716.1 626.1z" />
                <path class="scarf1" d="M-1802.1 594.8c0 9 0 17.9 0 26.9 4.7-0.5 9.3-0.3 14 0.3 0-9 0-17.9 0-26.9C-1792.7 594.5-1797.4 594.3-1802.1 594.8z" />
                <path class="scarf1" d="M-1769.8 598.6c0 9 0 17.9 0 26.9 4.7 1.1 9.3 2.2 14 3.2 0-9 0-17.9 0-26.9C-1760.4 600.8-1765.1 599.6-1769.8 598.6z" />
                <path class="scarf1" d="M-1737.4 603.8c0 9 0 17.9 0 26.9 4.7 0 9.3-0.6 14-1.9 0-9 0-17.9 0-26.9C-1728.1 603.3-1732.8 603.8-1737.4 603.8z" />
            </g>
            <g id="snowman">
                <ellipse class="shadow" id="shadow" transform="matrix(0.9976 -6.985204e-02 6.985204e-02 0.9976 -56.5575 -117.4122)" cx="-1707.1" cy="750" rx="68.9" ry="13.8" />
                <g id="arm-r" class="arm">
                    <polyline points="-1663 636.7 -1637.5 611.7 -1619.9 608.7 -1616.5 597.6 " />
                    <line x1="-1638" y1="612.2" x2="-1638" y2="597.2" />
                    <line x1="-1627.6" y1="610" x2="-1616.5" y2="622.2" />
                </g>
                <ellipse id="body" class="snow" transform="matrix(0.9955 -9.426693e-02 9.426693e-02 0.9955 -71.8153 -156.804)" class="st4" cx="-1695.6" cy="681.7" rx="65" ry="71.5" />
                <circle id="head" class="snow" cx="-1706.5" cy="586.2" r="41" />
                <g id="eyes">
                    <ellipse transform="matrix(0.9437 -0.3309 0.3309 0.9437 -289.4088 -533.6516)" class="eyes" cx="-1712.1" cy="583.2" rx="4.9" ry="6.5" />
                    <ellipse transform="matrix(0.9437 -0.3309 0.3309 0.9437 -285.5079 -522.7391)" class="eyes" cx="-1678.1" cy="577.2" rx="4.9" ry="6.5" />
                </g>
            </g>
            <ellipse id="nose" transform="matrix(0.9598 -0.2807 0.2807 0.9598 -233.9379 -450.1066)" class="scarf1" cx="-1688.3" cy="591.6" rx="7.1" ry="5.4" />
            <path id="mouth" class="mouth" d="M-1696.7 607c0 0 10.1 4.4 16.8-3.7" />
            <g id="arm-l" class="arm">
                <polyline points="-1732 648.7 -1771 630.7 -1776.5 610.3 -1785.5 605.7 " />
                <line x1="-1773.3" y1="622" x2="-1792.5" y2="627.2" />
                <line x1="-1760.9" y1="635.4" x2="-1773.3" y2="641.2" />
            </g>
            <g id="buttons" class="buttons">
                <ellipse transform="matrix(0.9821 0.1884 -0.1884 0.9821 90.7004 328.5859)" cx="-1683.1" cy="641.4" rx="5.1" ry="4.8" />
                <ellipse transform="matrix(0.9378 -0.3472 0.3472 0.9378 -335.7439 -541.206)" cx="-1678.2" cy="666.3" rx="5.1" ry="4.8" />
            </g>
            <g id="scarf-front">
                <path class="scarf2" d="M-1655.2 626c-26.3 16.6-60.1 20.5-91.3 8.8 -2.4-0.9-3.9-3-3.4-4.6 2.1-6.6 4.4-13.2 7-19.6 0.6-1.5 2.6-2.1 4.4-1.4 23.5 9.4 48.8 6.6 68.2-5.2 1.5-0.9 3.4-0.6 4.4 0.8 4 5.7 8.1 11.2 12.5 16.6C-1652.4 622.5-1653.1 624.7-1655.2 626z"
                />
                <path class="scarf1" d="M-1715.7 641.3c-0.2-9-0.1-17.9 0.4-26.8 -4.1-0.3-8.1-0.9-12.2-1.9 -1.8 8.7-3.3 17.5-4.4 26.5C-1726.5 640.3-1721.1 641-1715.7 641.3z" />
                <path class="scarf1" d="M-1678.5 636.8c-3.4-8.3-6.4-16.7-9-25.2 -3.7 1.1-7.6 2-11.5 2.5 1.3 8.8 3 17.6 5.1 26.3C-1688.7 639.5-1683.5 638.3-1678.5 636.8z" />
                <path class="scarf1" d="M-1655.2 626c2-1.3 2.8-3.4 1.7-4.7 -4.4-5.4-8.5-10.9-12.5-16.6 -1-1.4-2.9-1.7-4.4-0.8 -0.9 0.5-1.8 1.1-2.7 1.5 4.4 7.8 9.1 15.4 14.1 22.8C-1657.7 627.5-1656.4 626.8-1655.2 626z" />
            </g>
        </g>
        </g>
        <g id="snowman2">
            <g id="arm-r_2_" class="arm">
                <polyline points="-1492.8 646.5 -1506.6 626.3 -1515.6 623.8 -1525.2 615.5 " />
                <line x1="-1506.2" y1="627.1" x2="-1507" y2="614" />
                <line x1="-1500.6" y1="635.2" x2="-1524.1" y2="632" />
            </g>
            <ellipse id="body_2_" transform="matrix(0.9998 -2.089692e-02 2.089692e-02 0.9998 -14.4823 -30.3753)" class="snow" cx="-1460.7" cy="677.8" rx="59.6" ry="60.5" />
            <circle id="head_2_" class="snow" cx="-1449.8" cy="600.9" r="34.7" />
            <g id="eyes_2_" class="eyes">
                <ellipse transform="matrix(0.9636 0.2672 -0.2672 0.9636 107.3009 407.9326)" cx="-1445.2" cy="598.2" rx="4.1" ry="5.5" />
                <ellipse transform="matrix(0.9636 0.2672 -0.2672 0.9636 105.3762 415.5825)" cx="-1474.3" cy="595" rx="4.1" ry="5.5" />
            </g>
            <g id="arm-l_2_" class="arm">
                <polyline points="-1425.2 645.3 -1403.6 630.3 -1389.4 617.2 -1382.6 607.3 " />
                <line x1="-1395.8" y1="623.6" x2="-1386.3" y2="627.5" />
                <line x1="-1403.6" y1="630.3" x2="-1399.1" y2="607.1" />
            </g>
            <path id="mouth_1_" class="mouth" d="M-1468.6 615.5c4.3 6.5 10.8 1.3 10.8 1.3" />
            <path id="nose_1_" class="scarf1" d="M-1458.7 600.5l-17.2-0.3c-1.7 0-2.3 2.4-0.7 3.1l14.9 7C-1461.5 610.4-1453.3 608.6-1458.7 600.5z" />
            <path class="scarf2" d="M-1413.1 600.9l-60.9-28.8c16.2-29.7 66.1-35.1 84.4-2.3C-1389.6 569.8-1412.7 577.1-1413.1 600.9z" />
            <circle class="scarf1" cx="-1390.4" cy="570.8" r="9.5" />
            <path class="scarf1" d="M-1417.8 603.1c-21.9-5.6-42.1-13.8-60.4-24.1 -2.6-1.4-3.3-4.5-1.9-6.9 1-1.6 1.9-3.1 2.9-4.7 1.4-2.4 4.5-3.2 6.9-1.8 17.4 9.6 36.7 17.4 57.7 22.5 2.9 0.7 4.6 3.4 3.8 6.1 -0.6 1.8-1.2 3.6-1.8 5.3C-1411.4 602.3-1414.7 603.9-1417.8 603.1z"
            />
        </g>
        <g id="tree">
            <rect x="-1605.6" y="697.1" class="st9" width="21.7" height="71.3" />
            <polygon class="st10" points="-1656.1 616.8 -1634.8 612 -1670.6 676.1 -1648.5 671.1 -1694.2 753 -1595 730.5 -1595 507.4 " />
            <polygon class="st11" points="-1494.9 753 -1540.6 671.1 -1518.5 676.1 -1554.4 612 -1533.1 616.8 -1594.7 506.8 -1595 507.4 -1595 730.5 -1594.7 730.4 " />
        </g>
        <g id="baubles">
            <g id="blue-lt">
                <circle class="blue-lt baubles-g1" cx="-1575" cy="706.1" r="9" />
                <circle class="blue-lt baubles-g2" cx="-1621.3" cy="641" r="7" />
                <circle class="blue-lt" cx="-1665.5" cy="732.8" r="7" />
                <circle class="blue-lt baubles-g2" cx="-1600.3" cy="668.5" r="7" />
            </g>
            <g id="blue-dk">
                <circle class="blue-dk baubles-g1" cx="-1576.3" cy="570.8" r="7" />
                <circle class="blue-dk" cx="-1538" cy="718.6" r="7" />
                <circle class="blue-dk baubles-g2" cx="-1594.8" cy="610.3" r="7" />
            </g>
            <g id="red">
                <circle class="red baubles-g1" cx="-1635.6" cy="681.7" r="9" />
                <circle class="red" cx="-1570.3" cy="634" r="9" />
                <circle class="red baubles-g2" cx="-1607.3" cy="711.6" r="7" />
            </g>
            <g id="gold-lt">
                <circle class="yellow baubles-g1" cx="-1612.3" cy="585.8" r="9" />
                <circle class="yellow" cx="-1631.6" cy="705.6" r="7" />
            </g>
            <g id="gold-dk">
                <circle class="gold-dk" cx="-1572.3" cy="604.7" r="7" />
                <circle class="gold-dk baubles-g2" cx="-1561.3" cy="681.7" r="7" />
            </g>
        </g>
        <g id="gift">
            <path class="gift1" d="M-1496.5 783l-35 9.1c-0.3 0.1-0.7 0.1-1 0l-35-9.1c-0.9-0.2-1.5-1-1.5-1.9v-51.7c0-1 0.7-1.8 1.7-2l35-4.7c0.2 0 0.4 0 0.5 0l35 4.7c1 0.1 1.7 1 1.7 2V781C-1495.1 782-1495.7 782.7-1496.5 783z" />
            <path class="scarf1" d="M-1510.6 711.6c-9.8 0.4-15.8 10.4-17.9 13.4 -1.5-1.9-3.2-0.5-3.2-0.5 -1-5.2-16-19-24.7-11.6 -8.7 7.4-3 16-1 17.2 0.1 0.1 0.3 0.2 0.4 0.2 -0.3 0.2-0.4 0.5-0.4 0.8v54.6l10 2.6v-55.8l0 0c5.2 0.3 10.7-0.6 14-2.8l0.4 0.1 0 0c1.4 2 3.6 1.5 4.8 1l11.2 2.4c0.5 0.1 0.8 0.5 0.8 1v53.9l10.2-2.6v-53.3c0-0.3-0.2-0.7-0.5-0.8C-1499.5 727.4-1501.8 711.2-1510.6 711.6zM-1506.7 721.7c8.1 2.2-4.5 5.8-13.3 5.3l8.9-1.5 -8.3-1.1 -5.1 0.8C-1522 723.5-1514.9 719.5-1506.7 721.7zM-1557.5 724.5c0-1.6 2.2-3.6 7.3-3.5 5.8 0.1 17.5 3.1 16 3.4 -1.5 0.4-2.9 0.6-4.2 0.9l-5.5-1 -9.1 1.2 4.7 1C-1554.6 726.7-1557.5 725.5-1557.5 724.5z"
            />
        </g>

<div class="container--snowflakes">
        <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Layer_2" x="0" y="0" viewBox="-18 272 1243 258" xml:space="preserve">
            <style type="text/css">
                .st0 {
                    fill: #F0F8F1;
                }
            </style>
            <g id="stars1">
                <polygon class="st0" points="574 310.2 575.3 316 579.8 312.1 577.4 317.5 583.3 317 578.2 320 583.3 323 577.4 322.5 579.8 327.9 575.3 324 574 329.8 572.7 324 568.2 327.9 570.6 322.5 564.7 323 569.8 320 564.7 317 570.6 317.5 568.2 312.1 572.7 316 " />
                <polygon class="st0" points="815 410.2 816.3 416 820.8 412.1 818.4 417.5 824.3 417 819.2 420 824.3 423 818.4 422.5 820.8 427.9 816.3 424 815 429.8 813.7 424 809.2 427.9 811.6 422.5 805.7 423 810.8 420 805.7 417 811.6 417.5 809.2 412.1 813.7 416 " />
                <polygon class="st0" points="353 367.2 354.3 373 358.8 369.1 356.4 374.5 362.3 374 357.2 377 362.3 380 356.4 379.5 358.8 384.9 354.3 381 353 386.8 351.7 381 347.2 384.9 349.6 379.5 343.7 380 348.8 377 343.7 374 349.6 374.5 347.2 369.1 351.7 373 " />
                <polygon class="st0" points="97 290.2 98.3 296 102.8 292.1 100.4 297.5 106.3 297 101.2 300 106.3 303 100.4 302.5 102.8 307.9 98.3 304 97 309.8 95.7 304 91.2 307.9 93.6 302.5 87.7 303 92.8 300 87.7 297 93.6 297.5 91.2 292.1 95.7 296 " />
                <polygon class="st0" points="1088 470.2 1089.3 476 1093.8 472.1 1091.4 477.5 1097.3 477 1092.2 480 1097.3 483 1091.4 482.5 1093.8 487.9 1089.3 484 1088 489.8 1086.7 484 1082.2 487.9 1084.6 482.5 1078.7 483 1083.8 480 1078.7 477 1084.6 477.5 1082.2 472.1 1086.7 476 "
                />
                <polygon class="st0" points="1014 297.2 1015.3 303 1019.8 299.1 1017.4 304.5 1023.3 304 1018.2 307 1023.3 310 1017.4 309.5 1019.8 314.9 1015.3 311 1014 316.8 1012.7 311 1008.2 314.9 1010.6 309.5 1004.7 310 1009.8 307 1004.7 304 1010.6 304.5 1008.2 299.1 1012.7 303 "
                />
            </g>
            <g id="stars2">
                <polygon class="st0" points="548 429 549.5 433.4 553.4 430.7 552 435.2 556.7 435.3 552.9 438.1 556.7 440.9 552 441 553.4 445.5 549.5 442.8 548 447.2 546.5 442.8 542.6 445.5 544 441 539.3 440.9 543.1 438.1 539.3 435.3 544 435.2 542.6 430.7 546.5 433.4 "
                />
                <polygon class="st0" points="746 288 747.5 292.4 751.4 289.7 750 294.2 754.7 294.3 750.9 297.1 754.7 299.9 750 300 751.4 304.5 747.5 301.8 746 306.2 744.5 301.8 740.6 304.5 742 300 737.3 299.9 741.1 297.1 737.3 294.3 742 294.2 740.6 289.7 744.5 292.4 "
                />
                <polygon class="st0" points="940 451 941.5 455.4 945.4 452.7 944 457.2 948.7 457.3 944.9 460.1 948.7 462.9 944 463 945.4 467.5 941.5 464.8 940 469.2 938.5 464.8 934.6 467.5 936 463 931.3 462.9 935.1 460.1 931.3 457.3 936 457.2 934.6 452.7 938.5 455.4 "
                />
                <polygon class="st0" points="393 468 394.5 472.4 398.4 469.7 397 474.2 401.7 474.3 397.9 477.1 401.7 479.9 397 480 398.4 484.5 394.5 481.8 393 486.2 391.5 481.8 387.6 484.5 389 480 384.3 479.9 388.1 477.1 384.3 474.3 389 474.2 387.6 469.7 391.5 472.4 "
                />
                <polygon class="st0" points="279 274 280.5 278.4 284.4 275.7 283 280.2 287.7 280.3 283.9 283.1 287.7 285.9 283 286 284.4 290.5 280.5 287.8 279 292.2 277.5 287.8 273.6 290.5 275 286 270.3 285.9 274.1 283.1 270.3 280.3 275 280.2 273.6 275.7 277.5 278.4 "
                />
                <polygon class="st0" points="118 408 119.5 412.4 123.4 409.7 122 414.2 126.7 414.3 122.9 417.1 126.7 419.9 122 420 123.4 424.5 119.5 421.8 118 426.2 116.5 421.8 112.6 424.5 114 420 109.3 419.9 113.1 417.1 109.3 414.3 114 414.2 112.6 409.7 116.5 412.4 "
                />
            </g>
            <g id="stars3">
                <polygon class="st0" points="708.5 491.6 709.7 494.6 712.6 493.4 711.4 496.3 714.3 497.5 711.4 498.7 712.6 501.6 709.7 500.4 708.5 503.4 707.3 500.4 704.4 501.6 705.6 498.7 702.7 497.5 705.6 496.3 704.4 493.4 707.3 494.6 " />
                <polygon class="st0" points="670.5 389.6 671.7 392.6 674.6 391.4 673.4 394.3 676.3 395.5 673.4 396.7 674.6 399.6 671.7 398.4 670.5 401.4 669.3 398.4 666.4 399.6 667.6 396.7 664.7 395.5 667.6 394.3 666.4 391.4 669.3 392.6 " />
                <polygon class="st0" points="234.5 434.6 235.7 437.6 238.6 436.4 237.4 439.3 240.4 440.5 237.4 441.7 238.6 444.6 235.7 443.4 234.5 446.4 233.3 443.4 230.4 444.6 231.6 441.7 228.6 440.5 231.6 439.3 230.4 436.4 233.3 437.6 " />
                <polygon class="st0" points="462.5 349.6 463.7 352.6 466.6 351.4 465.4 354.3 468.4 355.5 465.4 356.7 466.6 359.6 463.7 358.4 462.5 361.4 461.3 358.4 458.4 359.6 459.6 356.7 456.6 355.5 459.6 354.3 458.4 351.4 461.3 352.6 " />
                <polygon class="st0" points="1162.5 349.6 1163.7 352.6 1166.6 351.4 1165.4 354.3 1168.3 355.5 1165.4 356.7 1166.6 359.6 1163.7 358.4 1162.5 361.4 1161.3 358.4 1158.4 359.6 1159.6 356.7 1156.7 355.5 1159.6 354.3 1158.4 351.4 1161.3 352.6 " />
                <polygon class="st0" points="889.5 306.6 890.7 309.6 893.6 308.4 892.4 311.3 895.3 312.5 892.4 313.7 893.6 316.6 890.7 315.4 889.5 318.4 888.3 315.4 885.4 316.6 886.6 313.7 883.7 312.5 886.6 311.3 885.4 308.4 888.3 309.6 " />
                <polygon class="st0" points="1007.5 519.7 1008.7 522.6 1011.6 521.4 1010.4 524.3 1013.3 525.5 1010.4 526.7 1011.6 529.6 1008.7 528.4 1007.5 531.3 1006.3 528.4 1003.4 529.6 1004.6 526.7 1001.7 525.5 1004.6 524.3 1003.4 521.4 1006.3 522.6 " />
            </g>
            <g id="stars4">
                <polygon class="st0" points="-7 480.2 -6.2 483.9 -3.3 481.4 -4.8 484.9 -1 484.6 -4.3 486.5 -1 488.4 -4.8 488.1 -3.3 491.6 -6.2 489.1 -7 492.8 -7.8 489.1 -10.7 491.6 -9.2 488.1 -13 488.4 -9.7 486.5 -13 484.6 -9.2 484.9 -10.7 481.4 -7.8 483.9 " />
                <polygon class="st0" points="31 353.2 31.8 356.9 34.7 354.4 33.2 357.9 37 357.6 33.7 359.5 37 361.4 33.2 361.1 34.7 364.6 31.8 362.1 31 365.8 30.2 362.1 27.3 364.6 28.8 361.1 25 361.4 28.3 359.5 25 357.6 28.8 357.9 27.3 354.4 30.2 356.9 " />
                <polygon class="st0" points="235 344.2 235.8 347.9 238.7 345.4 237.2 348.9 241 348.6 237.7 350.5 241 352.4 237.2 352.1 238.7 355.6 235.8 353.1 235 356.8 234.2 353.1 231.3 355.6 232.8 352.1 229 352.4 232.3 350.5 229 348.6 232.8 348.9 231.3 345.4 234.2 347.9 "
                />
                <polygon class="st0" points="577 503.2 577.8 506.9 580.7 504.4 579.2 507.9 583 507.6 579.7 509.5 583 511.4 579.2 511.1 580.7 514.6 577.8 512.1 577 515.8 576.2 512.1 573.3 514.6 574.8 511.1 571 511.4 574.3 509.5 571 507.6 574.8 507.9 573.3 504.4 576.2 506.9 "
                />
                <polygon class="st0" points="1000 389.2 1000.8 392.9 1003.7 390.4 1002.2 393.9 1006 393.6 1002.7 395.5 1006 397.4 1002.2 397.1 1003.7 400.6 1000.8 398.1 1000 401.8 999.2 398.1 996.3 400.6 997.8 397.1 994 397.4 997.3 395.5 994 393.6 997.8 393.9 996.3 390.4 999.2 392.9 "
                />
                <polygon class="st0" points="1217 442.2 1217.8 445.9 1220.7 443.4 1219.2 446.9 1223 446.6 1219.7 448.5 1223 450.4 1219.2 450.1 1220.7 453.6 1217.8 451.1 1217 454.8 1216.2 451.1 1213.3 453.6 1214.8 450.1 1211 450.4 1214.3 448.5 1211 446.6 1214.8 446.9 1213.3 443.4 1216.2 445.9 "
                />
            </g>
        </svg>

</div>

<svg id="robin" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 287.67 198.61">
        <defs>
            <style>
                .cls-1 {
                    fill: #634e3f;
                }
                .cls-2 {
                    fill: #202123;
                }
                .cls-3 {
                    fill: #42352c;
                }
                .cls-4 {
                    fill: #ea385c;
                }
            </style>
        </defs>
        <title>robin</title>
        <path id="body" class="cls-1" d="M235.69,107.9c-25.61,3.63-62.29-8.21-73-45.4C153.1,29.34,134.69,0,100.17,0a62.5,62.5,0,0,0-62.5,62.5c0,69,56,133.61,125,136,57.69,2,108.92-22,125-114C287.67,84.5,276.37,102.14,235.69,107.9Z" />
        <circle id="eye" class="cls-2" cx="91.46" cy="63.17" r="15.14" />
        <polygon id="beak" class="cls-2" points="40.91 90.13 45.08 67.73 39.92 45.34 0 67.73 40.91 90.13" />
        <path id="breast" class="cls-4" d="M44.19,103.38c13.14,40.79,45,75.19,84.84,88.86,4.26-17.4-.85-39.91-15.21-59.41C94.52,106.61,65.06,94.72,44.19,103.38Z" />
        <path id="wing" class="cls-3" d="M268.46,127.43c-11.47,33-49,50.94-91.8,45.34-23.45-3.07-42.82-19.17-42.82-42.82a42.82,42.82,0,0,1,42.82-42.82c25.75,0,37.58,14.5,57,26.86C255.58,128,268.46,127.43,268.46,127.43Z" />
    </svg>

</div>

Source: http://bradfrost.com/blog/post/atomic-design-in-one-gif/

编辑器支持Emmet

快捷键

Source: http://bradfrost.com/blog/post/atomic-design-in-one-gif/

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

HTML5 Canvas 粒子化（电流）404页面动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：