7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK
A simple #SVG filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
We then animate the gradient stops... magic! 🪄✨
#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment
Ana Tudor 🐯 /
npub1ah…kkqax
2024-05-27 17:17:06
in reply to nevent1q…87ac
Author Public Key
npub1ahnq52t7xsmfypa3t8c4fpprz5m2e5sg4zfsf7lfc9n2n3j5qs6sskkqaxPublished at
2024-05-27 17:17:06Event JSON
{
"id": "af7a74afa2007f6288753f7c119906f7845c9bee28c930789e4f43c93f522e71",
"pubkey": "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435",
"created_at": 1716830226,
"kind": 1,
"tags": [
[
"t",
"code"
],
[
"t",
"filtereffect"
],
[
"t",
"text"
],
[
"t",
"webdev"
],
[
"t",
"web"
],
[
"t",
"filter"
],
[
"t",
"frontend"
],
[
"t",
"texteffect"
],
[
"imeta",
"url https://files.mastodon.social/media_attachments/files/112/514/182/795/764/843/original/d87fe5bce04e19cc.mp4",
"m video/mp4"
],
[
"t",
"SVGFilter"
],
[
"e",
"565034feac4a57e54c990737507f61fd026b867b6f4e4c33c5de69ee4455a412",
"",
"reply"
],
[
"t",
"dev"
],
[
"e",
"a1b401aafbdc8ebe751f06a910d96bd16186567ed6f20e5594873f91eb72db90",
"",
"root"
],
[
"t",
"textglow"
],
[
"t",
"cssgradient"
],
[
"t",
"glow"
],
[
"t",
"webdevelopment"
],
[
"proxy",
"https://mastodon.social/@anatudor/112514185728012494",
"web"
],
[
"t",
"coding"
],
[
"p",
"827dff3631108ba3a2eb2c455615166c4320e10ce086f31afa6aa657a94ca1db"
],
[
"t",
"css"
],
[
"t",
"svg"
],
[
"p",
"ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435"
],
[
"proxy",
"https://mastodon.social/users/anatudor/statuses/112514185728012494",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://mastodon.social/users/anatudor/statuses/112514185728012494",
"pink.momostr"
]
],
"content": "7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK\n\nA simple #SVG filter trick.\n\nWe create the gradient text.\n\nThe filter creates a blurred copy of it and places it underneath.\n\nWe then animate the gradient stops... magic! 🪄✨\n\n#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment\nhttps://files.mastodon.social/media_attachments/files/112/514/182/795/764/843/original/d87fe5bce04e19cc.mp4\n",
"sig": "d58e8cd5dcd7a8bb50acf937647f9cbb9b4d2c726f368407c0331d457d4e8840594891fd4b48e289dcdfff9c6d6046c511f9eb3e08eb7a5b07986059a88d206b"
}