手書きSVGいいよ

手書きSVGが良いことについて1分で話します。

# これ作るぞ！のgifアニメ
https://www.dropbox.com/s/zbnnj91veiewzgx/Jul-24-2019%2018-39-47.gif?dl=0

# スライド内のリンク
- pathのdについて https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths
- 弧のコンポーネント https://codesandbox.io/s/svgarc-ozc41
- 完成したやつ https://codesandbox.io/s/inputpassword-6d7g1

Transcript

1. खॻ͖47(͍͍Α 6*5
   NFFUVQ
   WPM
   !SFTFTTI
2. ͜Ε࡞Δͧʂ
3. ԿͰ࡞Δͷʂʁ खॻ͖47(ʂ
4. खॻ͖ͬͯԿʂʁ <path d="M 20 1 A 19 19 0 0 1 39 20"> ͜ΕΛखͰॻ͘ʂ ˞͜Ε͸ހͷύε
5. Eͷத਎ͳʹʂʁ <path d="M 20 1 A 19 19 0 0 1 39 20"> .PWF5P໋ྩ
6. Eͷத਎ͳʹʂʁ <path d="M 20 1 A 19 19 0 0 1 39 20"> "SD5P໋ྩ
7. Eͷத਎ͳʹʂʁ <path d="M 20 1 A 19 19 0 0 1 39 20"> ͳΜ͔Ҿ਺͍Ζ͍Ζʂ
8. Eͷத਎ͳʹʂʁ <path d="M 20 1 A 19 19 0 0 1 39 20"> EΛ׬શʹཧղʂ https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths
9. ͱΓ͋͑ͣހͷ
   ίϯϙʔωϯτ࡞Δ https://codesandbox.io/s/svgarc-ozc41
10. ހ͕Ͱ͖͔ͨΒ
    શ෦࡞Δ https://codesandbox.io/s/inputpassword-6d7g1