Here is real magic.🪄
I've seen this effect before, but it always needed both text duplication & wrapping each letter in its own element. My version requires neither.
Live on CodePen (npub1sf7…gl68) , made with #SVG filter magic 🪄
https://codepen.io/thebabydino/pen/JjqXjyJ
PS - Paper texture is SVG #filter too.
#textEffect #svgFilter #typography #code #coding #frontend #web #webDev #dev #webDevelopment #cssGradient #noJS
Ana Tudor 🐯 /
npub1ah…kkqax
2024-06-26 18:32:20
Author Public Key
npub1ahnq52t7xsmfypa3t8c4fpprz5m2e5sg4zfsf7lfc9n2n3j5qs6sskkqaxPublished at
2024-06-26 18:32:20Event JSON
{
"id": "e343af29a0f1cf4d9fb3c4a0846a7c0807d0c3891606c7ae85865ab960692eae",
"pubkey": "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435",
"created_at": 1719426740,
"kind": 1,
"tags": [
[
"t",
"code"
],
[
"t",
"webdev"
],
[
"t",
"web"
],
[
"t",
"filter"
],
[
"t",
"frontend"
],
[
"t",
"texteffect"
],
[
"t",
"dev"
],
[
"t",
"SVGFilter"
],
[
"t",
"cssgradient"
],
[
"proxy",
"https://mastodon.social/@anatudor/112684350887933297",
"web"
],
[
"t",
"webdevelopment"
],
[
"t",
"coding"
],
[
"p",
"827dff3631108ba3a2eb2c455615166c4320e10ce086f31afa6aa657a94ca1db"
],
[
"t",
"nojs"
],
[
"t",
"typography"
],
[
"t",
"svg"
],
[
"imeta",
"url https://files.mastodon.social/media_attachments/files/112/684/343/638/655/880/original/6d4d2704ec031193.mp4",
"m video/mp4"
],
[
"proxy",
"https://mastodon.social/users/anatudor/statuses/112684350887933297",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://mastodon.social/users/anatudor/statuses/112684350887933297",
"pink.momostr"
],
[
"expiration",
"1722020560"
]
],
"content": "Here is real magic.🪄\n\nI've seen this effect before, but it always needed both text duplication \u0026 wrapping each letter in its own element. My version requires neither.\n\nLive on nostr:npub1sf7l7d33zz968ght93z4v9gkd3pjpcgvuzr0xxh6d2n9022v58ds48gl68 , made with #SVG filter magic 🪄\nhttps://codepen.io/thebabydino/pen/JjqXjyJ\n\nPS - Paper texture is SVG #filter too.\n\n#textEffect #svgFilter #typography #code #coding #frontend #web #webDev #dev #webDevelopment #cssGradient #noJS\nhttps://files.mastodon.social/media_attachments/files/112/684/343/638/655/880/original/6d4d2704ec031193.mp4\n",
"sig": "1823ff35078eba01174cbff13dacdf2b580f52503e43cfbaf4690d4b57c81f0f1a9d4f238a733d994307e92237f4ef454521084c3e665ed366e0f904dc8dd7cf"
}