WCAN mini 2016 Vol.2のライトニングトークで発表した内容です。

5. ✦
✦
✦
✦
✦

9. Ŏ
<g class=“chick”>
<path d=“…”></path>
</g>
<g class=“stone”>
<path d=“”></path>
</g>

11. ŏ

12. @keyframes walking {
0% {
background-position: 0 0;
}
100% {
background-position: -705px 0;
}
}
.walking-chick {
animation: .6s walking steps(5) 5
}

13. @keyframes walking {
0% {
background-position: 0 0;
}
100% {
background-position: -705px 0;
}
}
.walking-chick {
animation: .6s walking steps(5) 5
}
Ŏ

15. ŏ

17. Ŏ

19. <path id="wave-path"
d="M0,0c0,0,566,66,566,118c0,
66.1-375,92.7-510,178c-36.7,2
3.2-12.2,44.5-8,72c4,26-48,70
-48,132V0z" data-
to="M0-1c0,0,946-124,953,157c
1.6,66-106,106-132,179c-14.6,
40.9,13.2,35.7,22,93c25,163-7
71,71-843,71V-1z"
fill="url(#pattern)"></path>

21. <svg>
<pattern id=“pattern”>
<path>…</path>
</pattern>
<path d=“…” fill=“url(#pattern)"></path>
</svg>

23. ✦
✦
✦