Here's a little something: flicker effect!
(if you're a patron on Patreon, you may have seen I've gone down the rabbithole of text effects for the past few months)
No text/ letter duplication whatsoever. No wrapping individual letters in their own elements. Just a single contenteditable element + a bit of SVG filter & CSS gradient & variable magic 🪄✨🎩🐇
Idea from https://twitter.com/Mandy_Kerr/status/1772850250950316258
*needs monospaced font to work
#CSS #SVG #filter #svgFilter #textEffect #code #coding #webDev #frontend
Ana Tudor 🐯 /
npub1ah…kkqax
2024-03-28 09:51:05
Author Public Key
npub1ahnq52t7xsmfypa3t8c4fpprz5m2e5sg4zfsf7lfc9n2n3j5qs6sskkqaxPublished at
2024-03-28 09:51:05Event JSON
{
"id": "2d0277fe3004667ef7c91d6d8bb29bd090d45ec3b7d22e5a8de5500871be1e92",
"pubkey": "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435",
"created_at": 1711619465,
"kind": 1,
"tags": [
[
"t",
"texteffect"
],
[
"t",
"coding"
],
[
"t",
"SVGFilter"
],
[
"t",
"webdev"
],
[
"t",
"css"
],
[
"t",
"frontend"
],
[
"t",
"svg"
],
[
"t",
"filter"
],
[
"t",
"code"
],
[
"proxy",
"https://mastodon.social/users/anatudor/statuses/112172693320971885",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://mastodon.social/users/anatudor/statuses/112172693320971885",
"pink.momostr"
]
],
"content": "Here's a little something: flicker effect!\n\n(if you're a patron on Patreon, you may have seen I've gone down the rabbithole of text effects for the past few months)\n\nNo text/ letter duplication whatsoever. No wrapping individual letters in their own elements. Just a single contenteditable element + a bit of SVG filter \u0026 CSS gradient \u0026 variable magic 🪄✨🎩🐇\n\nIdea from https://twitter.com/Mandy_Kerr/status/1772850250950316258\n\n*needs monospaced font to work\n\n#CSS #SVG #filter #svgFilter #textEffect #code #coding #webDev #frontend\nhttps://files.mastodon.social/media_attachments/files/112/172/691/539/278/324/original/df6a6bd9360c49b1.mp4\n",
"sig": "ce8232cf1dbe2bcde521eff09d82ae0c997a3e8ff1b442b18e3ff646c86e99ab983af301397ffd2b9435e37a419785316c919c98c3237dae94347531800ef981"
}