Possible To Draw Text Along An Oval With Js/css?

Is it possible to draw names along an oval in HTML5 using javascript? The goal is to be able to add names along an arbitrary offset on the oval like the attached image.

Solution 1:

You could simply use svg's textPath element to achieve this.

<svgwidth="300"height="150"viewBox="0 -15 200 130"><pathd="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0"fill="#645432" /><pathid="shape2"d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0"fill="none" /><pathid="shape"d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0"fill="#987C54"stroke="#8BAC96" /><text><textPathstartOffset="30"xlink:href="#shape">Jonathon</textPath></text><text><textPathstartOffset="150"xlink:href="#shape">Sierra</textPath></text><text><textPathstartOffset="40"xlink:href="#shape2">Naomie</textPath></text><text><textPathstartOffset="170"xlink:href="#shape2">Daniel</textPath></text></svg>