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.

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