svgを使って筆順を示すサイン（signature）ジェネレータです。「generate signature」ボタンをクリックすると、上側のラインの上に戦国武将の花押のようなサインを生成してくれます。下側の「tweak signature」ボタンをクリックして表示されるrangeボタンで表示生成するサインの長さを少し調整できます。

サンプルのhtmlソース

<div class="container">
  <svg viewbox="0 0 100 50">
    <line x1="2" y1="50" x2="98" y2="50" stroke="white" stroke-width="1.5px">
  </svg>
  <button>generate signature ☝</button>
  <details>
    <summary>
      tweak signature
    </summary>
    <div class="settings">
      <label for="length">
        long
      </label>
      <input type="range" id="length" name="length" min="100" max="200" value="150">
    </div>
  </details>
</div>