SVGで作るすごいものたち
(fuma-nama.vercel.app)- SVG はWebでベクターグラフィックスを表現するための強力なツール
- アニメーション によってSVG要素をさらに魅力的にできる
- マスク を使ってSVG要素の特定部分を強調したり隠したりできる
- サーバーサイドレンダリング により、クライアント側JavaScriptなしでTOCを実装できる
- CSS と SVG を組み合わせてインタラクティブな要素を作れる
SVGアニメーション
- SVG はWebでベクターグラフィックスを表現するために使われる
- JSX(React)で書かれたサンプルコードが含まれている
lineまたはpathを使って線を作り、それをマスクとして使ってアニメーションを追加できる@keyframesを使ってアニメーションを定義し、transformプロパティで要素の位置を変更できる- Figma や他のSVGエディタでデザインした部分を活用して、アニメーションブロックをマスクとして処理できる
Clerkスタイルの目次
- Clerk スタイルの目次を Fumadocs で実装
- サーバーで目次をレンダリングし、クライアント側JavaScriptなしでSSRと互換性を持たせている
- 絶対配置を使って、要素の正確な位置が分からないサーバー環境でも目次をレンダリングする
- thumb というアニメーション部分を追加して、アクティブな項目を強調する
- クライアントでレンダリングされた位置情報を活用し、SVG を使って「マスクマップ」を構成する
mask-imageプロパティを使ってアニメーションされたdivブロックをマスクし、目次の強調部分をレンダリングする
Clerk に着想を得て、ドキュメントサイトの目次をより面白く実装している。
2件のコメント
かっこいいのは確かですが、今の項目を1つだけはっきり強調するほうが、目にはより留まりやすいですね。
Hacker Newsのコメント
Sarah Drasner の「SVG Can Do That?」の発表は、8年経った今でも多くの人を驚かせている。CSS はその後かなり進化したが、SVG 自体についてはそれほど確信が持てない。いずれにせよ強くおすすめする
SVG ファイルでできる面白いことの1つは、インライン DTD でエンティティを使って、ファイル内の複数箇所で共有できる定数を定義すること。David Ellsworth の「Squares in Squares」のページに良い例がある
複雑なアニメーション SVG は楽しいが、SMIL の複雑さや、Safari では浮動小数点数の前に 0 がないと問題が起きるなどの事情があり、扱いが難しい
Nanda Syahrasyad の「A Deep Dive Into SVG Path Commands」は、SVG パスがどのように構成されているかを理解するのにとても役立つ。ほぼ2年前の資料だが、SVG で何ができるのか、その方法も含めて目を開かされる
JS を創造的に使って SVG を動的生成している人がいたら、自分に DM を送ってほしい
React で構築されたプロジェクトで、SVG を使った面白い作業をしたことがある。静止イラストのシリーズとアニメーション要素があり、色は CMS で制御されていた
SVG+CSS は非常に強力。自分が気に入っているシンプルな機能は、JavaScript なしでダーク/ライトモードを尊重する図を作れること。例の図: blog.davidv.dev/posts/ipvs-lb/
線の濃淡を許容する SVG 拡張があるのか気になる。自分はペンを上げ下げできるプロッタを持っていて、SVG ファイルで動かしている。線を引いている最中にペンを下ろせたらいいのだが
素晴らしい投稿で、サイトデザインも素敵。SVG は存在して長いが、その潜在力はまだ完全には引き出されていない気がする。HTML、CSS、JS を機能的にカプセル化できる他の要素は思いつかない。基本的にはまったく別の HTML 文書のように手軽に使える
SVG は、あまり探求されず活用もされていない領域のように感じる。想像力次第で多くのことができる。ただし、かなり「ハードコア」にやらなければならないことも多いので、ユースケース次第でもある