JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
    


<svg viewBox="0 0 559 509">
<g id="pine">
	<polygon style="fill:#B8B6DA;" points="167.9,248.6 225.5,14.8 283,248.6 	"/>
	<g>
		
			<line style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" x1="225.5" y1="334.9" x2="225.5" y2="79.2"/>
		
			<line style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" x1="205.5" y1="151.4" x2="225.5" y2="169.3"/>
		<polyline style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" points="198.5,204.3 
			225.5,238.7 248.9,211.1 		"/>
		<polyline style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" points="211.6,102.9 
			225.3,123.7 239.4,116.6 		"/>
		
			<line style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" x1="247.7" y1="139.3" x2="227.4" y2="161.8"/>
	</g>
    
    
         
</g>
  </svg>
</div>

CSS

@-webkit-keyframes breeze{
	0% {-webkit-transform: rotate(0deg);}
	50% {-webkit-transform: rotate(3deg);}
	100% {-webkit-transform: rotate(0deg);}
}

@keyframes breeze{
	0% {transform: rotate(0deg);}
	50% {transform: rotate(3deg);}
	100% {transform: rotate(0deg);}
}

.bg {
    background: #ADDDD9;
    width: 559px;
    height: 346px;
}

svg {
    -webkit-transform-origin: 50% 100%;
   -webkit-animation: breeze 5s ease-out infinite;
   transform-origin: 50% 100%;
   animation: breeze 5s ease-out infinite;
}