フマナマ| SVGでいくつかの素晴らしいこと

SVGの詳細。サンプルコードは、通常のHTMLではなくJSX（またはReact）で記述されていることに注意してください。

使用して行を作ります line または path。

svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  g>
    line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="1" />
  g>
svg>

マスクにします。

svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  g>
    rect x="0" y="0" width="50" height="10" fill="red" mask="url(#line)" />
    mask id="line">
      line id="" x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="1" />
    mask>
  g>
svg>

アニメーションを追加します。

svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  g>
    rect
      x="0"
      y="0"
      width="50"
      height="10"
      fill="red"
      mask="url(#animated_line)"
      style={{
        animation: "to-down linear infinite 2s",
      }}
    />
    mask id="animated_line">
      line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="1" />
    mask>
  g>
svg>

@keyframes to-down {
  0% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(50px);
  }
}

スタイルを作ります。

svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  g>
    line x1="0" y1="0" x2="0" y2="50" stroke="rgb(50,50,50)" strokeWidth="2" />
    rect
      x="0"
      y="0"
      width="100%"
      height="20"
      fill="url(#line_color)"
      mask="url(#animated_line_fancy)"
      style={{
        "--height": "20px",
        animation: "to-down-2 linear infinite 3s",
      }}
    />
    defs>
      linearGradient id="line_color" x1="0" x2="0" y1="0" y2="1">
        stop offset="0%" stopColor="rgba(255,0,255,0.1)" />
        stop offset="100%" stopColor="rgb(255,100,255)" />
      linearGradient>
    defs>
    mask id="animated_line_fancy">
      line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="2" />
    mask>
  g>
svg>

@keyframes to-down-2 {
  0% {
    transform: translateY(calc(var(--height) * -1));
  }

  100% {
    transform: translateY(100%);
  }
}

これらの同様のことのほとんどは、同じ手法を使用しています。アニメーションブロックをマスクし、いくつかのアニメーションを配置し、おそらくFigmaまたは他のSVGエディターでいくつかの部品を設計しました。

unkeyのランディングページは良い例です。

私は書記のようなスタイルの目次（TOC）を作りました fumadocs、試してみて、素敵なTOCで遊ぶことができます。

それを実装するには、クライアント側のJavaScriptを使用してSSRと互換性のあるものにするために、サーバー上のTOCアウトラインをレンダリングする必要があります。

私たちはサーバーを使用しているので、要素の正確な位置はわかりません。私のアプローチは使用することです absolute 位置は、アウトラインを異なる「コンポーネント」としてレンダリングし、それらを一緒にスニッチします。

これは困難ではありませんが、アイテムがアクティブな場所のアウトラインの強調表示された部分、またはそれらの対応する見出しがビューポートで表示されることも望んでいます。

のように：

私はそれを呼びます 親指。アニメーション化する必要があるため、これらのアウトラインコンポーネントの色を変更するだけではありません。

単純なCSSソリューションで親指をアニメーション化することはできません。幸運なことに、親指はインタラクティブであることを意図しているため、TOCアイテムの正確なレンダリング位置があります。 クライアントにレンダリングされました！

ブラウザの情報を使用して、クライアントに「マスクマップ」を作成できます。次のようになります。

このマップを構築する方法は次のとおりです SVG – はい、私たちの旧友。

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 236">
  path
    d="M1 0 L1 20 L13 36 L13 56 L1 72 L1 92 L13 108 L13 128 L1 144 L1 164 L1 180 L1 200 L13 216 L13 236"
    stroke="white"
    strokeWidth="1"
    fill="none"
  />
svg>

d SVGの財産 ナンセンスの自動生成文字列ではなく、コマンドのリストです。を参照してください Webドキュメント 詳細については、非常に強力なツールです。

新しいツールを使用すると、SVGに、アウトラインの各ポイントを接続するラインをレンダリングするように指示できます。

これにより、SVGが構築されました 同一 元のTOCに、サーバー上で事前にレンダリングされた概要を説明します。

アニメーションワイヤから学んだ技術と同様に、CSSを使用できます mask-image アニメーションをマスクするプロパティ div 親指をレンダリングするブロック – アウトラインの強調表示された部分。

div
  style={{
    maskImage: `url("data:image/svg+xml,${
      // URI encoded SVG image
      encodeURIComponent(
        ``
      )
    })`,
  }}
>
  div
    style={{
      width: 1,
      height: thumb.height,
      transform: `translateY(${thumb.top}px)`,
      transition: "all 500ms",
      backgroundColor: "white",
    }}
  />
div>

を確認してください ソースコード React.jsでの私の実装を見る。

これについて私にインスピレーションを与えてくれたClerkに感謝します。ドキュメントサイトのTOCがプレイするのが面白いとは思っていませんでした。