使用Snap.svg制作的一组动物变形动画

Animals SVG line animations with Snap.svg

svg, animal, morph

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

function animateSVG(section, dashedId, normalId, totalLengthTimes, totalLengthDivision) {

$(section + " .description").css({
            'opacity': 0
        });
        $(section + " .description").removeClass("fadeInUpc");

$(dashedId).css({
            'opacity': 1
        });
        $(normalId).css({
            'opacity': 0
        });

var dashedSvg = Snap.select(dashedId),
            dashedPath = dashedSvg.select("path");
        var totalLength = Snap.path.getTotalLength(dashedPath.attr("d"));
        var normalSvg = Snap.select(normalId);

dashedPath.attr({
            'stroke-dashoffset': totalLength,
            'stroke-dasharray': totalLength
        });

Snap.animate(totalLength * totalLengthTimes, totalLength / totalLengthDivision, function(value) {
            dashedPath.attr({
                'stroke-dashoffset': value
            });
        }, 2000);

setTimeout(function() {

dashedSvg.animate({
                opacity: 0
            }, 400, mina.easeinout);

normalSvg.animate({
                opacity: 1
            }, 400, mina.easeinout);

}, 2000);

setTimeout(function() {

$(section + " .description").addClass("fadeInUpc");

}, 2500);

}

$(".restart").click(function() {
        $(".restart").addClass("patient");
        animate();
    });

function animate() {

$(".restart").fadeOut(1000);

$(".section--fifth").addClass("fadeOutUpc");
        $(".section--first").removeClass("fadeOutUpc");

animateSVG(".section--first", "#lion-dashed", "#lion", 1.1, 1.5);

setTimeout(function() {
            $(".section--first").addClass("fadeOutUpc");
            $(".section--second").removeClass("fadeOutUpc");
            animateSVG(".section--second", "#shark-dashed", "#shark", 1.1, 1.4);

}, 3000);

setTimeout(function() {
            $(".section--second").addClass("fadeOutUpc");
            $(".section--third").removeClass("fadeOutUpc");
            animateSVG(".section--third", "#giraffe-dashed", "#giraffe", 1.1, 1.4);

}, 6000);

setTimeout(function() {
            $(".section--third").addClass("fadeOutUpc");
            $(".section--forth").removeClass("fadeOutUpc");
            animateSVG(".section--forth", "#donkey-dashed", "#donkey", 1.1, 1.7);

}, 9000);

setTimeout(function() {
            $(".section--forth").addClass("fadeOutUpc");
            $(".section--fifth").removeClass("fadeOutUpc");
            animateSVG(".section--fifth", "#cow-dashed", "#cow", 1.05, 1.6);

}, 12000);

setTimeout(function() {
            $(".restart").removeClass("patient");
            $(".restart").fadeIn(1000);

}, 16000);

}

animate();

});

编译

CSS

html,
body {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 100%;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
}
.section {
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    position: absolute;
    display: table;
    text-align: center;
}
.section--first {
    background-color: #e74c3c;
    z-index: 5;
}
.section--second {
    background-color: #344bc4;
    z-index: 4;
}
.section--third {
    background-color: #f0d74c;
    z-index: 3;
}
.section--forth {
    background-color: #00a6a8;
    z-index: 2;
}
.section--fifth {
    background-color: #8703cc;
}
.wrapper {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 30px 30px 30px;
}
.animal {
    margin: 0 auto;
    max-width: 1300px;
    position: relative;
}
.animal-svg--dashed {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.animal-svg {
    max-width: 30%;
}
.description {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 20px;
    opacity: 0;
}
#lion-dashed,
#lion {
    opacity: 0;
}
.restart {
    z-index: 6;
    position: absolute;
    left: 30px;
    top: 30px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 20px;
    transition: all 1s ease-in-out;
    display: none;
    cursor: pointer;
}
.restart:hover {
    color: #4f0079;
}
.patient {
    pointer-events: none;
}
/* media queries */

@media (max-width: 768px) {
    .description {
        font-size: 20px;
    }
    .animal-svg {
        max-width: 20%;
    }
}
@media (max-height: 800px) {
    .animal-svg {
        max-width: 20%;
    }
}
@media (max-height: 500px) {
    .animal-svg {
        max-width: 15%;
    }
}
@media (max-height: 300px) {
    .animal-svg {
        max-width: 10%;
    }
}
.fadeInUpc {
    animation: fadeInUpc ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    
    -webkit-animation: fadeInUpc ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    
    -moz-animation: fadeInUpc ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    
    -o-animation: fadeInUpc ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    
    -ms-animation: fadeInUpc ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
}
@keyframes fadeInUpc {
    0% {
        opacity: 0;
        transform: translate(0px, 25px);
    }
    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}
@-moz-keyframes fadeInUpc {
    0% {
        opacity: 0;
        -moz-transform: translate(0px, 25px);
    }
    100% {
        opacity: 1;
        -moz-transform: translate(0px, 0px);
    }
}
@-webkit-keyframes fadeInUpc {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px, 25px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
    }
}
@-o-keyframes fadeInUpc {
    0% {
        opacity: 0;
        -o-transform: translate(0px, 25px);
    }
    100% {
        opacity: 1;
        -o-transform: translate(0px, 0px);
    }
}
@-ms-keyframes fadeInUpc {
    0% {
        opacity: 0;
        -ms-transform: translate(0px, 25px);
    }
    100% {
        opacity: 1;
        -ms-transform: translate(0px, 0px);
    }
}
.fadeOutDownc {
    animation: fadeOutDownc ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    
    -webkit-animation: fadeOutDownc ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    
    -moz-animation: fadeOutDownc ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    
    -o-animation: fadeOutDownc ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    
    -ms-animation: fadeOutDownc ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
}
@keyframes fadeOutDownc {
    0% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        transform: translate(0px, 35px);
    }
}
@-moz-keyframes fadeOutDownc {
    0% {
        opacity: 1;
        -moz-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(0px, 35px);
    }
}
@-webkit-keyframes fadeOutDownc {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0px, 35px);
    }
}
@-o-keyframes fadeOutDownc {
    0% {
        opacity: 1;
        -o-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -o-transform: translate(0px, 35px);
    }
}
@-ms-keyframes fadeOutDownc {
    0% {
        opacity: 1;
        -ms-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -ms-transform: translate(0px, 35px);
    }
}
.fadeOutUpc {
    animation: fadeOutUpc ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    
    -webkit-animation: fadeOutUpc ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    
    -moz-animation: fadeOutUpc ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    
    -o-animation: fadeOutUpc ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    
    -ms-animation: fadeOutUpc ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
}
@keyframes fadeOutUpc {
    0% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        transform: translate(0px, -35px);
    }
}
@-moz-keyframes fadeOutUpc {
    0% {
        opacity: 1;
        -moz-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(0px, -35px);
    }
}
@-webkit-keyframes fadeOutUpc {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0px, -35px);
    }
}
@-o-keyframes fadeOutUpc {
    0% {
        opacity: 1;
        -o-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -o-transform: translate(0px, -35px);
    }
}
@-ms-keyframes fadeOutUpc {
    0% {
        opacity: 1;
        -ms-transform: translate(0px, 0px);
    }
    100% {
        opacity: 0;
        -ms-transform: translate(0px, -35px);
    }
}

HTML

<div class="restart">Run again</div>

<div class="section section--first">
    <div class="wrapper">
        <div class="animal">
            <svg id="lion-dashed" xmlns="https://www.w3.org/2000/svg" class="animal-svg animal-svg--dashed" viewBox="0 0 107.633 105.034">
                <path id="lion--dashed--path" d="M104.883 77.057c-.998-1.624-2.253-2.974-3.632-3.98l-.018.129c-.128.631-.966 1.053-1.794 1.11 1.363.813 2.627 2.081 3.612 3.681 1.574 2.56 2.151 5.502 1.509 7.682-.901 3.045-4.555 4.853-7.568 4.805-.824-.013-1.94.044-2.95.409-.099.907-.234 1.788-.412 2.618.876-.544 1.849-.796 3.078-.925 1.801-.187 4.515-.235 6.379-1.489 1.659-1.119 2.951-2.398 3.587-4.546.822-2.782.154-6.331-1.791-9.494zm-7.273-3.538l.195.065-.176-.211-.019.146zm3.623-.314l.018-.129c.373-2.281-1.216-5.689-1.741-5.42-.443.226.323 1.919-.381 2.53-.285.249-1.316-1.664-1.686-1.475-.369.188.408 2.126.149 2.26-.259.131-1.563-1.54-1.932-1.351-.275.142.944 2.456 1.969 3.752l.176.211c.279.327.535.564.73.632.272.096.587.123.903.1.83-.057 1.667-.479 1.795-1.11zm-7.605 10.262c-2.131-9.222-2.406-16.976-18.154-25-2.38 1.681-5.473 2.313-8.476 1.468l-.334.454c2.96 4.355 1.924 10.278-2.406 13.389-4.316 3.1-10.313 2.257-13.597-1.84l-.571.184c-.222 5.221-4.572 9.387-9.908 9.387-1.262 0-2.464-.238-3.575-.664 1.134 5.268 2.829 11.631 3.427 16.335-3.54.486-3.88 5.282-2.898 6.586.853 1.137 5.513.65 6.912.518 5.002-.471 3.352-16.03 6.002-18.074 1.525-1.178 3.261.147 3.498 2.301.399 3.603.638 6.35.965 8.583-1.773.313-1.941 4.486-.89 5.466 1.203 1.122 5.514 1.4 6.692.815 2.95-1.457 3.793-8.663 5.426-12.702l-.033.079s-.099-10.115 6.908-8.157c7.006 1.959 6.036 11.1 2.578 15.076.106 1.468-8.575.92-5.692 5.818.994 1.688 19.354 1.225 20.57-1.085.311-.594 2.509-4.017 3.559-8.893.178-.83.313-1.711.412-2.618.244-2.29.192-4.796-.415-7.426zm-25.153 4.394c-.218.022-.438.06-.661.133.223-.073.443-.11.661-.133zm1.438.192c-.198-.075-.4-.133-.605-.169.205.036.406.094.605.169zm-2.413.08l-.105.072.105-.072zm3.021.22c-.15-.091-.303-.167-.459-.235.155.068.309.144.459.235zm1.805 1.686c-.135-.177-.273-.344-.415-.505.142.161.281.328.415.505zm-1.093-1.182c-.179-.152-.364-.285-.552-.408.188.123.373.256.552.408zm1.628 1.951c-.146-.231-.297-.455-.455-.666.157.211.308.434.455.666zm-5.656-2.471l-.118.109.118-.109zm6.994 5.177l.166.461-.086-.259-.08-.202zm-7.536-4.594l-.114.169.114-.169zm4.63-.005c.161.142.318.296.472.46-.154-.164-.31-.318-.472-.46zm2.011 2.649c-.108-.199-.219-.392-.335-.58.116.189.227.381.335.58zm-4.645-3.713c.172-.008.342-.002.511.021-.169-.023-.338-.029-.511-.021zm-2.704 2.321l-.105.239.105-.239zm.46-.881l-.113.195.113-.195zm-.235.418l-.109.222.109-.222zm.629-.967l.118-.141-.118.141zm8.286 8.077l-.054-.291.054.291zm-.417-1.861l-.12-.4.12.4zm-.558-1.643c-.093-.237-.191-.472-.295-.703.104.232.203.467.295.703zm.802 2.596l-.089-.37.089.37zm-1.143-3.401c-.118-.262-.246-.517-.377-.767.132.25.259.505.377.767zm-1.164-9.917c-7.007-1.958-6.908 8.157-6.908 8.157l.033-.079.109-.26.105-.239.116-.241.109-.222.122-.223.113-.195.134-.202.114-.169.146-.178.118-.141.161-.155.118-.109.19-.132.105-.072c.102-.058.206-.104.313-.139.224-.073.443-.11.661-.133l.185-.011c.172-.008.342-.002.511.021l.138.013c.205.036.407.094.605.169l.149.064c.156.068.309.145.459.235l.161.097c.188.123.373.256.552.408l.061.058c.161.142.318.296.472.46l.146.159c.142.161.28.328.415.505l.08.103c.158.211.309.435.455.666l.108.177c.116.188.227.381.335.58l.098.179c.131.25.259.505.377.767l.045.103c.104.231.203.466.295.703l.079.198.079.202.086.259.194.583.12.4.154.583.089.37.119.617.054.291c.044.295.079.581.098.85 3.458-3.978 4.428-13.118-2.578-15.077zm-22.526-10.472l.571-.184c3.284 4.097 9.281 4.939 13.597 1.84 4.33-3.11 5.366-9.033 2.406-13.389l.334-.454c3.003.845 6.096.213 8.476-1.468 1.665-1.175 2.983-2.86 3.664-4.932 1.662-5.053-1.054-10.472-6.08-12.252l.001-.151-.003-.362c5.027-1.781 7.743-7.201 6.081-12.253-1.651-5.023-7.017-7.821-12.114-6.4.561 2.884-.423 5.997-2.092 7.007-.249.15-.005.583-.012.87 3.495 4.005 5.544 6.87 5.542 12.123-.001 2.154-1.183 4.991-3.215 7.973-.368.541 3.27 2.856 2.845 3.404-.379.492-4.396-1.274-4.816-.781-.255.299 2.593 2.519 2.229 2.926-.448.503-4.117-.802-4.472-.437-.435.449 2.518 2.283 2.053 2.722-.498.471-4.416-.455-4.944 0-5.738 4.949-13.193 8.883-20.564 8.883-7.45 0-14.983-3.912-20.742-8.881-.394-.339-3.987.592-4.363.244-.425-.396 2.366-2.071 1.965-2.474-.452-.453-3.809.568-4.228.106-.345-.378 2.242-2.237 1.918-2.619-.387-.459-3.588.771-3.939.312-.408-.534 2.041-2.759 1.684-3.289-2-2.975-3.163-5.845-3.162-8.108.002-5.672 2.393-8.891 6.413-13.06-5.419-3.676.332-11.098 3.715-12.082 5.335-1.551 9.783 3.102 11.146 4.4 1.099.601 5.34-1.945 9.61-1.943 4.578.001 9.29 3.015 10.721 2.231.7-1.016 6.277-6.565 12.105-4.77 2.468.76 3.832 2.531 4.415 4.509 2.734-4.326 1.664-10.064-2.576-13.108-4.375-3.142-10.478-2.234-13.731 2.007l-.432-.139c-.107-5.32-4.505-9.601-9.914-9.601s-9.806 4.28-9.914 9.601l-.432.139c-3.252-4.242-9.354-5.15-13.731-2.008-4.367 3.136-5.384 9.135-2.33 13.5l-.282.379c-5.143-1.521-10.6 1.289-12.268 6.362-1.661 5.053 1.054 10.474 6.082 12.254l-.002.363.001.15c-5.026 1.779-7.742 7.2-6.081 12.252 1.654 5.03 7.035 7.835 12.14 6.398l.333.454c-2.96 4.355-1.924 10.279 2.406 13.391 4.317 3.098 10.315 2.257 13.598-1.84l.572.184c.168 3.986 2.749 7.353 6.333 8.723 1.11.426 2.313.664 3.575.664 5.336.001 9.686-4.165 9.908-9.386zm12.33-55.247c-5.828-1.796-11.405 3.754-12.105 4.77-1.704 4.031-5.827 15.747-6.516 22.294 1.399.313 1.706.828 1.57 1.58 3.338 1.657 4.681 4.95 4.68 8.747-.002 5.461-4.748 8.349-10.418 8.348-5.672-.003-10.122-2.894-10.12-8.353.001-3.624 1.23-6.783 4.244-8.504-.085-.208-.107-.408-.049-.591.253-.784.748-1.229 1.925-1.444-.839-6.511-2.573-15.218-5.647-22.364-1.363-1.299-5.81-5.951-11.146-4.4-3.384.983-9.135 8.406-3.715 12.082-4.02 4.168-6.41 7.387-6.413 13.06 0 2.264 1.162 5.133 3.162 8.108.357.53-2.092 2.754-1.684 3.289.351.459 3.553-.771 3.939-.312.323.382-2.264 2.241-1.918 2.619.419.462 3.776-.559 4.228-.106.401.402-2.39 2.078-1.965 2.474.376.348 3.97-.583 4.363-.244 5.759 4.969 13.292 8.881 20.742 8.881 7.372 0 14.826-3.934 20.564-8.883.528-.455 4.446.471 4.944 0 .464-.438-2.488-2.273-2.053-2.722.354-.365 4.023.94 4.472.437.363-.407-2.484-2.627-2.229-2.926.42-.493 4.437 1.273 4.816.781.424-.548-3.213-2.863-2.845-3.404 2.032-2.982 3.214-5.819 3.215-7.973.001-5.253-2.048-8.118-5.542-12.123.007-.287-.236-.719.012-.87 1.668-1.011 2.653-4.123 2.092-7.007-.048-.248-.118-.49-.189-.733-.582-1.981-1.946-3.751-4.414-4.511zm-34.498 31.198c-.394 3.091-3.194 5.275-6.255 4.879-3.06-.396-5.223-3.224-4.831-6.316.328-2.573 2.325-4.513 4.75-4.864-.264-.38-.448-.822-.5-1.316-.16-1.552.956-2.94 2.493-3.102 1.536-.163 2.912.964 3.072 2.515.115 1.117-.436 2.144-1.325 2.695 1.8 1.131 2.884 3.248 2.596 5.509zm23.515 0c-.287-2.262.797-4.378 2.596-5.509-.889-.552-1.442-1.578-1.325-2.695.161-1.551 1.536-2.677 3.073-2.515 1.536.162 2.652 1.55 2.492 3.102-.052.494-.235.936-.5 1.316 2.426.351 4.423 2.291 4.75 4.864.393 3.092-1.77 5.92-4.83 6.316-3.063.396-5.863-1.787-6.256-4.879zm-11.121-4.478c1.582.055 2.7.169 3.483.343.688-6.547 4.812-18.263 6.516-22.294-1.431.784-6.143-2.229-10.721-2.231-4.27-.002-8.512 2.543-9.61 1.943 3.074 7.146 4.809 15.853 5.647 22.364.989-.182 2.458-.203 4.685-.125zm-.083 5.508l-.262 5.794c.642.601 2.333.853 3.121.615 2.543-.768 2.772-2.773 2.936-2.917.219-.194.801.067.638.257-.119.14-.408 2.371-3.188 3.298-1.003.335-3.35.14-3.94-.443-.696.525-2.982.61-3.959.191-2.376-1.021-2.694-3.162-2.8-3.49-.104-.318.455-.444.598-.218.104.167.459 2.27 2.758 3.099.764.274 2.487.09 3.039-.44l.256-5.696c-1.565-.115-5.095-1.979-5.675-3.398-3.014 1.721-4.243 4.88-4.244 8.504-.002 5.459 4.447 8.35 10.12 8.353 5.67.001 10.416-2.887 10.418-8.348.001-3.797-1.341-7.09-4.68-8.747-.023.128-.056.261-.103.403-.407 1.267-3.184 2.853-5.033 3.183zm-4.601-5.383c-1.178.215-1.672.66-1.925 1.444-.059.184-.037.383.049.591.58 1.419 4.11 3.283 5.675 3.398l-.256 5.696c-.552.53-2.275.715-3.039.44-2.298-.829-2.654-2.931-2.758-3.099-.143-.227-.703-.1-.598.218.106.328.424 2.469 2.8 3.49.977.419 3.263.334 3.959-.191.59.583 2.937.778 3.94.443 2.78-.927 3.069-3.159 3.188-3.298.163-.19-.419-.451-.638-.257-.164.144-.393 2.149-2.936 2.917-.789.237-2.479-.015-3.121-.615l.262-5.794c1.849-.33 4.626-1.917 5.034-3.182l.103-.403c.136-.751-.171-1.267-1.57-1.58-.784-.174-1.902-.288-3.483-.343-2.229-.078-3.698-.057-4.686.125zm26.89 2.916c-.327-2.573-2.324-4.513-4.75-4.864-.564.813-1.526 1.31-2.573 1.2-.43-.045-.821-.193-1.167-.407-1.798 1.131-2.882 3.247-2.596 5.509.394 3.091 3.193 5.275 6.256 4.879 3.06-.397 5.223-3.224 4.83-6.317zm-4.75-4.864c.264-.38.448-.822.5-1.316.161-1.552-.956-2.94-2.492-3.102-1.537-.163-2.912.964-3.073 2.515-.117 1.117.437 2.144 1.325 2.695.346.214.737.362 1.167.407 1.047.111 2.009-.386 2.573-1.199zm-32.445.792c-.346.214-.737.362-1.166.407-1.048.11-2.01-.386-2.574-1.2-2.426.351-4.423 2.291-4.75 4.864-.393 3.092 1.771 5.92 4.831 6.316 3.062.396 5.862-1.788 6.255-4.879.287-2.26-.797-4.377-2.596-5.508zm-1.166.408c.429-.045.82-.193 1.166-.407.889-.551 1.44-1.578 1.325-2.695-.16-1.551-1.536-2.677-3.072-2.515-1.538.162-2.653 1.55-2.493 3.102.052.494.236.936.5 1.316.563.812 1.525 1.309 2.574 1.199z"
                stroke="#fff" stroke-miterlimit="10" fill="none" />
            </svg>

</div>
</div>

<div class="section section--second">
    <div class="wrapper">
        <div class="animal">
            <svg id="shark-dashed" class="animal-svg animal-svg--dashed" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 83.711 105.034">
                <path d="M68.917 87.169l-.157.31.157-.31zm.274-.741l-.115.319.115-.319zm-.636 1.446l-.188.295.188-.295zm.513-4.813l.078.286-.078-.286zm.292 2.588l-.066.319.066-.319zm.047-.819l-.017.318.017-.318zm-.092-.861l.035.316-.035-.316zm-57.33-20.57c-.457-.45-1.116-1.125-1.893-1.985.287 2.174 1.15 5.827 1.392 6.658.132.453.27.903.396 1.357l.334 1.219c.249.886.519 1.769.872 2.617.339.817 1.883 5.379 3.396 6.289.749.451 2.331 1.24 2.538.395.822-3.361 1.912-6.123 3.045-8.355-3.992-2.412-7.342-5.289-10.08-8.195zm-7.096-39.935c1.915 0 3.467-1.438 3.467-3.21 0-1.773-1.621-3.614-3.467-3.21-1.872.409-3.466 1.437-3.466 3.21 0 1.772 1.552 3.21 3.466 3.21zm7.868-11.702c.83-1.197 1.196-2.592.305-3.573-.892-.981-2.473-.972-3.533.021-1.059.994-1.196 2.594-.305 3.574.893.981 2.715 1.159 3.533-.022zm-8.562-6.176c1.411-.303 2.615-1.071 2.62-2.406.006-1.335-1.158-2.421-2.599-2.428-1.443-.006-2.615 1.071-2.621 2.406-.005 1.334 1.21 2.726 2.6 2.428zm35.469 59.481c-5.066-2.347-9.073-4.388-12.415-6.354-.767.935-1.669 1.813-2.749 2.561-3.523 2.437-11.851 2.766-11.851 2.766s-.254-.235-.665-.64c2.738 2.906 6.088 5.783 10.08 8.194 1.199.724 2.452 1.409 3.768 2.037 7.148 3.409 14.653 4.268 21.461 4.834-2.382-7.916-6.169-12.022-7.629-13.398zm28.891 22.807l.206-.396.157-.31.159-.422.115-.319.102-.459.066-.319c.022-.163.023-.333.03-.501l.017-.318c-.004-.178-.034-.362-.057-.545l-.035-.316c-.039-.202-.105-.413-.169-.622l-.078-.286c-.11-.31-.249-.627-.419-.953-1.848-3.537-6.356-6.372-14.133-10.151-.202.677-.418 1.353-.69 2.005-.246.592-1.125 3.146-2.166 4.858 5.789.489 10.831 1.139 14.356 3.582 2.572 1.781 2.338 4.906 2.141 6.086l.209-.318.189-.296zm-50.164-35.447c-2.018-1.761-3.855-3.646-5.753-5.798-5.488-6.218-6.346-7.584-7.689-10.417-.295-.622-2.316-5.964-2.492-6.416-.455-1.172-1.49-1.609-1.49-1.609-.126 4.093.375 16.417 1.31 20.147.612.364 7.554 4.439 11.576 4.366 1.637-.03 3.145-.128 4.538-.273zm29.686-19.42c1.907 1.253 3.826 2.49 5.756 3.704.145-.08.283-.143.42-.197-.221-.527-.447-1.053-.677-1.577l-.643-1.459-.859-.721c-2.433-2.056-4.81-4.188-7.004-6.506l.835-.099c.667.693 1.349 1.369 2.045 2.03 1.418 1.347 2.884 2.638 4.375 3.902-.837-1.951-1.618-3.922-2.169-5.98l.711.075c.239.867.519 1.722.829 2.566.535 1.458 1.151 2.881 1.777 4.301.692.577 1.388 1.148 2.085 1.716l.738.601c-.235-.803-.519-1.592-.813-2.358-.811-2.114-1.797-4.223-2.35-6.435l.746.181c.367 1.337.887 2.638 1.403 3.921.653 1.627 1.349 3.317 1.795 5.028-.375.17-.707.261-1.006.354-.664-.538-1.326-1.079-1.986-1.621.276.627.549 1.255.814 1.888.66-.149 1.399-.237 2.556-.763-.081-.88-.146-1.852-.181-2.728-.053-1.339-.066-2.68-.079-4.021-.296-.338-.596-.674-.903-1.003l-.399-.421c-2.716-1.012-5.583-1.438-7.94-1.38-4.186.103-7.155 1.113-8.359 1.602l.282-.107c2.719 1.858 5.449 3.7 8.201 5.507zm32.857 41.579c-.209-.222-.432-.403-.659-.554-.279-2.522-1.1-5.214-2.621-8.063-8.069-15.107-22.063-25.974-25.406-27.9.557-.613 1.001-.991 1.403-1.246-.141.083-.285.177-.437.296-2.05-1.291-4.083-2.606-6.105-3.94-2.678-1.765-5.335-3.562-7.983-5.373l-.128.061s-3.976-2.871-12.233-5.667c-11.176-3.78-25.799 5.986-25.799 5.986s1.035.438 1.49 1.609c.176.452 2.197 5.794 2.492 6.416 1.343 2.833 2.201 4.199 7.689 10.417 1.898 2.152 3.735 4.037 5.753 5.798 6.339-.658 10.187-2.312 11.878-3.214.126-.067.226-.097.326-.127l.066-.026.093-.015.1.01c.25.022.359.232.284.676-.318 1.884-1.267 5.783-3.89 8.982 3.341 1.966 7.348 4.007 12.415 6.354 1.46 1.376 5.247 5.482 7.63 13.398.21.699.412 1.421.599 2.181.208.846 1.789.057 2.538-.394.417-.251.835-.782 1.23-1.433 1.041-1.712 1.919-4.267 2.166-4.858.272-.652.488-1.328.69-2.005 7.777 3.779 12.286 6.614 14.133 10.151.17.326.309.644.419.953l.078.286c.064.209.131.42.169.622l.035.316c.023.183.053.367.057.545l-.017.318c-.007.168-.008.338-.03.501l-.066.319-.102.459-.115.319-.159.422-.157.31-.206.396-.188.295-.209.318c-1.257 1.798-3.146 3.245-4.14 4.544-1.205 1.571-1.756 2.865-2.009 3.716-1.848.431-3.285 1.281-4.401 2.271.205.895.417 1.788.61 2.685l-.537.331c-.18-.85-.379-1.693-.575-2.539-1.62 1.642-2.448 3.535-2.807 4.57-.167.481-.072.621.216.368 1.062-.938 3.843-3.21 6.593-3.994-.022-1.137.02-2.273.029-3.409l.597-.181c-.007 1.145-.047 2.3-.026 3.444.547-.11 1.089-.161 1.61-.112 1.13.104 2.206.253 3.217.427.479-1.041 1.302-1.875 2.177-2.658-.297-.442-.601-.882-.911-1.313.3.05.587.108.861.175l.505.738.504-.438c.217.078.426.161.626.248l-.797.689.172.267.374.584c.307-.405.622-.804.946-1.195.185.103.361.209.528.319-.317.383-.623.772-.924 1.168l-.202.267c.247.403.489.811.726 1.22.83-.266 1.681-.456 2.549-.517.297.449.514.886.673 1.271-.088.38-.224.751-.384 1.11l-.573-.207.193-.469c.128-.347.235-.742.264-1.107-.824.049-1.628.22-2.413.461l.328.596-.813-.234-.094-.168-.227.08-1.006-.254c.306-.129.615-.25.926-.364-.175-.3-.352-.602-.533-.898-.282.384-.559.77-.833 1.158l-.639-.141c.369-.531.742-1.061 1.125-1.581-.203-.323-.41-.646-.619-.966-.412.369-.809.752-1.165 1.177-.289.347-.539.698-.736 1.093 3.363.628 5.91 1.513 7.025 1.941.404.155.594.012.491-.369-.43-1.589-2.188-5.706-8.894-5.874.207-.1.41-.204.604-.314 5.189-2.924 12.147-8.706 13.698-16.776 1.675.954 2.263 1.933 2.643 1.74.257-.128.929-3.628-1.775-6.479zm-73.894-44.252c.289-.166.657-.097.875.144l.026.005c.418.114.771.369 1.104.638.298.241.568.517.799.825.377.503.818 1.231.56 1.888-.167.425-.472.704-.905.838-.379.118-.856.141-1.234.003-.399-.144-.739-.393-.944-.778-.156-.297-.238-.62-.284-.952l-.103-.983-.032-.207-.045-.208-.031-.107-.057-.123c-.19-.341-.068-.79.271-.983zm44.057 26.217c.111-.195.216-.393.312-.595l.157-.347.006-.013.043-.114c.158-.419.29-.849.382-1.289.105-.501.663-.793 1.131-.667.506.137.763.65.657 1.15-.209.985-.593 1.952-1.09 2.822-.252.443-.831.595-1.266.338-.436-.258-.584-.841-.332-1.285zm-3.84-.771c.51-.727 1.063-1.431 1.469-2.227l.161-.337.041-.111c.065-.188.12-.38.153-.577l.007-.123-.004-.25-.003-.017-.029-.124-.043-.141c-.184-.458-.09-.982.368-1.243.408-.234 1.054-.111 1.26.357.941 2.134-.618 4.085-1.781 5.74-.293.417-.8.614-1.266.338-.407-.24-.627-.868-.333-1.285zm-4.94-.8c.068-.266.229-.424.439-.577l.069-.053.027-.022.226-.189.374-.358c.128-.133.251-.271.366-.415l.049-.067.122-.179c.177-.271.333-.556.461-.853l.037-.098.068-.199.127-.457c.04-.171.074-.344.099-.519l.009-.077.017-.214c.021-.327.021-.654-.004-.981l-.025-.277-.008-.063-.005-.032-.09-.505c-.074-.345-.167-.685-.276-1.019-.16-.486.195-1.023.659-1.147.511-.136.971.184 1.129.67.495 1.514.663 3.194.259 4.75-.193.744-.509 1.478-.951 2.105-.514.728-1.116 1.314-1.831 1.837-.41.299-1.034.052-1.261-.358-.116-.212-.149-.467-.086-.703zm-11.988-15.382l.167-.396c-.842.085-1.732-.08-2.539-.559-1.927-1.143-2.638-3.55-1.588-5.377 1.051-1.827 3.464-2.381 5.391-1.238 1.86 1.103 2.57 3.379 1.675 5.179.382-.015.772.022 1.159.145 1.795.573 2.797 2.506 2.237 4.319-.56 1.813-2.47 2.818-4.266 2.246-1.795-.573-2.796-2.507-2.236-4.319zm25.249 63.943c-.219-.296-.441-.591-.669-.88l.294-.577c.287.359.562.726.835 1.097l-.46.36zm4.563-2.779c-.352-.925-.746-1.852-1.236-2.711l.517-.308.243.444c.4.768.732 1.561 1.036 2.365-.188.063-.375.134-.56.21zm4.155-.489c-.794-1.15-1.602-2.295-2.348-3.479l.075-.02c.055-.192.127-.407.218-.644.896 1.449 1.891 2.831 2.852 4.238l-.797-.095zm-8.161-72.793c.426.162.844.346 1.258.538-.414-.194-.833-.373-1.258-.538zm1.346 71.649l.019-.018-.019.018zm4.045-66.14l-.54.404-1.538-1.868c-.521-.648-1.044-1.294-1.579-1.93.012 1.031.029 2.063.069 3.092.032.818.093 1.732.162 2.553.22-.117.452-.248.7-.397 2.15-1.294 3.972-2.75 3.972-2.75-1.304-1.636-3.027-2.905-4.916-3.853l.003.306c1.222 1.412 2.487 2.994 3.667 4.443zm-28.96 10.928c1.796.572 3.706-.433 4.266-2.246.561-1.813-.441-3.746-2.237-4.319-.387-.123-.777-.16-1.159-.145l-.088.198c-.61 1.062-1.684 1.678-2.852 1.797-.059.13-.124.255-.167.396-.56 1.812.441 3.746 2.237 4.319zm-20.581 19.482c.41.405.665.64.665.64s8.327-.329 11.851-2.766c1.08-.747 1.982-1.625 2.749-2.561 2.623-3.199 3.572-7.098 3.89-8.982.075-.443-.035-.654-.284-.676.207.042.362.243.23.575-.368.927-1.693 3.888-2.404 4.413-.152.112-.339.077-.48-.028-.298-.22-.53-.513-.75-.809l-.29-.379c-.326.996-.37 2.63-1.006 3.513-.098.136-.33.181-.471.097-.842-.503-1.442-1.89-2.158-2.541-.202.644-.389 3.898-1.218 4.726-.166.165-.369.173-.556.04-.673-.48-1.736-3.058-2.232-3.693-.364.775-1.23 5.292-1.467 5.532-.236.239-.52.199-.806.094-.71-.261-2.353-4.66-2.701-5.075-.117.203-1.574 4.499-2.143 5.13-.133.147-.408.205-.556.041-.692-.771-2.544-5.344-2.858-6.088-.388.453-.716.961-1.009 1.479-.318.561-.591 1.146-.834 1.744 1.032 1.387 2.058 2.604 2.947 3.589.775.86 1.434 1.535 1.891 1.985zm-4.668-7.751c.422-.721.889-1.44 1.499-2.014.226-.212.54-.162.669.129.72 1.62 1.635 3.83 2.605 6.001.37-.537 1.856-4.733 1.983-5.108.086-.252.436-.274.612-.125.504.428 2.764 5.301 2.854 5.329.184-.333 1.162-4.94 1.517-5.791.096-.23.435-.299.611-.125.615.609 1.678 3.278 2.304 3.868.744-.887.451-3.858 1.197-4.749.146-.174.386-.171.555-.041.727.561 1.289 1.949 2.021 2.5.496-.903.48-2.605.898-3.544.081-.184.351-.296.528-.183.544.353.837.937 1.28 1.381.394-.479 1.444-3.11 1.929-3.901.058-.094.135-.152.217-.19-.1.031-.2.06-.326.127-1.692.902-5.54 2.557-11.878 3.214-1.393.145-2.901.243-4.537.273-4.022.074-10.964-4.001-11.576-4.366l-.061-.036c.814 3.147 2.555 6.204 4.384 8.778.213-.487.448-.968.715-1.427zm23.345-6.589l.093-.015-.093.015zm2.686-11.654l.088-.198c.895-1.799.185-4.076-1.675-5.179-1.927-1.143-4.34-.588-5.391 1.238-1.05 1.827-.339 4.234 1.588 5.377.807.479 1.696.644 2.539.559 1.168-.119 2.241-.735 2.851-1.797zm-4.512 1.257c-1.019-.604-1.394-1.876-.84-2.841.555-.964 1.832-1.258 2.849-.654 1.018.604 1.393 1.875.838 2.84-.554.966-1.83 1.259-2.847.655zm2.009-3.495c-1.018-.604-2.294-.311-2.849.654-.554.965-.179 2.237.84 2.841 1.017.604 2.293.311 2.848-.654.554-.965.179-2.237-.839-2.841zm12.82 20.873c.715-.523 1.317-1.109 1.831-1.837.442-.627.758-1.361.951-2.105.404-1.556.235-3.237-.259-4.75-.158-.486-.619-.806-1.129-.67-.464.124-.819.661-.659 1.147.109.334.202.674.276 1.019l.09.505.005.032.008.063.025.277c.025.327.025.655.004.981l-.017.214-.009.077c-.024.175-.059.347-.099.519l-.127.457-.068.199-.037.098c-.128.297-.285.582-.461.853l-.122.179-.049.067c-.115.145-.238.282-.366.415l-.374.358-.226.189-.027.022-.069.053c-.21.153-.371.312-.439.577-.063.236-.03.49.087.702.226.411.85.658 1.26.359zm3.923 1.025c.466.276.973.079 1.266-.338 1.163-1.655 2.722-3.606 1.781-5.74-.206-.469-.852-.591-1.26-.357-.458.261-.552.784-.368 1.243l.043.141.029.124.003.017.004.25-.007.123c-.033.197-.088.389-.153.577l-.041.111-.161.337c-.405.795-.958 1.5-1.469 2.227-.292.417-.072 1.045.333 1.285zm3.842.772c.435.257 1.013.105 1.266-.338.497-.871.881-1.837 1.09-2.822.106-.5-.151-1.013-.657-1.15-.468-.126-1.025.166-1.131.667-.093.44-.224.87-.382 1.289l-.043.114-.006.013-.157.347c-.095.202-.201.4-.312.595-.253.443-.105 1.026.332 1.285zm-44.604-26.396l.031.107.045.208.032.207.103.983c.046.332.127.654.284.952.205.385.545.634.944.778.378.137.855.115 1.234-.003.433-.135.738-.413.905-.838.258-.657-.183-1.385-.56-1.888-.231-.308-.501-.584-.799-.825-.333-.269-.686-.524-1.104-.638l-.026-.005c-.218-.241-.586-.31-.875-.144-.339.193-.46.642-.271.984l.057.122zm1.153 24.64c.293-.517.622-1.026 1.009-1.479.314.744 2.166 5.317 2.858 6.088.147.164.423.106.556-.041.569-.632 2.025-4.927 2.143-5.13.348.415 1.99 4.814 2.701 5.075.286.105.57.145.806-.094.237-.239 1.103-4.756 1.467-5.532.496.635 1.559 3.212 2.232 3.693.187.133.39.125.556-.04.829-.828 1.017-4.083 1.218-4.726.716.65 1.316 2.037 2.158 2.541.142.084.374.039.471-.097.637-.883.68-2.517 1.006-3.513l.29.379c.22.296.452.589.75.809.141.104.328.14.48.028.711-.524 2.037-3.486 2.404-4.413.132-.332-.023-.533-.23-.575l-.1-.01-.093.015-.066.026c-.083.038-.16.096-.217.19-.485.792-1.535 3.423-1.929 3.901-.443-.445-.736-1.029-1.28-1.381-.177-.114-.447-.001-.528.183-.418.939-.403 2.641-.898 3.544-.732-.551-1.293-1.939-2.021-2.5-.169-.13-.409-.134-.555.041-.746.891-.453 3.862-1.197 4.749-.625-.59-1.689-3.259-2.304-3.868-.176-.173-.515-.104-.611.125-.354.851-1.333 5.458-1.517 5.791-.09-.028-2.35-4.901-2.854-5.329-.177-.149-.526-.127-.612.125-.126.375-1.613 4.571-1.983 5.108-.97-2.171-1.885-4.381-2.605-6.001-.129-.291-.444-.341-.669-.129-.609.574-1.077 1.293-1.499 2.014-.267.459-.501.94-.717 1.429-.13.295-.261.591-.367.894-.169.481.536.839.707.354l.205-.499c.244-.599.517-1.184.835-1.745zm48.093-20.028c.299-.092.631-.184 1.006-.354-.446-1.711-1.142-3.401-1.795-5.028-.516-1.283-1.036-2.583-1.403-3.921l-.746-.181c.553 2.212 1.54 4.32 2.35 6.435.293.767.578 1.556.813 2.358l-.738-.601c-.697-.568-1.393-1.139-2.085-1.716-.626-1.419-1.242-2.843-1.777-4.301-.31-.844-.589-1.699-.829-2.566l-.711-.075c.551 2.058 1.332 4.029 2.169 5.98-1.491-1.264-2.957-2.555-4.375-3.902-.696-.661-1.379-1.336-2.045-2.03l-.835.099c2.194 2.318 4.571 4.45 7.004 6.506l.859.721.643 1.459c.23.524.456 1.05.677 1.577l.007.017c.213-.077.426-.132.651-.185l-.012-.027c-.265-.633-.538-1.261-.814-1.888.66.544 1.323 1.085 1.986 1.623zm1.124-7.244c.013 1.341.026 2.681.079 4.021.035.876.101 1.848.181 2.728l.003.034c.201-.1.415-.215.642-.345v-.007c-.069-.821-.13-1.735-.162-2.553-.041-1.03-.058-2.062-.069-3.092.535.636 1.059 1.282 1.579 1.93l1.538 1.868.54-.404c-1.18-1.449-2.445-3.031-3.667-4.444l-.003-.306v-.023l-.463-.198c-.414-.191-.832-.375-1.258-.538l-.254-.108.012.013.399.421c.307.329.607.664.903 1.003zm-3.982 8.311c.151-.119.295-.213.437-.296l.188-.109-.005-.003c-1.93-1.214-3.849-2.451-5.756-3.704-2.752-1.807-5.482-3.649-8.202-5.508l-.282.107-.483.191.015.01c2.648 1.811 5.306 3.608 7.983 5.373 2.022 1.333 4.056 2.649 6.105 3.939zm1.695 65.541c.228.289.45.584.669.88l.46-.36c-.273-.371-.548-.737-.835-1.097l-.294.577zm7.114-5.886l-.075.02c.747 1.184 1.554 2.328 2.348 3.479l.796.097c-.96-1.407-1.956-2.789-2.852-4.238-.09.235-.162.45-.217.642zm7.023 1.672c.209.32.416.643.619.966-.383.521-.757 1.05-1.125 1.581l.639.141c.274-.389.551-.774.833-1.158l.533.898c-.312.114-.621.235-.926.364l1.006.254.227-.08.094.168.813.234-.328-.596c.785-.241 1.589-.412 2.413-.461-.029.365-.136.761-.264 1.107l-.193.469.573.207c.161-.359.296-.73.384-1.11-.159-.385-.376-.821-.673-1.271-.868.061-1.719.251-2.549.517-.237-.409-.479-.816-.726-1.22l.202-.267c.301-.396.607-.785.924-1.168-.167-.11-.343-.217-.528-.319-.324.392-.639.79-.946 1.195l-.374-.584-.172-.267.797-.689c-.2-.087-.409-.17-.626-.248l-.504.438-.505-.738c-.274-.066-.561-.125-.861-.175.31.432.614.871.911 1.313-.875.783-1.698 1.617-2.177 2.658l-.001.003.609.107.001-.002c.197-.395.447-.746.736-1.093.355-.422.752-.805 1.164-1.174zm-9.624-.704c-.179.098-.351.203-.517.308.49.859.884 1.786 1.236 2.711.186-.076.372-.146.56-.209-.304-.805-.635-1.598-1.036-2.365l-.243-.445zm-1.204 3.96c-.193-.896-.405-1.79-.61-2.685l-.002-.01-.106.103-.019.018-.375.359.001.007c.196.846.395 1.689.575 2.539l.536-.331zm2.921-4.673c-.009 1.136-.051 2.272-.029 3.409v.017c.2-.06.401-.111.6-.154v-.008c-.021-1.145.019-2.3.026-3.444-.205.055-.403.115-.597.18z"
                stroke="#fff" stroke-miterlimit="10" fill="none" />
            </svg>

<p class="description">Shark</p>

</div>
</div>

<div class="section section--third">
    <div class="wrapper">
        <div class="animal">
            <svg id="giraffe-dashed" class="animal-svg animal-svg--dashed" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 71.92 105.034">
                <g stroke="#fff" stroke-miterlimit="10" fill="none">
                    <path d="M64.012 36.528l-.073.704.073-.704zM63.806 38.115l-.118.672.118-.672zM63.484 39.654l-.161.629.161-.629zM30.814 48.082c-.194-.184-.38-.376-.563-.572.184.195.369.387.563.572zM31.842 48.964c-.208-.163-.41-.33-.608-.503.198.173.4.34.608.503zM32.973 49.756c-.228-.144-.453-.292-.671-.447.218.155.443.303.671.447zM28.289 44.917c-.236-.394-.458-.802-.667-1.223.209.42.431.828.667 1.223zM34.222 50.458c-.258-.128-.514-.259-.76-.4.246.14.502.271.76.4zM29.882 47.11c-.188-.216-.365-.442-.542-.67.177.228.354.455.542.67zM26.84 41.874c-.108-.284-.214-.568-.311-.861.097.293.203.577.311.861zM29.042 46.055c-.211-.292-.41-.597-.603-.907.194.31.392.614.603.907zM27.454 43.327c-.145-.307-.287-.616-.418-.936.131.32.274.629.418.936zM54.176 50.305l-.728.284.728-.284zM35.648 51.081c-.316-.12-.63-.241-.93-.377.3.135.615.257.93.377zM36.073 51.247c.462.16.938.305 1.435.43-.94 6.067-2.334 13.278-4.462 14.512-.726.421-3.551-.973-5.452-1.376-6.466-1.37-12.66-.66-17.2 1.572-.377.185-4.177-.701-4.867-2.589-.421-1.151.412-3.738.63-4.705.1-.446.11-.868.052-1.246-.243.404-.564.694-.934.832-.508-.043-.957-.126-1.366-.262-.006.171-.019.349-.042.533-.203 1.533-1.714 3.566-1.491 5.682.435 4.145 4.217 4.377 3.992 4.583-1.762 1.603-3.254 5.286-3.666 7.543-.822 4.488 1.8 23.29 2.367 24.368.867 1.651 3.945 1.636 5.038.768 1.288-1.024 3.434-8.682 5.381-9.707 2.479-1.303 4.437-.258 7.081 1.187 1.278.698 4.062 9.494 4.826 10.266.689.698 3.738.838 4.599-.419 1.916-2.802.787-7.49 2.813-10.197 1.395 1.258 2.916 9.363 3.222 10.058.615 1.396 4.272 1.257 5.396-.592.347-.571 2.322-17.406 2.51-18.824.314-2.354 5.323-23.841 6.103-32.585l.385-.134c-1.596.508-3.362.897-5.342 1.129-4.431.518-8.06.194-11.008-.827zm-24.401 16.679c-.187-1.071.562-2.101 1.674-2.3 1.112-.2 2.167.505 2.354 1.576.188 1.07-.563 2.1-1.674 2.3-1.112.2-2.167-.506-2.354-1.576zm4.29 5.76c-.762.138-1.483-.345-1.611-1.078-.128-.73.384-1.435 1.145-1.571.762-.137 1.484.344 1.611 1.077.128.733-.384 1.436-1.145 1.572zm4.889-2.707c-1.104.198-2.15-.502-2.337-1.565-.186-1.063.558-2.085 1.663-2.284 1.104-.198 2.15.502 2.337 1.565.186 1.062-.557 2.086-1.663 2.284zm4.519 2.707c-.762.138-1.482-.345-1.611-1.078-.128-.73.384-1.435 1.145-1.571.762-.137 1.482.344 1.612 1.077.127.733-.386 1.436-1.146 1.572zm2.87-4.274c-1.06.19-2.064-.483-2.244-1.503-.18-1.021.536-2.002 1.596-2.192 1.061-.19 2.064.481 2.244 1.502.179 1.02-.535 2.002-1.596 2.193zM55.769 49.558l-.655.323.655-.323zM60.638 45.591l-.255.292.255-.292zM61.573 44.259l-.065.112.065-.112zM63.037 41.15l-.196.564.196-.564zM62.443 42.625l-.205.455.205-.455zM59.636 46.719l-.4.374.4-.374zM57.206 48.708l-.578.355.578-.355zM58.494 47.76l-.497.377.497-.377zM21.298 19.638c-3.893 1.002-4.341 4.55-3.063 6.416 1.233 1.799 3.228-.044 5.281-.584.835-.22 2.164.005 2.708-.766 1.521-2.149-2.405-5.714-4.926-5.066zM63.469 11.74c-3.12 0-6.799 3.485-8.428 5.209-.853-.597-1.73-1.14-2.618-1.622.392-.539.701-1.038.882-1.406.591-1.209 1.995-4.297 2.771-6.011 1.759-.214 3.124-1.729 3.124-3.567 0-1.985-1.59-3.593-3.551-3.593-1.96 0-3.55 1.608-3.55 3.593 0 .984.391 1.876 1.026 2.526-.806 1.776-2.081 4.576-2.591 5.621-.281.574-.609 1.068-.958 1.502-2.831-1.121-5.566-1.597-7.651-1.298-2.535.363-5.698 2.096-8.593 4.702l-.288-.297c-.772-.865-2.75-3.211-4-4.7.437-.798.574-1.764.311-2.713-.531-1.909-2.492-3.022-4.379-2.484-1.888.538-2.987 2.522-2.455 4.433.492 1.77 2.212 2.853 3.96 2.577 1.207 1.437 3.386 4.024 4.279 5.026l.371.377c-.297.335-.587.682-.871 1.035-2.04-1.281-6.361-3.654-9.338-2.889-6.492 1.669-7.285 6.95-5.139 9.801 2.069 2.75 5.417-.067 8.864-.892.629-.151 1.377-.205 2.114-.305-1.253 2.888-1.873 6.019-1.456 9.176.247 1.876.632 3.631 1.156 5.256-.202-.947 6.355-8.842 17.646-10.637 11.259-1.791 19.846 5.096 19.946 5.832.133-1.905.061-3.904-.211-5.973-.421-3.189-1.854-6.054-3.838-8.499.706-.086 1.407-.209 2.024-.219 3.54-.059 7.47 1.836 8.807-1.344 1.386-3.297-.668-8.217-7.366-8.217zm-37.245 12.964c-.545.771-1.873.545-2.708.766-2.053.54-4.048 2.383-5.281.584-1.278-1.866-.83-5.414 3.063-6.416 2.521-.648 6.447 2.917 4.926 5.066zm8.904 7.427c-1.572.282-3.063-.715-3.328-2.229-.265-1.513.795-2.969 2.366-3.252 1.573-.282 3.064.715 3.33 2.229.267 1.512-.794 2.969-2.368 3.252zm18.685-2.566c-1.574.283-3.063-.715-3.328-2.229-.265-1.513.794-2.97 2.366-3.253 1.573-.282 3.063.715 3.33 2.229.265 1.514-.795 2.97-2.368 3.253zm14.278-10.458c-.757 2.052-3.14.762-5.259.75-.865-.005-2.095.543-2.811-.067-1.997-1.704.939-6.138 3.542-6.138 4.015.001 5.313 3.327 4.528 5.455zM63.562 13.652c-2.602 0-5.539 4.434-3.542 6.138.716.61 1.946.062 2.811.067 2.119.012 4.502 1.302 5.259-.75.786-2.128-.512-5.454-4.528-5.455zM27.592 65.717c-1.06.19-1.776 1.172-1.596 2.192.179 1.02 1.184 1.693 2.244 1.503 1.061-.191 1.775-1.173 1.596-2.193-.18-1.021-1.183-1.693-2.244-1.502zM44.107 30.161c-11.291 1.794-17.848 9.69-17.646 10.637l-.002.022.07.193c.097.293.203.577.311.861l.196.517c.131.32.273.628.418.936l.168.367c.208.42.431.829.667 1.223l.151.231c.193.31.391.614.603.907l.298.385c.176.228.354.455.542.67l.37.399c.183.196.368.388.563.572l.419.379c.198.173.4.341.608.503l.46.345c.218.155.443.303.671.447l.49.301c.246.141.502.272.76.4l.496.246c.3.136.614.257.93.377l.424.166c2.948 1.021 6.578 1.345 11.006.826 1.98-.232 3.746-.621 5.342-1.129.352-.112.694-.23 1.028-.355l.728-.284c.322-.134.632-.277.938-.423l.655-.323c.297-.158.579-.325.859-.494l.578-.355c.275-.183.534-.377.791-.571l.497-.377c.26-.214.501-.441.742-.667l.4-.374c.265-.269.508-.552.747-.836l.255-.292c.312-.394.604-.8.87-1.22l.065-.112c.238-.383.462-.775.665-1.179l.205-.455c.139-.3.278-.6.398-.91l.196-.564c.101-.287.201-.573.286-.868l.161-.629c.072-.287.145-.573.203-.867l.118-.672c.049-.292.096-.584.133-.882l.073-.704.053-.511-.012-.025c-.101-.736-8.688-7.623-19.947-5.832zm4.663 13.845c-.174.333-1.889 4.65-5.626 4.039-3.738-.612-5.349-5.586-5.444-5.853-.096-.265.377-.506.516-.225.133.272 1.606 4.261 4.715 4.998l.601.098c3.116.279 4.799-3.175 4.933-3.417.134-.252.479.026.305.36zM34.167 26.649c-1.571.283-2.631 1.74-2.366 3.252.264 1.515 1.755 2.511 3.328 2.229 1.574-.283 2.634-1.74 2.368-3.253-.267-1.513-1.757-2.51-3.33-2.228zm1.577 3.348c-.815.147-1.588-.371-1.724-1.154-.139-.784.412-1.539 1.226-1.685.815-.147 1.586.37 1.725 1.154.137.785-.411 1.539-1.227 1.685zM35.246 27.158c-.814.146-1.365.901-1.226 1.685.136.784.909 1.301 1.724 1.154.815-.146 1.364-.9 1.227-1.685-.138-.784-.909-1.302-1.725-1.154zM52.851 24.083c-1.572.283-2.631 1.74-2.366 3.253.265 1.514 1.754 2.511 3.328 2.229 1.573-.283 2.633-1.739 2.368-3.252-.267-1.514-1.757-2.511-3.33-2.23zm1.577 3.348c-.815.147-1.588-.371-1.724-1.154-.139-.784.41-1.539 1.225-1.685.815-.147 1.587.37 1.726 1.154.137.785-.411 1.539-1.227 1.685zM53.929 24.592c-.815.146-1.364.901-1.225 1.685.136.784.909 1.302 1.724 1.154.815-.146 1.363-.9 1.227-1.685-.138-.784-.911-1.302-1.726-1.154zM20.177 67.129c-1.105.199-1.849 1.221-1.663 2.284.187 1.063 1.233 1.764 2.337 1.565 1.105-.198 1.849-1.222 1.663-2.285-.186-1.062-1.232-1.762-2.337-1.564zM24.904 71.036c-.761.137-1.273.841-1.145 1.571.128.733.849 1.216 1.611 1.078.76-.136 1.273-.839 1.146-1.572-.13-.733-.85-1.214-1.612-1.077zM15.496 71.036c-.76.137-1.273.841-1.145 1.571.128.733.849 1.216 1.611 1.078.76-.136 1.272-.839 1.144-1.572-.127-.733-.849-1.214-1.61-1.077zM15.7 67.202c-.188-1.071-1.243-1.776-2.354-1.576-1.112.199-1.861 1.229-1.674 2.3.188 1.07 1.242 1.776 2.354 1.576 1.112-.2 1.862-1.23 1.674-2.3zM48.463 43.646c-.133.243-1.817 3.696-4.933 3.417l-.601-.098c-3.109-.736-4.582-4.725-4.715-4.998-.138-.281-.611-.041-.516.225.095.266 1.707 5.24 5.444 5.853 3.737.611 5.453-3.706 5.626-4.039.176-.334-.169-.612-.305-.36zM6.208 57.845c.499-.83.637-2.182-.019-3.984-.503-1.382-1.604-2.711-2.552-3.061.355.459.011 1.014.05 1.38-.115-1.27-.76-1.957-.865-2.044-.727-.609-1.08-.846-1.137-1.439-1.116.928-1.626 3.607-.65 6.286.741 2.032 1.59 3.003 2.874 3.432.409.136.858.219 1.366.262.369-.138.69-.428.933-.832z"
                    />
                </g>
            </svg>

<ellipse transform="matrix(0.9845 -0.1753 0.1753 0.9845 -11.5922 3.3903)" fill="#F15A29" cx="13.391" cy="67.299" rx="2.08" ry="1.983" />
                    <path fill="#662D3D" d="M48.754,43.207c-0.136,0.245-1.848,3.723-5.016,3.442l-0.611-0.099c-3.161-0.742-4.659-4.759-4.794-5.034
                                c-0.141-0.283-0.622-0.041-0.524,0.227c0.097,0.268,1.735,5.278,5.536,5.895c3.801,0.616,5.545-3.733,5.722-4.068
                                C49.244,43.234,48.893,42.953,48.754,43.207z" />
                    <path fill="#662D3D" d="M5.787,57.509c0.507-0.835,0.648-2.198-0.02-4.013c-0.512-1.392-1.631-2.73-2.596-3.083
                                c0.362,0.462,0.011,1.021,0.051,1.391c-0.116-1.279-0.773-1.971-0.879-2.059c-0.74-0.614-1.098-0.853-1.156-1.45
                                c-1.135,0.935-1.654,3.633-0.661,6.332c0.753,2.046,1.616,3.024,2.922,3.456c0.415,0.137,0.873,0.221,1.389,0.264
                                C5.213,58.208,5.541,57.916,5.787,57.509z" />
                </g>
            </svg>
        </div>
        <p class="description">Giraffe</p>
    </div>
</div>

<div class="section section--forth">
    <div class="wrapper">
        <div class="animal">
            <svg id="donkey-dashed" class="animal-svg animal-svg--dashed" viewBox="0 0 98.825 105.034">
                <g stroke="#fff" stroke-miterlimit="10" fill="none">
                    <path d="M43.137 55.694c1.961.554 4.884.842 9.529.754-.413-1.231-1.532-2.121-2.86-2.121-.225 0-.444.026-.654.073.019-.161.028-.326.028-.493 0-2.102-1.568-3.823-3.56-3.976.228-.441.356-.945.356-1.48 0-1.618-1.184-2.937-2.701-3.113.493 3.196.39 6.697-.138 10.356zM55.823 90.275l-.242.274.242-.274zM56.673 89.587c-.125.064-.249.146-.372.24.123-.094.247-.175.372-.24zM66.777 92.257l-.229-.4.229.4zM66.4 91.604l-.265-.354.265.354zM55.94 90.149l.265-.238-.265.238zM65.61 90.729c.136.09.27.212.401.358-.131-.146-.264-.268-.401-.358zM90.363 52.402c-.351-.244-.598-.649-.727-1.164-.421.863-.933 1.715-1.496 2.231-1.5 1.369-5.108.721-7.5 2.985-2.075 1.965-3.179 4.944-3.433 5.696-.703-.604-1.499-1.209-2.359-1.744-5.188-3.228-12.496-4.286-20.464-4.003-.601.021-1.167.035-1.718.045-4.645.088-7.567-.2-9.529-.754.528-3.66.631-7.16.138-10.356-.398-2.587-1.186-4.976-2.446-7.088 2.862-1.313 6.072-3.653 8.934-6.94 3.814-4.379 5.628-10.316 7.555-14.698 1.136-2.586 3.704-4.046 3.705-5.088-1.783-.219-5.687-.007-9.149 1.271-4.226 1.563-8.875 4.898-12.427 8.977-2.067 2.374-3.698 4.844-4.857 7.161.303.464.452 1.003.368 1.556-.167 1.104-1.174 1.899-2.398 2.001.951.525 1.527 1.493 1.376 2.49-.203 1.334-1.628 2.217-3.183 1.973-.765-.12-1.419-.491-1.863-.996-.429 1.475-2.098 2.411-3.908 2.126-1.947-.306-3.319-1.905-3.065-3.573l.03-.159c-.363.073-.753.085-1.151.022-1.555-.244-2.653-1.522-2.45-2.856.164-1.086 1.141-1.874 2.338-1.996-.636-.55-.985-1.333-.864-2.135.066-.434.271-.813.559-1.128-.241-2.341-.779-4.911-1.653-7.542-1.71-5.148-4.718-10.037-8.016-13.127-2.702-2.53-6.22-4.248-7.948-4.742-.398.964 1.408 3.311 1.464 6.139.095 4.792-.509 10.974 1.327 16.501 1.21 3.641 2.949 6.713 4.8 8.987-4.804 3.787-7.57 10.252-9.075 17.792-.639 3.202-.75 6.365-.402 9.362l.456-.434.019.053c5.292-5.095 12.934-7.593 20.722-6.012 8.148 1.654 14.449 7.362 17.198 14.577-2.223 3.842-5.575 6.869-9.222 8.912l.03.031c2.227 2.928 1.451 13.114.97 18.871 1.016-.507 2.208-.729 3.448-.528 1.491.241 2.751 1.021 3.585 2.088.982-4.728 2.655-12.099 4.648-12.009 2.258.102.795 8.281 1.059 13.475.995-.957 2.387-1.556 3.93-1.556 1.612 0 3.056.654 4.057 1.687.982-2.593 2.229-6.195 3.699-8.098l-.143.183c-.012-.33.011-.667.071-1.002.519-2.888 3.615-4.737 6.917-4.135 3.302.604 5.559 3.432 5.041 6.319-.056.307-.141.604-.252.887l-.189-.389c.845 1.734 1.602 4.286 2.295 6.467 1-1.227 2.575-2.021 4.355-2.021 1.908 0 3.584.91 4.565 2.287 1.819-6.737 5.043-21.207 4.696-25.488-.159-1.985-.943-4.896-2.058-7.193.101-.258.177-.557.216-.901.216-1.875.741-5.404 2.493-6.65 1.666-1.184 5.089-1.593 6.741-3.333.784-.826 1.283-2.14 1.592-3.295-.454.046-.933.043-1.452-.019zm-83.409-39.746c.054-1.746-.562-3.744-.091-4.583 1.026.373 3.188 2.187 4.431 3.933 1.443 2.029 2.842 4.725 3.758 7.479 1.703 5.125 1.515 9.799-.15 10.363-2.215-.916-4.853-2.785-6.555-7.91-1.038-3.119-1.477-6.572-1.393-9.282zm33.648 47.277c-1.151 1.063-2.768 1.174-3.611.247-.843-.928-.593-2.542.558-3.607 1.151-1.063 2.768-1.173 3.611-.246.843.927.593 2.542-.558 3.606zm1.177-34.188c1.901-2.183 4.225-4.122 6.333-5.43 1.815-1.125 4.506-1.955 5.595-1.897.111.957-1.223 2.559-1.843 4.19-.961 2.533-2.692 5.545-4.843 8.016-3.222 3.699-6.121 4.602-8.42 4.719-.348-.362-.712-.714-1.102-1.052-.144-1.852 1.453-5.3 4.28-8.546zm-13.69 20.926c1.976-1.104 4.505-.3 5.651 1.793 1.145 2.094.471 4.686-1.505 5.79-1.977 1.104-4.506.3-5.651-1.794-1.145-2.094-.471-4.685 1.505-5.789zm-16.035-3.255c1.976-1.103 4.506-.299 5.65 1.794 1.146 2.094.472 4.686-1.504 5.789-1.977 1.104-4.507.3-5.652-1.794-1.145-2.094-.471-4.686 1.506-5.789zm-8.722 5.032c.919-.85 2.52-.598 3.575.563 1.055 1.161 1.165 2.791.244 3.642-.919.85-2.521.599-3.576-.563-1.054-1.161-1.164-2.792-.243-3.642zM73.57 96.995c-1.78 0-3.355.795-4.355 2.021-.698.855-1.116 1.919-1.116 3.077 0 2.814 10.945 2.814 10.945 0 0-1.039-.337-2.005-.909-2.812-.98-1.376-2.657-2.286-4.565-2.286zM47.719 97.098c-1.543 0-2.935.599-3.93 1.556-.954.918-1.543 2.165-1.543 3.541 0 2.815 10.945 2.815 10.945 0 0-1.313-.539-2.507-1.415-3.41-1.001-1.033-2.445-1.687-4.057-1.687zM34.497 95.1c-1.24-.2-2.433.021-3.448.528-1.429.713-2.497 2.007-2.755 3.633-.441 2.777 10.366 4.523 10.808 1.743.221-1.392-.185-2.747-1.02-3.816-.834-1.067-2.094-1.847-3.585-2.088zM97.846 41.401c-.274.689-.744.887-1.764 1.44-.146.08-1.2 2.148-1.773 3.626.17-.425.086-2.57.64-3.03-1.168.191-2.851 1.508-3.896 3.032-1.378 2.011-1.692 3.666-1.416 4.768.129.515.376.92.727 1.164.52.062.998.065 1.453.019 1.633-.167 2.945-1.102 4.527-3.408 2.024-2.951 2.405-6.247 1.502-7.611zM67.361 92.052c.518-2.888-1.739-5.715-5.041-6.319-3.302-.603-6.399 1.247-6.917 4.135-.06.335-.083.672-.071 1.002l.143-.183.106-.137.242-.274.117-.126.265-.238.097-.084c.123-.094.246-.176.372-.24 2.981-1.555 6.119-.726 8.937 1.143.136.09.27.212.401.358l.123.162.265.354.148.253.229.4.143.293.189.389c.112-.285.197-.582.252-.888zM14.901 29.847c1.666-.563 1.853-5.238.15-10.363-.916-2.754-2.314-5.45-3.758-7.479-1.243-1.746-3.404-3.56-4.431-3.933-.47.84.146 2.838.091 4.583-.084 2.71.355 6.164 1.392 9.281 1.703 5.126 4.341 6.995 6.556 7.911zM38.602 35.343c2.299-.118 5.198-1.021 8.42-4.719 2.151-2.471 3.882-5.483 4.843-8.016.62-1.631 1.954-3.233 1.843-4.19-1.089-.058-3.78.772-5.595 1.897-2.109 1.309-4.433 3.247-6.333 5.43-2.828 3.247-4.424 6.694-4.279 8.546.389.337.753.689 1.101 1.052zM39.271 67.814c-2.749-7.215-9.049-12.923-17.198-14.577-7.788-1.581-15.43.917-20.722 6.012l-.413.393c1.152 9.908 9.141 18.384 16.094 19.796 3.802.771 8.623-.253 13.017-2.713 3.646-2.042 6.999-5.069 9.222-8.911zm-20.474-8.234c.318-.516.989-.673 1.498-.353.51.321.666.999.348 1.515-.317.516-.989.674-1.499.353-.51-.322-.666-.999-.347-1.515zm-4.232-.396c.319-.516.99-.673 1.5-.353.51.321.666.999.348 1.515-.317.516-.989.673-1.5.353-.509-.322-.665-1-.348-1.515zm6.097 16.758c-2.771-.155-4.405-2.904-4.475-3.021l.619-.367c.189.414 1.923 1.83 3.936 1.941 1.298.075 2.995-.714 3.859-1.792.351-.437 1.163-1.276.515-1.898-.647-.624.775-1.645 1.386-.382.114.236.125.672.106 1.011-.042.748-.344 1.497-.891 2.181-1.163 1.449-3.289 2.428-5.055 2.327zM16.2 50.999c1.976-1.103 2.649-3.695 1.504-5.789-1.144-2.093-3.674-2.896-5.65-1.794-1.977 1.103-2.651 3.695-1.506 5.789 1.145 2.094 3.676 2.898 5.652 1.794zm-4.253-6.235c.792-.443 1.788-.154 2.225.644.437.797.148 1.804-.644 2.246-.792.442-1.788.154-2.226-.645-.436-.797-.147-1.802.645-2.245zM13.528 47.654c.792-.442 1.081-1.449.644-2.246-.437-.798-1.433-1.087-2.225-.644-.792.442-1.081 1.448-.645 2.245.438.799 1.433 1.087 2.226.645zM32.235 54.254c1.976-1.104 2.649-3.696 1.505-5.79-1.146-2.093-3.675-2.897-5.651-1.793-1.976 1.104-2.65 3.695-1.505 5.788 1.145 2.095 3.674 2.899 5.651 1.795zm-4.253-6.235c.792-.442 1.789-.154 2.225.644.436.799.147 1.805-.645 2.247-.792.443-1.788.154-2.224-.644s-.148-1.804.644-2.247zM29.562 50.909c.792-.442 1.081-1.448.645-2.247-.436-.797-1.433-1.085-2.225-.644-.792.443-1.081 1.448-.644 2.246s1.432 1.088 2.224.645zM14.912 60.698c.511.32 1.183.163 1.5-.353.318-.516.162-1.194-.348-1.515-.51-.32-1.18-.163-1.5.353-.316.516-.16 1.194.348 1.515zM19.144 61.095c.51.321 1.182.163 1.499-.353.318-.516.163-1.193-.348-1.515-.509-.32-1.18-.163-1.498.353-.319.516-.163 1.193.347 1.515zM7.151 52.652c.92-.851.811-2.48-.244-3.642-1.056-1.161-2.656-1.413-3.575-.563-.921.851-.811 2.481.244 3.642 1.054 1.162 2.655 1.413 3.575.563zM25.716 73.616c.547-.684.849-1.433.891-2.181.019-.339.008-.775-.106-1.011-.61-1.263-2.033-.242-1.386.382.648.622-.164 1.461-.515 1.898-.865 1.078-2.561 1.867-3.859 1.792-2.012-.111-3.747-1.527-3.936-1.941l-.619.367c.069.116 1.704 2.865 4.475 3.021 1.767.1 3.893-.879 5.055-2.327zM20.684 29.523c-1.197.122-2.174.91-2.338 1.996-.203 1.333.895 2.612 2.45 2.856.398.063.789.051 1.151-.022l-.03.159c-.253 1.668 1.119 3.268 3.065 3.573 1.81.284 3.479-.651 3.908-2.126.443.505 1.098.876 1.863.996 1.555.244 2.98-.639 3.183-1.973.151-.997-.425-1.964-1.376-2.49 1.224-.103 2.23-.897 2.398-2.001.083-.553-.065-1.092-.368-1.556-.428-.655-1.172-1.158-2.083-1.3-.55-.086-1.082-.032-1.551.133.132-1.403-1.04-2.721-2.683-2.979-1.469-.23-2.831.463-3.309 1.6l-.101.019c-.443-.502-1.095-.871-1.858-.991-1.05-.165-2.03.191-2.625.844-.288.316-.493.695-.559 1.128-.123.801.227 1.584.863 2.134zM41.16 56.326c-.843-.927-2.46-.817-3.611.246-1.151 1.065-1.401 2.68-.558 3.607.844.928 2.46.817 3.611-.247 1.151-1.063 1.401-2.678.558-3.606z"
                    />
                </g>
            </svg>

<p class="description">Donkey</p>

</div>

<div class="section section--fifth">
    <div class="wrapper">
        <div class="animal">
            <svg id="cow-dashed" class="animal-svg animal-svg--dashed" viewBox="0 0 104.285 105.034">
                <g stroke="#fff" stroke-miterlimit="10" fill="none">
                    <path d="M9.135 56.725c-1.46.05-2.851.603-3.915 1.555-3.051 2.727-2.247 6.603-.21 9.05.226.271.492.521.775.761.066-.434.149-.863.262-1.279 1.061-3.897 3.871-6.949 7.673-9.213l-.771.417c-1-.881-2.355-1.34-3.814-1.291zM27.677 87.054c-.339.018-.677.05-1.013.086-.248.029-.495.056-.74.095-.346.055-.686.127-1.023.201l-.672.152c-.369.097-.724.215-1.078.336l-.528.175c-.515.197-1.014.415-1.479.657-.504.264-1.06.82-1.644 1.557l-.037.042-.346.468c-.253.346-.511.713-.77 1.11.897 1.755 2.31 3.413 3.222 3.17 1.367-.365.656-3.054 1.682-3.326 1.025-.273 1.891 2.375 3.031 2.07 1.139-.305.901-3.119 1.699-3.332.798-.211 1.51 2.477 2.649 2.172.784-.208 1.434-3.046 1.515-5.229-1.428-.373-2.955-.485-4.468-.404zM8.218 82.408l-.019-.293.019.293zM29.75 52.826c.906-.091 1.815-.159 2.725-.204-.91.045-1.82.113-2.725.204zM8.097 81.059l-.033-.237.033.237zM8.249 85.649l.004-.251-.004.251zM8.25 83.162l-.011-.316.011.316zM8.264 83.959l-.004-.325.004.325zM8.167 81.704l-.025-.267.025.267zM8.264 84.465l-.001.332.001-.332zM32.523 52.619c.915-.045 1.829-.065 2.739-.065-.91 0-1.824.02-2.739.065zM35.298 52.554c.912.001 1.819.025 2.717.072-.898-.047-1.806-.071-2.717-.072zM24.901 87.436l-.672.152c.22-.059.447-.104.672-.152zM23.151 87.924l-.528.175.528-.175zM18.859 91.171c-4.288.092-8.803-1.51-10.638-4.64v-.005c-.224 6.158-1.205 13.814-.873 14.441 1.227 2.318 3.337 2.002 4.881.785 1.275-1.007 3.783-6.262 6.118-9.82.259-.397.517-.765.77-1.11l-.258.349zm-8.325 11.017c-.578-.17.647-2.36-.403-2.838-.832-.379-1.566 2.19-1.978 1.834-.9-.777-.157-4.842.289-5.164.616-.444 1.921-.384 2.944-.012 1.111.404 2.353 1.338 2.362 2.119.013 1.271-2.635 4.229-3.214 4.061zM19.5 90.313l-.037.042.037-.042zM26.664 87.14c-.249.029-.495.056-.74.095.245-.04.492-.066.74-.095zM18.859 91.171l.258-.349.346-.468.037-.042c.584-.736 1.14-1.293 1.644-1.557.465-.242.963-.46 1.479-.657l.528-.175c.354-.121.709-.239 1.078-.336.22-.06.447-.104.672-.152.338-.074.677-.146 1.023-.201l.74-.095c.336-.036.674-.068 1.013-.086l.364-.032c1.146-1.337 2.118-3.107 2.321-5.344.398-4.401-5.896-8.865-8.907-8.373-3.011.493-5.002 5.792-6.872 6.352-1.871.562-5.996-.805-6.499.413l-.105.268.024.14.06.345.033.237.045.379.025.267.032.411.019.293.021.438.011.316.01.472.004.325v.506l-.001.332-.01.602-.004.251-.027.877v.005c1.835 3.128 6.35 4.73 10.638 4.638zM42.18 67.485c1.333.247 6.239.637 9.89-2.306-4.882-3.01-8.866-7.283-11.478-12.353-.838-.086-1.687-.154-2.546-.199l-.031-.001c-.898-.046-1.805-.07-2.717-.072h-.036c-.91 0-1.824.02-2.739.065l-.049.003c-.909.045-1.819.113-2.725.204l-.021.001v.001c-1.967 6.019 5.618 13.394 12.452 14.657zM11.386 96.009c-1.022-.372-2.328-.433-2.944.012-.446.322-1.188 4.387-.289 5.164.412.356 1.146-2.213 1.978-1.834 1.051.478-.175 2.668.403 2.838.579.168 3.227-2.79 3.213-4.061-.008-.781-1.25-1.715-2.361-2.119zM42.697 97.655c-1.241-.17-2.719.021-3.293.58-.416.405-.196 4.58 1.012 5.18.554.273.711-2.418 1.74-2.203 1.299.271.495 2.68 1.185 2.735.691.056 2.892-3.388 2.548-4.647-.212-.772-1.844-1.458-3.192-1.645zM60.689 95.368c-.996-.032-2.149.271-2.559.807-.296.387.215 3.957 1.22 4.359.46.185.367-2.146 1.198-2.057 1.05.112.608 2.261 1.16 2.243.55-.017 2.014-3.185 1.64-4.234-.23-.646-1.577-1.086-2.659-1.118zM17.542 71.445c-.564-.289-1.059-1.019-1.199-1.735-1.228.427-2.62.644-4.09.6-2.546-.074-4.914-.907-6.468-2.219-.284-.24-.55-.49-.775-.761-2.037-2.447-2.841-6.323.21-9.05 1.064-.952 2.455-1.504 3.915-1.555 1.459-.049 2.814.41 3.814 1.291l.771-.417 1.481-.799-.011-.008c-1.427-1.254-3.907-2.203-5.984-2.132-2.081.071-4.063.857-5.582 2.214-1.813 1.621-2.768 3.677-2.76 5.946.006 2.022.801 4.087 2.239 5.813.667.801 1.528 1.489 2.523 2.055 1.781 1.013 4.002 1.62 6.388 1.687 1.985.059 3.876-.273 5.528-.93zM17.542 71.445c.194.1.396.155.594.129 2.306-.299 5.126-3.019 4.692-3.444-.359-.353-1.712.929-2.52.452-.329-.192 1.149-1.798.849-2.091-.299-.294-1.881 1.08-2.09.873-.209-.206.949-1.994.65-2.289-.299-.293-3.412 3.243-3.416 4.241 0 .129.015.261.041.395.141.715.637 1.445 1.2 1.734zM49.046 14.586c.039-.031.056-.083.057-.15l-.399-.157c-6.78-2.519-13.591-1.552-14.11.179-.436 1.458 2.472 5.266 7.452 7.936 1.891-2.956 4.264-5.593 7-7.808zM93.808 52.201c-.124 4.238-9.24 13.721-23.685 13.718-15.229-.003-21.996-7.056-23.818-10.714-1.774-3.561.714-11.949 2.212-13.454 1.748-1.754 8.414-2.275 15.853-2.223-2.561-2.811-4.139-6.252-4.139-10.232 0-9.903 18.032-12.747 28.639-14.873.081-1.176 4.137-7.517-1.219-13.357-1.302 5.99-4.991 9.631-6.306 9.086-3.801-1.574-7.981-2.445-12.369-2.445-4.516 0-8.811.921-12.7 2.583-1.307.559-4.731-3.555-6.886-9.087-4.393 6.873-.271 12.181-.288 13.231-.001.067-.018.119-.057.15-2.736 2.215-5.109 4.852-7 7.807-3.056 4.774-4.851 10.386-4.851 16.437 0 5.034 1.229 9.786 3.396 13.994-.838-.085-1.687-.152-2.545-.197.859.045 1.708.113 2.546.199 2.612 5.07 6.596 9.342 11.478 12.353-3.651 2.943-8.557 2.553-9.89 2.306-6.834-1.263-14.419-8.638-12.452-14.656-5.256.528-10.373 1.832-14.537 3.963l.011.008-1.481.799c-3.802 2.264-6.612 5.315-7.673 9.213-.113.416-.196.845-.262 1.279 1.555 1.312 3.922 2.146 6.468 2.219 1.47.043 2.863-.173 4.09-.6-.026-.133-.042-.265-.041-.395.004-.998 3.117-4.534 3.416-4.241.299.295-.86 2.083-.65 2.289.209.207 1.791-1.167 2.09-.873.3.293-1.178 1.899-.849 2.091.808.477 2.161-.805 2.52-.452.434.425-2.386 3.146-4.692 3.444-.199.026-.4-.029-.594-.129-1.652.656-3.544.988-5.526.93-2.386-.067-4.607-.674-6.388-1.687.075 3.301 1.077 6.64 2.046 8.664.137.287.245.673.331 1.125l-.024-.14.105-.268c.503-1.218 4.628.148 6.499-.413 1.87-.56 3.861-5.858 6.872-6.352 3.011-.492 9.305 3.972 8.907 8.373-.203 2.236-1.175 4.007-2.321 5.344l-.364.032c1.513-.081 3.04.031 4.468.403.534.14 1.054.31 1.554.52 6.057 2.542 4.229 12.526 5.08 14.298 1.067 2.217 5.312 4.039 7.159-.521.845-2.091 1.691-6.27 1.035-12.698-.22-2.16 6.465-4.707 8.003-3.526 2.675 2.052.444 15.486 5.493 15.96 1.411.132 2.648-.847 3.233-3.198 1.708-6.854 2.44-20.616 1.621-25.79-.155-.978-.344-1.919-.567-2.829 1.382.18 2.789.282 4.22.282 15.847 0 28.981-11.36 31.384-26.217-2.151 1.574-4.7 2.675-7.444 3.357.58 1.693.937 3.513.889 5.11zm-38.002-15.837c-2.192 0-3.969-1.695-3.969-3.789 0-2.091 1.777-3.787 3.969-3.787 2.193 0 3.97 1.695 3.97 3.787-.001 2.094-1.777 3.789-3.97 3.789zm-12.465 67.583c-.69-.056.114-2.465-1.185-2.735-1.029-.215-1.186 2.477-1.74 2.203-1.208-.6-1.428-4.774-1.012-5.18.574-.56 2.052-.75 3.293-.58 1.349.187 2.98.873 3.193 1.645.343 1.26-1.857 4.703-2.549 4.647zm18.367-3.226c-.552.018-.109-2.131-1.16-2.243-.832-.09-.738 2.241-1.198 2.057-1.005-.402-1.516-3.973-1.22-4.359.41-.536 1.563-.839 2.559-.807 1.082.032 2.429.472 2.659 1.118.374 1.049-1.089 4.217-1.64 4.234zM100.377 43.646c.249-1.57.38-3.178.38-4.816 0-4.718-1.098-9.166-3.026-13.161 2.19 4.568 3.728 10.665 2.646 17.977zM97.308 24.823l.319.623-.319-.623zM96.634 23.586l.204.365-.204-.365zM97.308 24.823c-.155-.298-.311-.588-.47-.872l-.204-.365c-.209-.362-.42-.715-.632-1.052 5.135-2.675 8.144-6.594 7.698-8.077-.519-1.73-7.011-1.63-14.109-.179l-.721.145c-10.607 2.126-28.639 4.97-28.639 14.873 0 3.979 1.578 7.421 4.139 10.232 10.835.076 23.312 1.367 24.623 1.832 1.381.489 2.959 2.934 3.924 5.733 2.744-.682 5.293-1.783 7.444-3.357l.006-.004.011-.085c1.082-7.313-.456-13.41-2.646-17.978l-.104-.224-.32-.622zm-17.662 10.251c-2.193 0-3.969-1.696-3.969-3.788 0-2.092 1.775-3.788 3.969-3.788 2.192 0 3.968 1.696 3.968 3.788 0 2.091-1.776 3.788-3.968 3.788zM48.518 41.751c-1.499 1.504-3.987 9.893-2.212 13.454 1.822 3.658 8.588 10.711 23.818 10.714 14.445.003 23.561-9.48 23.685-13.718.048-1.596-.31-3.417-.892-5.108-.965-2.799-2.543-5.244-3.924-5.733-1.311-.465-13.787-1.755-24.623-1.832-7.439-.051-14.104.469-15.852 2.223zm9.63 1.176c1.294 0 2.343 1.052 2.343 2.351 0 1.298-1.049 2.351-2.343 2.351s-2.343-1.053-2.343-2.351c.001-1.299 1.049-2.351 2.343-2.351zm-5.368 16.501c-2.938-.379-5.013-3.076-4.635-6.026.377-2.948 3.063-5.033 6.001-4.654 2.938.378 5.012 3.076 4.635 6.025s-3.064 5.034-6.001 4.655zm37.04-3.135c-.38 2.949-3.065 5.032-6.003 4.655-2.938-.378-5.014-3.076-4.636-6.025.378-2.949 3.064-5.033 6.003-4.654 2.936.378 5.011 3.075 4.636 6.024zm-10.174-12.072c1.293 0 2.341 1.053 2.341 2.351 0 1.299-1.048 2.351-2.341 2.351-1.295 0-2.345-1.052-2.345-2.351 0-1.298 1.05-2.351 2.345-2.351zm-15.854 13.983c.159.256 1.898 4.039 5.576 4.627l.711.071c3.687.146 5.679-3.242 5.837-3.481.163-.247.57.007.363.336-.206.328-2.237 4.549-6.659 4.104-4.422-.444-6.325-5.169-6.437-5.42-.113-.252.446-.503.609-.237z"
                    />
                    <ellipse cx="58.148" cy="45.278" rx="2.343" ry="2.351" />
                    <ellipse cx="79.646" cy="46.572" rx="2.341" ry="2.351" />
                    <path d="M69.621 63.861c4.422.445 6.453-3.776 6.659-4.104.207-.329-.2-.583-.363-.336-.158.239-2.15 3.627-5.837 3.481l-.711-.071c-3.678-.588-5.417-4.371-5.576-4.627-.163-.266-.722-.015-.609.236.111.251 2.014 4.977 6.437 5.421zM85.184 50.269c-2.938-.379-5.625 1.706-6.003 4.654-.378 2.949 1.698 5.646 4.636 6.025 2.938.377 5.623-1.706 6.003-4.655.375-2.949-1.7-5.646-4.636-6.024zM85.184 50.269c-2.938-.379-5.625 1.706-6.003 4.654-.378 2.949 1.698 5.646 4.636 6.025 2.938.377 5.623-1.706 6.003-4.655.375-2.949-1.7-5.646-4.636-6.024zM58.781 54.773c.377-2.949-1.697-5.647-4.635-6.025-2.938-.379-5.624 1.706-6.001 4.654-.377 2.95 1.698 5.647 4.635 6.026 2.937.379 5.624-1.705 6.001-4.655zM58.781 54.773c.377-2.949-1.697-5.647-4.635-6.025-2.938-.379-5.624 1.706-6.001 4.654-.377 2.95 1.698 5.647 4.635 6.026 2.937.379 5.624-1.705 6.001-4.655zM55.806 28.789c-2.192 0-3.969 1.695-3.969 3.787 0 2.093 1.777 3.789 3.969 3.789 2.193 0 3.97-1.695 3.97-3.789-.001-2.092-1.777-3.787-3.97-3.787zm-.83 3.787c-.835 0-1.512-.679-1.512-1.518s.677-1.519 1.512-1.519c.836 0 1.514.68 1.514 1.519 0 .838-.678 1.518-1.514 1.518zM79.646 27.498c-2.193 0-3.969 1.696-3.969 3.788 0 2.092 1.775 3.788 3.969 3.788 2.192 0 3.968-1.696 3.968-3.788 0-2.093-1.776-3.788-3.968-3.788zm-1.112 3.788c-.836 0-1.514-.68-1.514-1.519s.678-1.518 1.514-1.518c.835 0 1.512.68 1.512 1.518s-.677 1.519-1.512 1.519z"
                    />
                    <ellipse cx="54.976" cy="31.057" rx="1.512" ry="1.518" />
                    <circle cx="78.534" cy="29.767" r="1.518" />
                </g>
            </svg>

</div>

Animals SVG line animations with Snap.svg

svg, animal, morph

编辑器支持Emmet

快捷键

Animals SVG line animations with Snap.svg

svg, animal, morph

使用Snap.svg.js实现的背包动画

使用Snap.svg.js创建简单的眨眼动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：