How can I create a navigational compass using Typescript and HTML

Question

I'm looking to display a compass heading using HTML, CSS, and Typescript for my Ionic project. I've got the heading available as a number between 0-360, and a true heading which is obviously 360.

How can I best go about doing this? I'd like it to be animated in real time.

A couple ideas:

• Have a background image of a compass, overlay a needle image on the compass image and rotate that needle depending on the degree of heading.
• Build out a circle and needle using CSS entirely, with no images, and use the same logic of rotation.