<script type="module" src="https://unpkg.com/@fboes/horizontal-situation-indicator@latest/horizontal-situation-indicator.js"></script>

<horizontal-situation-indicator 
  id="hsi" 
  heading="60.0" heading-select="60.0"
  nav1-course="45" nav1-bearing="15"
  nav2-bearing="90">
</horizontal-situation-indicator>

body {
  background: black;
  color: white;
  text-align: center;
  font: sans-serif;
}