SVGテキストとCSSブレンドモードとの組み合わせ

Result

白抜きと通常のテキストを用意して少しずらし、ブレンドモードで良テキストが重なった部分のカラーを表示する、みたいなの

簡単に書けるコードでちょっと目を惹くテキストに装飾できますね。管理もしやすいです

css

.main {/*通常テキストのスタイル*/
  fill: #da4167;
  font-size:13px;
  font-weight:bold;
  text-transform: lowercase;
}

.overline {/*白抜きテキストのスタイル*/
  text-transform: lowercase;
  stroke: #01b9e1;
  font-weight:bold;
  font-size:13px;
  stroke-width: 0.5px;
  fill: transparent;
  mix-blend-mode: darken;
}

html

<svg viewBox="0 1 160 15" xmlns="http://www.w3.org/2000/svg">
        <text x="1" y="13" class=main><!--x軸を少しずらしてます-->
          foo
        </text>
        <text x="0" y="13" class=overline>
          foo
        </text>
</svg>

via

SVG Blended Outline & Text