TextPath Example (dynamic curve)

Click once to move the first control point of the bezier curve that defines the text path. Click again to move the second control point.

The gray line represents the path that the text is drawn upon. The two gray rectangles mark the beginning and end of the text path.

Example

1 2

Code

<!-- Include the VML behavior -->
<style>v\: * { behavior: url(#default#VML);display:inline-block }</style>

<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>

<v:oval id="oval1" fillcolor="white" strokecolor="red" 
  style="position:relative;top:10px;left:200px;width:35px;height:35px;z-index:5">
  <v:textbox>1</v:textbox>
</v:oval>

<v:oval id="oval2" fillcolor="white" strokecolor="red" 
  style="position:relative;top:10px;left:300px;width:35px;height:35px;z-index:5;mso-fit-text-to-shape:false">
  <v:textbox>2</v:textbox>
</v:oval>

<v:rect id="rect1" fillcolor="gray"
  style="position:relative;top:10px;left:50px;width:10px;height:10px;z-index:5"/>

<v:rect id="rect2" fillcolor="gray" 
  style="position:relative;top:10px;left:408px;width:10px;height:10px;z-index:5"/>

<v:curve id="tc" 
  style="position:relative;z-index:3" from="50px 200px" to="400px 200px" 
  control1="200px 250px" control2="300px 250px">
  <v:stroke weight="1pt" color="blue"  filltype="solid"/>
  <v:fill on="True" color="yellow" color2="green" type="gradient"/>
  <v:path textpathok="True"/>
  <v:textpath on="True" id="mytp" style="font:normal normal normal 36pt Arial" 
    fitpath="True" fitpath="True" string="Hello"/>
</v:curve>

<v:curve id="cv" 
  style="position:relative;z-index:2" from="50px 200px" to="400px 200px" 
  control1="200px 200px" control2="300px 200px">
  <v:stroke weight="1pt" color="black" />
</v:curve>

<script language="JavaScript">
var clickcount;
var winx;
var winy;
clickcount = 0;
document.onclick=WhereClick;
function WhereClick()
{
  clickcount = clickcount + 1;
  switch (clickcount)
  {
    case 1:
      tc.control1.x = window.event.x
      tc.control1.y = window.event.y
      cv.control1.x = window.event.x
      cv.control1.y = window.event.y
      oval1.style.left = tc.control1.x
      oval1.style.top = tc.control1.y
      break;
      
    case 2:
      tc.control2.x = window.event.x
      tc.control2.y = window.event.y
      cv.control2.x = window.event.x
      cv.control2.y = window.event.y
      oval2.style.left = tc.control2.x
      oval2.style.top = tc.control2.y
      break;
      
    default:
      alert("else");
  }

  if (clickcount > 1) 
  {
    clickcount = 0
  }
}
</script>