# Sandbox

# ポイント

# SVG化した文字に陰影をつける

cssではこのようにすると綺麗に抜ける。

svg {
  filter: drop-shadow(3px 3px 3px #fff)
    drop-shadow(-3px -3px 1px rgba(0, 0, 0, 0.15));
}

html上では、適宜fillやstrokeを設定する。

https://danmarshall.github.io/google-font-to-svg-path/（GitHubリポジトリ）を使って文字を事前にSVG化しておく。

npmパッケージで似たものを提供している人もいるhttps://github.com/shrhdk/text-to-svg