Advanced SVG Graphics?

is it possible to make a heads up display in game where in this case a ball will be circled with a single element like on the page linked above in relation to the variable of swingPower. Im not very savy with SVG graphics and would really like to figure this out, till then im going to use a simpler box display, bit Id really like to figure out the radial power bar.

It looks like they are using the path element to draw the arcs for the clock. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

You could just create SVG elements using Javascript and add them to the page. If you attached elements to the div with id application-container it should work when you publish your game.

could you explain this in more depth?

I have a variable power that is would control the 360 degree variable of the arc just by multiplying them together because the power is base 1 but can roll over a set number of times depending on the location your at so at some points it could go say as high as three, my idea is to have a circle fill around a ball as the power builds up and when it goes over 1 changes color to a darker shade of red and starts over.

I have no idea where to start.