<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">
<style type="text/css">
.st0{fill:#332C28;}
.st1{fill:#00513E;}
.st2{fill:#003828;}
.st3{fill:#386FB1;}
.st4{fill:#28527C;}
.st5{fill:#EA385C;}
.st6{fill:#E7B75C;}
.st7{fill:#B28947;}
</style>
<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">
<circle class="red g1" cx="-1635.6" cy="681.7" r="9"/>
<circle class="red g1" cx="-1570.3" cy="634" r="9"/>
<circle class="red 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="st6" points="-1600.5 499.9 -1618.1 499.9 -1603.8 510.3 -1609.3 527 -1595 516.7 -1595 483.2 "/>
<polygon class="st7" points="-1572 499.9 -1589.6 499.9 -1595 483.2 -1595 516.7 -1580.8 527 -1586.2 510.3 "/>
</svg>
*, html {
box-sizing: border-box;
}
body {
padding: 2em;
}
#tree {
max-width: 300px;
display: block;
margin: 0 auto;
}
$colors: (
red: #EA385C,
gold-lt: #E7B75C,
blue-lt: #386FB1,
blue-dk: #28527C,
gold-dk: #B28947
);
@each $name, $color in $colors {
.#{$name} {
fill: darken($color, 20%);
@keyframes #{$name}-flash {
40% { fill: darken($color, 0%); }
80% { fill: darken($color, 20%); }
}
animation: .6s #{$name}-flash ease-in-out infinite;
}
}
$timings: (
g1: 0s,
g2: .4s,
g3: .8s
);
@each $timing-name, $timing in $timings {
.#{$timing-name} {
animation-delay: $timing;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.