#textstroke — Public Fediverse posts

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

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