Гирлянда для сайта на основе SVG и CSS

Продолжая новогоднюю тематику публикую очередную гирлянду для сайта. Гирлянда выполнена на основе SVG и CSS. Гирлянда выглядит изящно, не напрягает и не мешает пользователям. Предлагаю вам разместить гирлянду на своем сайте. А если вам нужно больше украшений для вашего сайта загляните в нашу подборку украшений для сайта. Там вы сможете найти много интересного)) А теперь приступим к установке гирлянды на сайт.

HTML

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--ui__newyear-filter-center" viewBox="0 0 543 35">
    <g fill="none" fill-rule="evenodd">
        <path d="M1 .5s165.642 13 271.5 13S542 .5 542 .5" stroke="#4D4D4D"></path>
        <path class="blink-red" fill="#CA1616" fill-rule="nonzero" d="M63.927 19.016l1.838-8.043 5.64.297.98 8.193-4.586 6.541z"></path>
        <path d="M63.187 9.334l2.585-3.967a1 1 0 01.89-.452l4.426.233a1 1 0 01.875.627l1.679 4.191a1 1 0 01-.981 1.37l-8.689-.458a1 1 0 01-.785-1.544z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M68.065 12.6a.726.726 0 01.985.157c.523.699.985 1.911 1.242 3.042a8.46 8.46 0 01.226 1.695c.008.505-.052 1.055-.302 1.479a.72.72 0 01-.962.253.665.665 0 01-.267-.925c.06-.102.126-.354.12-.792a7.173 7.173 0 00-.194-1.427c-.24-1.055-.65-2.059-1.008-2.538a.66.66 0 01.16-.945z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-red--reverse" fill="#CA1616" fill-rule="nonzero" d="M449.926 20.784l.854-8.207 5.634-.385 1.963 8.014-3.763 7.047z"></path>
        <path d="M448.023 11.261l2.087-4.249a.999.999 0 01.829-.557l4.422-.302a.999.999 0 01.944.517l2.173 3.957a1 1 0 01-.809 1.48l-8.68.593a1 1 0 01-.966-1.439z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M453.26 13.914a.726.726 0 01.997.038c.602.63 1.208 1.778 1.6 2.87.199.556.356 1.13.428 1.655.069.5.076 1.054-.121 1.505a.72.72 0 01-.924.367.665.665 0 01-.377-.886c.048-.109.082-.366.023-.8a7.208 7.208 0 00-.364-1.393c-.366-1.019-.894-1.966-1.308-2.398a.66.66 0 01.046-.958z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-blue" fill="#1648CA" fill-rule="nonzero" d="M111.524 21.984l1.901-8.029 5.637.342.917 8.2-4.638 6.505z"></path>
        <path d="M110.86 12.296l2.615-3.946a1 1 0 01.894-.445l4.424.268c.389.023.728.27.87.633l1.646 4.204a1 1 0 01-.991 1.363l-8.685-.526a1 1 0 01-.773-1.55z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M115.712 15.6a.726.726 0 01.984.166c.517.702.97 1.918 1.218 3.05a8.41 8.41 0 01.212 1.698c.004.505-.06 1.055-.313 1.476a.72.72 0 01-.963.245.664.664 0 01-.26-.926c.061-.102.128-.353.125-.792a7.256 7.256 0 00-.182-1.427c-.232-1.057-.634-2.064-.989-2.546a.66.66 0 01.168-.944z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-blue--reverse" fill="#1648CA" fill-rule="nonzero" d="M323.893 26.746l.965-8.194 5.638-.31 1.855 8.04-3.858 6.996z"></path>
        <path d="M322.119 17.198l2.144-4.22c.162-.318.481-.526.837-.546l4.425-.242a1 1 0 01.938.529l2.118 3.987a1 1 0 01-.828 1.467l-8.687.477a1 1 0 01-.947-1.452z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M327.319 19.922a.727.727 0 01.997.051c.594.638 1.184 1.794 1.561 2.89.192.56.341 1.137.406 1.662.062.501.062 1.055-.141 1.503a.72.72 0 01-.929.354.664.664 0 01-.365-.89c.049-.109.087-.366.033-.8a7.19 7.19 0 00-.345-1.398c-.352-1.023-.867-1.978-1.275-2.415a.66.66 0 01.058-.957z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-aqua" fill="#16B4CA" fill-rule="nonzero" d="M159.464 24.316l1.829-8.045 5.64.29.99 8.192-4.579 6.547z"></path>
        <path d="M158.713 14.634l2.58-3.969a1 1 0 01.89-.453l4.426.228a1 1 0 01.876.626l1.684 4.19a1 1 0 01-.98 1.37l-8.689-.448a1 1 0 01-.787-1.544z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M163.595 17.895a.726.726 0 01.985.157c.523.697.987 1.91 1.246 3.04a8.44 8.44 0 01.227 1.695c.009.504-.05 1.055-.3 1.479a.72.72 0 01-.961.254.664.664 0 01-.268-.924c.06-.103.125-.355.118-.793a7.178 7.178 0 00-.195-1.426c-.241-1.055-.652-2.058-1.011-2.537a.66.66 0 01.159-.945z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-aqua--reverse" fill="#16B4CA" fill-rule="nonzero" d="M386.608 24.559l1.13-8.173 5.644-.195 1.691 8.075-3.999 6.917z"></path>
        <path d="M385.027 14.977l2.229-4.176a1 1 0 01.848-.528l4.428-.153c.39-.014.752.2.927.548l2.038 4.029a1 1 0 01-.858 1.45l-8.695.3a1 1 0 01-.917-1.47z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M390.171 17.806a.726.726 0 01.995.071c.581.65 1.148 1.818 1.502 2.922.181.563.318 1.142.373 1.669.052.502.04 1.056-.172 1.5a.72.72 0 01-.936.335.666.666 0 01-.347-.898c.052-.107.095-.363.05-.8a7.207 7.207 0 00-.317-1.403c-.331-1.03-.827-1.995-1.225-2.44a.659.659 0 01.077-.956z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-orange" fill="#CA5716" fill-rule="nonzero" d="M210.988 26.086l1.699-8.074 5.643.2 1.123 8.174-4.472 6.62z"></path>
        <path d="M210.081 16.418l2.515-4.01a1 1 0 01.883-.468l4.429.156a1 1 0 01.886.612l1.751 4.161a1 1 0 01-.957 1.388l-8.695-.309a1 1 0 01-.812-1.53z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M215.015 19.599a.726.726 0 01.988.14c.534.69 1.017 1.894 1.294 3.02.141.574.237 1.162.255 1.691.016.505-.034 1.056-.276 1.484a.72.72 0 01-.957.27.665.665 0 01-.284-.92c.059-.104.12-.356.106-.795a7.224 7.224 0 00-.218-1.422c-.258-1.051-.686-2.048-1.052-2.52a.659.659 0 01.144-.948z" fill-opacity=".66" fill="#FFF"></path>
        <path class="blink-lime" fill="#16CA1D" fill-rule="nonzero" d="M263.118 27.903l1.411-8.516h5.647l1.412 8.516L267.353 35z"></path>
        <path d="M261.82 17.903l2.424-4.387a1 1 0 01.875-.516h4.406a1 1 0 01.915.596l1.939 4.387a1 1 0 01-.914 1.404h-8.77a1 1 0 01-.875-1.484z" fill="#393939" fill-rule="nonzero"></path>
        <path d="M266.912 20.962a.703.703 0 01.992.11c.558.702 1.084 1.945 1.401 3.114a9.24 9.24 0 01.314 1.761c.035.528.004 1.107-.223 1.564a.704.704 0 01-.947.317.712.712 0 01-.316-.952c.056-.11.107-.377.077-.836a7.768 7.768 0 00-.268-1.481c-.295-1.09-.757-2.118-1.14-2.6a.712.712 0 01.11-.997z" fill-opacity=".66" fill="#FFF"></path>
    </g>
</svg>

CSS

:root {
    --blink-prop: 1.5s linear infinite;
}


.blink-red {
    animation: blink-red var(--blink-prop);
}
.blink-red--reverse {
    animation: blink-red var(--blink-prop);
    animation-direction: reverse;
}
.blink-blue {
    animation: blink-blue var(--blink-prop);
}
.blink-blue--reverse {
    animation: blink-blue var(--blink-prop);
    animation-direction: reverse;
}
.blink-aqua {
    animation: blink-aqua var(--blink-prop);
}
.blink-aqua--reverse {
    animation: blink-aqua var(--blink-prop);
    animation-direction: reverse;
}
.blink-green {
    animation: blink-green var(--blink-prop);
}
.blink-orange {
    animation: blink-orange var(--blink-prop);
}
.blink-lime {
    animation: blink-lime var(--blink-prop);
}

@keyframes blink-red {
    0%,
    100% {
        fill: hsl(0, 100%, 50%);
    }
    35% {
        fill: hsl(56, 90%, 50%);
    }
    70% {
        fill: hsl(256, 100%, 50%);
    }
}
@keyframes blink-green {
    0%,
    100% {
        fill: hsl(133, 69%, 51%);
    }
    35% {
        fill: hsl(286, 100%, 50%);
    }
    70% {
        fill: hsl(196, 100%, 50%);
    }
}
@keyframes blink-blue {
    0%,
    100% {
        fill: hsl(223, 100%, 44%);
    }
    35% {
        fill: hsl(21, 100%, 50%);
    }
    70% {
        fill: hsl(106, 70%, 50%);
    }
}
@keyframes blink-orange {
    0%,
    100% {
        fill: hsl(22, 100%, 50%);
    }
    35% {
        fill: hsl(286, 100%, 50%);
    }
    70% {
        fill: hsl(206, 70%, 50%);
    }
}
@keyframes blink-lime {
    0%,
    100% {
        fill: hsl(122, 70%, 50%);
    }
    35% {
        fill: hsl(36, 100%, 50%);
    }
    70% {
        fill: hsl(3, 60%, 50%);
    }
}
@keyframes blink-aqua {
    0%,
    100% {
        fill: hsl(187, 100%, 50%);
    }
    35% {
        fill: hsl(66, 70%, 50%);
    }
    70% {
        fill: hsl(46, 100%, 50%);
    }
}

/*** don't copy ***/
body {
  background-color:black;
  margin-top:5rem;
}

Размещаем в удобном для вас месте и радуемся. На DLE напомню это проще сделать через рекламные материалы. Всех с наступающими зимними праздниками!