ArcScrubber

This is a proof-of-concept application of traversing an element along the path of an arc. The traversing element (dot), is contained by its parent element (box), which is anchored via absolute positioning to the arc.

It's cross-browser friendly back to IE 10, and has successfully tested on iOS devices and Android (emulators).

The core formula for connecting the dot, box, and arc is:

dotPosY = ((boxHeight - (arcTop - boxTop)) - (arcRadius - Math.sqrt(arcRadius^2 - mosPos^2))) - dotHalfWidth

In this case, the dot is moved via translate3d(), so dotPosY must be negative. dotHalfWidth is to center the dot along the arc.

Note: the (arcTop - boxTop) is for an optional vertical offset between the top of the box and the top of the arc. If using this offset, make sure that

html, body {
    height: 100%;
    width: 100%;
}

Otherwise the offset will not be calculated correctly.

shiplet/arcscrubber

ArcScrubber