Here is the code I promised. Other than having sized down to the smallest size square (shown in previous Photo) the arrow moves out of place when making larger.
<style>
div.label {
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0px;
text-align:center;
font-size:15px;
color:#FFFFFFF;
font-weight:bold;
}
div.Dir {
position: absolute;
top: 85%;
bottom: 0%;
left: 0%;
right: 0px;
text-align:left;
font-size:10px;
color:#0db9f0;
font-weight:bold;
}
div.Speed {
position: absolute;
top: 85%;
bottom: 0%;
left: 0%;
right: 0px;
text-align:right;
font-size:10px;
color:#0db9f0;
font-weight:bold;
}
div.Warrow {
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
transform: rotate({{itemValue('windDir')}}deg);
transform-origin: center center;
transition: all 0.5s ease-in-out;
}
.win-svg * {
<!--display: block;
margin: 0 auto; -->
}
</style>
<div>
<div class="Compass">
<img src="/static/compass.png" height=100% width=100% alt="Wind Direction"></img>
</div>
<div class="Warrow">
<svg height= 60% width= auto viewBox="0 0 400 400" preserveAspectRatio="xMinYMin" transform="translate(20,15)">
<path class="wind-svg" id="Wind_Arrow"
fill="none" stroke="yellow" stroke-width="5"
d="M 0.00,400.00
C 2.42,399.98 4.62,400.02 7.00,399.47
7.00,399.47 47.00,382.60 47.00,382.60
47.00,382.60 156.00,335.57 156.00,335.57
156.00,335.57 187.00,321.99 187.00,321.99
190.39,320.58 196.61,317.23 200.00,317.13
203.52,317.04 209.48,320.52 213.00,321.99
213.00,321.99 243.00,334.80 243.00,334.80
243.00,334.80 272.00,347.57 272.00,347.57
272.00,347.57 351.00,381.43 351.00,381.43
351.00,381.43 380.00,394.01 380.00,394.01
388.03,397.35 390.85,399.79 400.00,400.00
399.76,390.29 391.67,377.85 387.25,369.00
387.25,369.00 357.25,308.00 357.25,308.00
357.25,308.00 249.25,92.00 249.25,92.00
249.25,92.00 214.25,22.00 214.25,22.00
214.25,22.00 206.14,6.00 206.14,6.00
205.02,4.03 203.34,0.72 200.81,0.44
197.88,0.12 196.06,2.84 194.80,5.02
194.80,5.02 186.75,21.00 186.75,21.00
186.75,21.00 151.75,91.00 151.75,91.00
151.75,91.00 42.75,308.00 42.75,308.00
42.75,308.00 21.75,350.00 21.75,350.00
21.75,350.00 10.00,374.00 10.00,374.00
6.34,382.48 0.24,390.55 0.00,400.00 Z" />
</svg>
</div>
<div class="Speed">{{itemValue('windSpeed')}} MPH</div>
<div class="Dir">{{itemValue('windDir')}} Deg.</div>
<div class="label">Wind</div>
</div>