歌川さんの記事で-webkit-text-strokeの存在を知らなかった。昔はこういうことをやろうとすると、同じ文字の要素をいくつか生成して、ちょっとずつ座標を変えて重ねる、ということをやっていて地道なことをしていた。良い時代になって嬉しい。
だんだんstrokeを伸ばしていったらおもしろいかと思って、最初CSSアニメーションでやってみたら、アニメーションにはならず、残念ながらなめらかなアニメーションにはならず、かくかく動いていたので、こうしてrequestAnimationFrameで動かしています。みなさんには読みづらくてご迷惑をおかけします。
const text = document.querySelector('#entry-26006613784505675'); const updateTextStroke = () => { text.style = '-webkit-text-stroke-width: ' + Math.sqrt((new Date() % 10000) / 100) + 'px'; requestAnimationFrame(updateTextStroke); }; updateTextStroke();
