Blog

svgartista.netを使ったSVGアニメーションの作り方

https://svgartista.net/を使用してSVGのアニメーションを作成しました↓

See the Pen SVG animation with svgartista.net by Become (@truly_become) on CodePen.

まずイラストレーターでテキストやオブジェクトを作ります。

そしてアウトライン化しておきます。

名前を付けて保存からSVG形式で保存します。

するとSVGオプションが開かれるので、SVGコードを選択します。

選択するとコードが出てきますので、<svg　～　<svg>までをコピーします。

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve" width="500" height="500">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0 svg-elem-1" d="M151.03,122.84c4.61,1.09,10.05,4.93,10.05,12.29c0,4.35-1.66,7.42-3.9,9.6c-3.26,3.2-8.51,4.61-15.87,4.61
		c-4.03,0-7.04-0.32-9.02-0.51v-47.93c2.69-0.58,6.53-1.02,10.5-1.02c6.02,0,9.98,1.15,12.86,3.58c2.3,1.98,3.65,4.8,3.65,8.45
		c0,4.8-3.26,8.96-8.26,10.75V122.84z M143.29,121.05c6.46,0,10.62-3.71,10.62-8.7v-0.06c0-5.76-4.22-8.26-10.88-8.26
		c-2.82,0-4.48,0.19-5.44,0.45v16.57H143.29z M137.59,144.79c1.22,0.26,2.94,0.32,5.18,0.32c6.72,0,12.73-2.62,12.73-9.98
		c0-7.3-6.34-9.98-12.8-9.98h-5.12V144.79z"></path>
	<path class="st0 svg-elem-2" d="M193.91,147.48c-1.98,0.96-5.63,2.18-10.94,2.18c-10.18,0-16.25-7.17-16.25-17.6
		c0-10.94,6.14-18.81,15.55-18.81c10.75,0,13.5,9.86,13.5,15.94c0,1.22-0.06,2.11-0.13,2.94H171.9c0.06,9.66,5.57,13.31,11.84,13.31
		c4.35,0,6.98-0.9,9.15-1.79L193.91,147.48z M190.52,128.15c0.06-4.74-1.92-10.88-8.77-10.88c-6.4,0-9.22,6.08-9.73,10.88H190.52z"></path>
	<path class="st0 svg-elem-3" d="M227.25,147.67c-1.54,0.77-4.99,1.98-9.47,1.98c-9.98,0-16.57-7.1-16.57-17.79c0-10.75,7.1-18.62,17.85-18.62
		c3.9,0,7.04,1.15,8.38,1.86l-1.34,4.29c-1.47-0.83-3.78-1.79-7.17-1.79c-8.06,0-12.29,6.46-12.29,13.95
		c0,8.45,5.06,13.76,12.1,13.76c3.46,0,5.82-0.96,7.55-1.73L227.25,147.67z"></path>
	<path class="st0 svg-elem-4" d="M264.31,131.23c0,12.99-8.58,18.49-16.32,18.49c-8.96,0-15.87-6.72-15.87-17.98c0-11.9,7.42-18.49,16.32-18.49
		C257.97,113.24,264.31,120.54,264.31,131.23z M248.25,117.4c-7.55,0-10.69,7.42-10.69,14.14c0,7.74,4.29,14.02,10.56,14.02
		c6.34,0,10.75-6.27,10.75-14.14C258.87,125.21,255.86,117.4,248.25,117.4z"></path>
	<path class="st0 svg-elem-5" d="M319.86,148.95h-5.25v-20.16c0-6.78-2.43-11.14-7.68-11.14c-4.29,0-8.19,4.03-8.19,9.34v21.95h-5.25v-21.5
		c0-5.57-2.37-9.79-7.3-9.79c-4.54,0-8.58,4.48-8.58,9.92v21.37h-5.25v-25.92c0-3.58-0.13-6.14-0.26-9.02h4.67l0.32,5.63h0.19
		c1.92-3.39,5.12-6.4,10.62-6.4c4.54,0,8.06,2.82,9.54,6.98h0.13c2.3-4.16,5.82-6.98,11.2-6.98c4.29,0,11.07,2.75,11.07,14.72
		V148.95z"></path>
	<path class="st0 svg-elem-6" d="M354.87,147.48c-1.98,0.96-5.63,2.18-10.94,2.18c-10.18,0-16.25-7.17-16.25-17.6
		c0-10.94,6.14-18.81,15.55-18.81c10.75,0,13.5,9.86,13.5,15.94c0,1.22-0.06,2.11-0.13,2.94h-23.74
		c0.06,9.66,5.57,13.31,11.84,13.31c4.35,0,6.98-0.9,9.15-1.79L354.87,147.48z M351.48,128.15c0.06-4.74-1.92-10.88-8.77-10.88
		c-6.4,0-9.22,6.08-9.73,10.88H351.48z"></path>
</g>
<circle class="st0 svg-elem-7" cx="90.5" cy="174.5" r="5"></circle>
<circle class="st0 svg-elem-8" cx="54.5" cy="159.5" r="5"></circle>
<circle class="st0 svg-elem-9" cx="35.5" cy="119.5" r="5"></circle>
<circle class="st0 svg-elem-10" cx="54.5" cy="77.5" r="5"></circle>
<circle class="st0 svg-elem-11" cx="90.5" cy="64.5" r="5"></circle>
<circle class="st0 svg-elem-12" cx="120.5" cy="72.5" r="5"></circle>
<circle class="st0 svg-elem-13" cx="120.5" cy="166.5" r="5"></circle>


</svg>

次にSVG　ARTISTAへ戻りanimation typeをAnimationへ変更します。

そして、PASTE　MARKUPを選択します。

そして、先ほどコピーしたソースコードを貼り付けます。

次にイラストレーターに戻り、SVGデータに色を付けます。

そして、今回も先ほどと同様に別名で保存からSVG形式を選択し、SVGオプションが開かれるので、SVGコードを選択します。

今度は

<style type="text/css">　～　/svg>までをコピーします。

そして、次にSVG　ARTISTAへ戻り

</SVG>の手前にペーストします。

そしてら、APPLYを選択して完成です！

GET　CODEを選択します。

COPY SVGでコードとCOPY ANIMATION CODEからCSSをコピーしてファイルに貼り付ければ完成です！！

VIEW ALL