SVGのパスアニメーションを使って線が描画されていくアニメーションを作りたい

Question

あるボタンにホバーしたらイラレで書き出したL字型の線がスタートからゴールまでイーズアウトで描画されていくアニメーションをcssやjsで作りたいのですが、やり方がわからず困っています。。イメージは以下のような感じです。ご教授の程お願いします。。

Answer 1

vivus.jsというライブラリで簡単に実現できます。illustratorで作ったパスファイルの<svg>タグの部分を抜き取ってhtmlに貼り付けてください。

<!-- vivus,jQuery読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>

<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="237.26px" height="422.36px" viewBox="0 0 237.26 422.36" enable-background="new 0 0 237.26 422.36"
	 xml:space="preserve">
<circle cx="35.75" cy="68.25" r="6.25"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="35.75" y1="68.25" x2="35.75" y2="353.5"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="35.75" y1="353.5" x2="193.5" y2="353.5"/>
<circle fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="198.5" cy="353.5" r="6.25"/>
</svg>

<button style = "background: #000; width: 100px; height: 50px;" id = "target"></button>

<style>
#svg {
  visibility: hidden;
}
</style>

<script>
const vivus = new Vivus('svg', {
    type: 'oneByOne',
    duration: 200,
    animTimingFunction:Vivus.EASE_OUT,
});

$(function(){
  $('#target').on('mouseover', function(){
    $('#svg').css('visibility', 'visible');
    vivus.reset().play();
  });
  $('#target').on('mouseout', function(){
    $('#svg').css('visibility', 'hidden');
  });
});
</script>