Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.

Administered by:

Server stats:

275
active users

shakedown.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

#svggradient

0 posts0 participants0 posts today
Ana Tudor 🐯<p>Made a gallery of such <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> gradient + <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> effects blobs on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> <br><a href="https://codepen.io/thebabydino/full/YPzNWoR" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/YP</span><span class="invisible">zNWoR</span></a></p><p>Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.</p><p>Different blobs for light/ dark mode. 😼</p><p><a href="https://mastodon.social/tags/svgGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgGradient</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/blob" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blob</span></a> <a href="https://mastodon.social/tags/grainy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grainy</span></a> <a href="https://mastodon.social/tags/radialGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>radialGradient</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/grain" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grain</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/distortion" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>distortion</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filterEffect</span></a></p>
Ana Tudor 🐯<p>Grainy distorted gradient blob: 1 <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> `radialGradient` (setting a focal point `fx,fy`) vs. multiple <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> `radial-gradient()` layers (no option to control focal point).</p><p>Using filters for distortion &amp; grain effect.</p><p>A bit more detail on this <a href="https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1j03</span><span class="invisible">iyv/comment/mf89ri9/</span></a></p><p><a href="https://mastodon.social/tags/svgGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgGradient</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/blob" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blob</span></a> <a href="https://mastodon.social/tags/grainy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grainy</span></a> <a href="https://mastodon.social/tags/radialGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>radialGradient</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/grain" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grain</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/distortion" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>distortion</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
ExploreLive feeds
About