Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

5分でわかるSVG/svg_in_5_minutes

konnyaku256
November 21, 2020

 5分でわかるSVG/svg_in_5_minutes

ベクター形式の画像ファイルフォーマットであるSVGについて解説しています。
応用として、animate 要素を使ったSVGアニメーションにも触れています。

スライド中に登場するCodePenのリンクはこちら
path 要素でハートを描画する例→ https://codepen.io/konnyaku256/pen/LYZvMwa
animate 要素でアニメーションする例→ https://codepen.io/konnyaku256/pen/BazEJJy

p1ass生誕LT会での登壇資料です。
https://connpass.com/event/193445/

konnyaku256

November 21, 2020
Tweet

More Decks by konnyaku256

Other Decks in Technology

Transcript

  1. த਎͸9.-Ͱهड़͞ΕͨςΩετ <svg width="805" height="805" viewBox="0 0 805 805" fill="none" xmlns="http://www.w3.org/2000/svg">

    <path d="M262.762 542.384C262.762 542.384 61.0005 574.884 61 401.385C60.9995 238.884 262.762 263.884 262.762 263.884" stroke="#545454" stroke- width="122" stroke-linecap="round"/> <path d="M541.126 541.5C541.126 541.5 573.508 743.999 400.641 744C238.734 744 263.642 542.5 263.642 542.5" stroke="#FFC287" stroke-width="122" stroke-linecap="round"/> <path d="M542.238 263.914C542.238 263.914 743.999 231.414 744 404.913C744 567.414 541.242 541.414 541.242 541.414" stroke="#545454" stroke- width="122" stroke-linecap="round"/> <path d="M264.754 263.5C264.754 263.5 232.372 61.0005 405.239 61C567.147 60.9995 542.238 264.5 542.238 264.5" stroke="#E79572" stroke-width="122" stroke-linecap="round"/> <path d="M264.754 263.884C264.754 263.884 60.9995 238.885 61 401.385" stroke="#545454" stroke- width="122" stroke-linecap="round"/> </svg>
  2. Ξχϝʔγϣϯͷ͘͠Έ <svg ...> <g> <path class="left" stroke-dasharray="2400 400" stroke-dashoffset="2800" d="..."

    stroke="..."> <animate attributeName="stroke-dashoffset" to="0" dur="10s" begin="6s" repeatCount="indefinite" /> </path> <path class="bottom" stroke-dasharray="2400 400" stroke-dashoffset="2800" d="..." stroke="..."> <animate attributeName="stroke-dashoffset" to="0" dur="10s" begin="4s" repeatCount="indefinite" /> </path>