Новогодняя елка с гирляндами для сайта

Тут на днях немного задумался, а ведь до Нового года  осталось около 40 дней. Кстати я на под-домене запустил счётчик отсчёта времени до Нового года. Ну и в преддверии конечно же буду публиковать новогодние украшения для сайта. И первое украшение это Новогодняя елка с гирляндами для сайта. Выполнена ёлочка на CSS И HTML. Из анимации мерцающая гирлянда. Размер елки задается шириной SVG элемента в классе #tree

HTML

<svg id="tree" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="-1694.2 483.2 199.3 285.2" xml:space="preserve">
    <g id="tree">
        <rect x="-1605.6" y="697.1" class="st0" width="21.7" height="71.3"/>
        <polygon class="st1" 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="st2" 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="lights">
        <g id="blue-lt">
            <circle class="blue-lt g1" cx="-1575" cy="706.1" r="9"/>
            <circle class="blue-lt g2" cx="-1621.3" cy="641" r="7"/>
            <circle class="blue-lt g3" cx="-1665.5" cy="732.8" r="7"/>
            <circle class="blue-lt g1" cx="-1600.3" cy="668.5" r="7"/>
        </g>
        <g id="blue-dk">
            <circle class="blue-dk g3" cx="-1578.3" cy="570.8" r="7"/>
            <circle class="blue-dk g1" cx="-1538" cy="718.6" r="7"/>
            <circle class="blue-dk g2" cx="-1594.8" cy="610.3" r="7"/>
        </g>
        <g id="red-md">
            <circle class="red-md g1" cx="-1635.6" cy="681.7" r="9"/>
            <circle class="red-md g1" cx="-1570.3" cy="634" r="9"/>
            <circle class="red-md g2" cx="-1607.3" cy="711.6" r="7"/>
        </g>
        <g id="gold-lt">
            <circle class="gold-lt g1" cx="-1612.3" cy="585.8" r="9"/>
            <circle class="gold-lt g2" cx="-1631.6" cy="705.6" r="7"/>
        </g>
        <g id="gold-dk">
            <circle class="gold-dk g2" cx="-1572.3" cy="604.7" r="7"/>
            <circle class="gold-dk g3" cx="-1561.3" cy="681.7" r="7"/>
        </g>
    </g>
    <polygon class="st3" points="-1600.5 499.9 -1618.1 499.9 -1603.8 510.3 -1609.3 527 -1595 516.7 -1595 483.2 "/>
    <polygon class="st4" points="-1572 499.9 -1589.6 499.9 -1595 483.2 -1595 516.7 -1580.8 527 -1586.2 510.3 "/>
</svg>

CSS

#tree {
    width: 220px;
    display: block;
    margin: 0 auto;
}
.st0 {
    fill:#332C28;
}
.st1 {
    fill:#0f690f;
}
.st2 {
    fill:#388f38;
}
.st3 {
    fill:#a60505;
}
.st4 {
    fill:#d90000;
}
.red-md {
    fill: #aa1231;
    animation: 0.6s red-flash ease-in-out infinite;
}
@keyframes red-flash {
    40% {
        fill: #ea385c;
    }
    80% {
        fill: #aa1231;
    }
}
.gold-lt {
    fill: #c1881c;
    animation: 0.6s gold-lt-flash ease-in-out infinite;
}
@keyframes gold-lt-flash {
    40% {
        fill: #e7b75c;
    }
    80% {
        fill: #c1881c;
    }
}
.blue-lt {
    fill: #1f3e64;
    animation: 0.6s blue-lt-flash ease-in-out infinite;
}
@keyframes blue-lt-flash {
    40% {
        fill: #386fb1;
    }
    80% {
        fill: #1f3e64;
    }
}
.blue-dk {
    fill: #0f1f2f;
    animation: 0.6s blue-dk-flash ease-in-out infinite;
}
@keyframes blue-dk-flash {
    40% {
        fill: #28527c;
    }
    80% {
        fill: #0f1f2f;
    }
}
.gold-dk {
    fill: #69512a;
    animation: 0.6s gold-dk-flash ease-in-out infinite;
}
@keyframes gold-dk-flash {
    40% {
        fill: #b28947;
    }
    80% {
        fill: #69512a;
    }
}
.g1 {
    animation-delay: 0s;
}
.g2 {
    animation-delay: 0.4s;
}
.g3 {
    animation-delay: 0.8s;
}

С наступающими Новогодними праздниками!!!