<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.