SVG Typography ~ 汚し系に挑戦 | SVG & Web Audio API

2019/6/1
@ Frontend Nagoya #10

Transcript

1. 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 47(
   5ZQPHSBQIZ
   d
   Ԛ͠ܥʹ௅ઓ
   c
 47(
   
   8FC
   "VEJP
   "1*
   
   !
   'SPOUFOE
   /BHPZB
   
2. "HFOEB  Θͨ͘͠ʹ͍ͭͯ
    ࠓ೔৮ΕΔ47(ͷ͍͍ͱ͜Ζ
    47(
   5ZQPHSBQIZ
   d
   Ԛ͠ܥʹ௅ઓ
    ༹͚จࣈܥ
    ςΫενϟܥ
    47(
   
   8FC
   "VEJP
   "1*
3. Θͨ͘͠ʹ͍ͭͯ { "@context": "http://schema.org", "@type": "Person", "name": "Kyousuke Abe", "alternateName": "安部亨佑", "birthPlace": "Iwata, Shizuoka", "birthDate": "1982.9.24", "height": "181 cm", "weight": "68 kg", "gender": "male", "worksFor": "FRAME LUNCH Inc.", "workLocation": "Ohsu, Nagoya-shi”, "jobTitle": "Web engineer", "nationality": "Japanese", "url": "https://kaave.github.io", "sameAs": [ "https://twitter.com/junkjunctions", "https://github.com/kaave" ] } { "likes": [ "Vim-style key binding", "Emacs-style key binding", "ErgoDox", "TypeScript", "Scala", "React", "fish shell", "Twitter", "Music", "Football", "Casual cycling”, "Bodyweight Workout", "Spicy foods", "Dried fruit", "Sweets cooking", "American coffee" ] }
4. ࠓ೔৮ΕΔ47(ͷ
 ͍͍ͱ͜Ζ  ϑΟϧλ͕௒ڧ྽ $44ͱҟͳΓ *&Ͱ΋͔ͳΓ͍͚Δ
    ϓϩάϥϚϒϧ +4Ͱ΍Γ͍ͨ์୊
5. ࠓ೔৮Εͳ͍ͱ͜Ζ  ͍͍ͱ͜ΖҎ֎શ෦
 εϥΠυͰ͸৮Ε·ͤΜ͕
 ৭ʑ஻Δ͔΋ʜɻ
6. 47(
   5ZQPHSBQIZ
   d
 Ԛ͠ܥʹ௅ઓ
7. ˞จࣈͰ͔͍͍ͬ͜͜ͱ΍Ε͹ ͳΜͰ΋5ZQPHSBQIZͩͱࢥͬͯ ࿩ΛਐΊ·͢
8. Θ͕ͨ͠͸͡Ίͯҙࣝͨ͠ 5ZQPHSBQIZ ˜
   6OEFSXPSME
9. ϋʔυίΞɾύϯΫͷϑϥΠϠʔ
10. ஶ໊ϋʔυίΞόϯυͷϩΰ ˜
    7PJE
    ˜#BE
    #SBJOT
    ˜FOWZ
    ˜$SBTT
    ˜(PETQFFE
    ZPV
    #MBDL
    FNQFSPS
    ˜
    4FDPOET
    ˜$POWFSHF
11. ༹͚จࣈܥ
12. ͜ΜͳΜ
13. ·ͣ͸Կ΋ߟ͑ͣʹTBOTTFSJGͰ
14. $SJNTPO
    5FYUΛ࢖͏
15. Ұ୴ϘΧ͢
 Ψ΢γΞϯϒϥʔ
16. Ͱ͍ΘΏΔϨϕϧิਖ਼
17. ͳΜ͔ΠϚΠνʜ
 ͍ͯ͏͔Θ͔ΜͶ͐ʜ
18. Ͳ͏ௐ੔ͯ͠΋ΠϚΠνͳͷͰ
 ࡶʹ΋͏Ұճ͔͚Δ
    ͍͍ͬ
19. ;ͪͷϒνϒν͕΄͍͠
20. TUSPLFEBTIBSSBZΛ࢖͏
21. ॏͶ·ͬͯ͘ɺTUSPLFEBTIBSSBZΛͨ͘͞Μ࢖͏
 ΞΫηγϏϦςΟʜ
22. MFUUFSTQBDJOHʜ͸
 ϒϥ΢βґଘ͕ܹ͍͠ͷͰXJEUIͱUFYU-FOHUIͰௐ੔
23. ׬੒οο
 ϏϑΥʔΞϑλʔ
24. Ͱ৭ʑࢼ͢Α͏ʹ࡞Γ·ͨ͠ IUUQTTWHOFUMJGZDPNTBNQMFIUNM
25. ςΫενϟܥ
26. ͜ΜͳΜ
27. Կ΋ߟ͑ͣʹ
28. ϑΥϯτ͸3PCPUP
    $POEFOTFEͰ
29. ্Λͪΐͬͱ࡟Δ
30. ෯ͱϑΥϯταΠζΛઌʹௐ੔
31. ςΫενϟషͬͯΈΔ
32. ;ͪΛ΅͔͢
 TUSPLFEBTIBSSBZ͸্Λ࡟ͬͨؔ܎Ͱແཧ
 ϑΟϧλ࢖ͬͯͦΕΒ͘͠͝·͔͢
33. ͱΓ͋͑ͣ׬੒ʜͰ΋΍ͬͺԑ͕ඍົ
34. ஋Λ͍ͬͨ͡Β࿪Μͩ
 ΄΄ɺ͓΋Ζ
35. ςΫενϟೖΕସ͑ͯ
 จࣈִؒ΋٧ΊͯΈͨ
36. ํ޲ੑϒϨϒϨ͚ͩͲ ׬੒οο
37. ͬͪ͜΋༡΂Δͷ࡞Γ·ͨ͠ IUUQTTWHOFUMJGZDPNTBNQMFIUNM
38. 47(
    
    8FC
    "VEJP
    "1*
39. ͔ͤͬ͘ͷ47(ͳͷͰ
 ΰϦΰϦ͍͡Γ͍ͨʜ
40. ͪΐͬͱ೧ͬͨ஋Ͱ  Ϛ΢εʁ
     Ң౓ܦ౓ʁ
     εϚϗͷ৔߹ ܏͖ʁ
     *1ʁ
41. ͦ͜Ͱ8FC
    "VEJP
    "1*
    
 ద౰ͳԻͱಉظͤͯ͞ΈΔ
42. ΍ͬͯΈͨ
43. ;ͭ͏ʹͰ͖Δʜʂͨͷ͍͠ʜʂ
44. ͓ݟͤ͠·͢ IUUQTTWHOFUMJGZDPNTBNQMFIUNM
45. ͱ͍͏Θ͚Ͱɺ·ͱΊ  ͍Ζ͍Ζࢼͯͯ͠௒͓΋͠Ζ͔ͬͨ
     47(ͷϑΟϧλ͸ڧྗ
     ࠓճ͸ςΩετʹ͔͚͚ͨͲɺKQHʹ ͔͚ͨΓ΋Ͱ͖·͢Α
     Ͱ΋͚ͩ͜͜ͷ࿩ɺϒϥ΢β͝ͱʹݟ ͑ํ͕͍ͩͿҧ͍·͢
     ͻͶͬͨ஋Λ47(ʹ൓өͤ͞Δͷ΋༨༟
     ͝ΊΜͳ͍͞ɺ΍ͬͺ·ͱ·Μͳ͍
46. ࠓճͷओͳࢀߟࢿྉ΍੍࡞෺͸ҎԼ
 ࡉ͔͍όʔδϣϯ৘ใͳΜ͔΋ IUUQTTWHOFUMJGZDPN
47. ͓͠·͍ Ͳ͏΋Ͱͨ͠
 ࣭໰͋ͬͨΒ͍ͭͰ΋Ͳ͏ͧ
    (JU)VC
    LBBWF
 5XJUUFS
    !KVOLKVODUJPOT
 8FC
    IUUQTLBBWFHJUIVCJP