影はアウトラインを作るために円形に広げる必要があるから、全体の形はだいたい円に収束するんだ。テキストの形にはほとんど沿わないけどね。

FirefoxはSDF（オブジェクトへの最短距離）みたいに見えるけど、Chromeのは何なのかよくわからないな…。

Firefoxの丸みの効果はあんまり好きじゃないけど、Chromeの解釈は明らかにおかしいと思う。スパイクが出ちゃってるし。アスタリスクの形から考えると、アウトラインは普通の六角形に近づくはずなんだけど、どちらのブラウザもそれを実現できてないね。

LoveのVを見てみて。Chromeでバグみたいに見えるよ。

Firefoxは、ストロークの前にもっと積極的にサブピクセルレンダリングやパススムージングを適用してると思う。グリフのアウトラインパスを、ストロークアルゴリズムに渡す前に、より高い精度で再サンプリングしてるんだよね。

ミタージョイン（Safari）VS ラウンドジョイン（Chrome）

ストロークの拡張は複雑なテーマで、合理的な結果が一つじゃないし（主観的な好みがある）、たくさんのコーナーケースや間違った答えがあるんだ。Firefoxは、全てのポイントで距離に基づいて拡張することを選んでいて、これは合理的な答えの一つで、たぶん最も一般的な方法だね。カスプは曲線に拡張されるし。他のブラウザはカスプを保持することを選んでいて、これも合理的な答えだと思うし、計算コストも安いと思う。でも、特徴サイズ（ノード間の距離）を超えて拡張すると、退化ケースがたくさん出てきて、4つ目の赤いリングでは明らかに間違ってる。ボックスシャドウも拡張が起こるケースの一つで、4つ目の長さパラメータ、スプレッド距離が関係してる。角がカスプなら、シャドウの角もカスプになるし、丸みを帯びていればシャドウの角も丸くなる。役立つ図があるから、詳しくはここを見てみてね：https://drafts.csswg.org/css-backgrounds/#shadow-shape。ちょっとしたトリックとして、0.1pxのボーダー半径を使うと、ボックスはまだ四角に見えるけど、拡張されたシャドウは曲がるんだ。たまに便利だよ。でも、元の記事の内容に戻ると、カスプノードの代わりに微小な曲線を持つフォントを使うと、Chromium/SafariはFirefoxにもっと近くなるよ。

自分もこの不一致に遭遇したことがある。さらに、私が奇妙だと思ったのは、「ドット」（ティトル、ピリオド、セミコロン）で、サイズが大きくなると真ん中が空洞になるような感じで、自分自身をキャンセルしてるみたい。試した他の形ではそんなことなかったし、ブラウザも驚くほど一致してた。昔、いくつかのショットとプレイグラウンドを作ったよ：https://x.com/myfonj/status/1870178380831732160

これ、見出しみたいな表示テキストには実際にクールかも。画像だけのためじゃないと思うよ。

動的テキストからそんな効果の「画像」をたくさん生成するなら、SVGを使うのは意味がないし、ここでの解決策よりもはるかに複雑で柔軟性がないよ。

アートはしばしば、アートを作るために意図されていなかったものの巧妙な使い方から生まれるんだ。楽しませてあげようよ。

遅すぎた: https://codepen.io/jaysalvat/pen/kazzOj

記事には「生産用途には向いてない」って書いてあるから、ここでの反対意見の理由がよくわからないな。これは実験なんだし。

古いアイデアをいじったり、ぶっ壊したりすることで、かなりの新しい力強いアイデアが生まれると思うよ。

純粋なCSSで3Dレンダラーを作った人のリンクを送ってあげたかったんだけど、Cohostが閉鎖しちゃった。

わかる！CSS/SVG/キャンバスのプレゼンがわかりやすい投稿がたくさんあるよね。「Daily Sketch」シリーズや「offset-pathを使ったCSSアニメーション」も同じくらい楽しい。