html cssで切り抜いた部分だけ透明にしたい。

Question

前提・実現したいこと

https://201d.jp/en/

上記のサイトの１１０１と表示されてる画面のように、文字の形の部分もしくは、マウスのカーソル周辺だけ透明にしたいです。

試したこと

svgで画面の左上から文字の周辺を包み込むようにして外側部分を囲ってfillするようなことは試したのですが、そうすると細かい調整ができなく困ってます。以下のような感じです。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 100 100"> <path class="" d=" M 0,0 L 30,0 30,100 40,100 40,0 30,0 300,0 300,100 　　　0,100 Z"　stroke="#000" fill="white" /> </svg>

もっと効率的な方法を知ってる方がいましたらお聞きしたいです。よろしくお願いします。

Answer 1

結局、写真＞文字部分だけ透過＞imgに埋め込むという原始的な方法で解決しました。

Answer 2

試されたソースHTML等は記載お願いします
参考にされたサイト
では<canvas>タグを動画の上に一部透過で重ねて再現しているようです。

Comments

[kserizawa081]

ありがとうございます。canvasについてはあまり詳しくないので、まだ釈然としてませんが調べながらみていこうと思います。