コニファ・ロゴ

csstest:svgを使って筆順を示すサイン(signature)ジェネレータ

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

tweak signature

 

サンプルの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>

 

 

 

戻るボタン