Here's another 2 techniques in 1 demo on @codepen: double stroke, transparent text, two approaches https://codepen.io/thebabydino/pen/GgRrmzO
Can you figure out any of them before checking the code? Neither uses any duplication whatsoever (no duplicating the text and no duplicating the image as tex fill).
#CSS #SVG #textStroke #textEffects #code #textEffect #coding #frontend #filter #svgFilter #web #dev #webDev #webDevelopment
Updated to add another possible solution not limited by font (not ugly for cursive fonts) - see
https://mastodon.social/@anatudor/112410224855133935
However, this solution needs text duplication + has both inner & outer stroke outside unstroked text shape.
Both on @codepen 👉 https://codepen.io/thebabydino/pen/GgRrmzO?editors=1100
#SVG #filter #textEffect #svgFilter #coding #code #frontend #typography #textEffects #web #dev #webDev #webDevelopment #textStroke
Wish it worked better: no text duplication single div + #SVG filter magic 🪄 double stroke effect https://codepen.io/thebabydino/pen/oNOEmrE
In Chrome it has this problem (scr #1 + #2 detail) https://mastodon.social/@anatudor/112461545563575178
Firefox rounds stroke corners (scr#3).
And Safari breaks other things 🤦♀️ (scr #4).
#CodePenChallenge #CodePen #SVG #filter #svgFilter #CSS #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment #textStroke
Most cursive #fonts are unusable with `text-stroke`. Yeah, there's `paint-order`, but I want to have a *semi-transparent* stroke *on top* of the fill in order to create a `font-size`-relative *double* stroke (think something like https://dribbble.com/shots/15885997-Vintage-Typography, where we have an inner white stroke and an outer blue one), so just covering up the stroke where it intersects the fill defeats that purpose.
#textStroke #stroke #strokedText #handwriting #font #typography #css #code #coding #frontend #webDev
Ana Tudor 🐯
