Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
freiburg.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Ein Mastodon-Server für Freiburg und Umland betrieben durch den Verein freiburg.social e.V.: https://wir.freiburg.social

Administered by:

Server stats:

534
active users

freiburg.social: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

#tinySVGtip

0 posts0 participants0 posts today
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinySVGtip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinySVGtip</span></a> You want to do it with <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a>? Here's an SVG solution too!</p><p>It uses a single `circle` element inside an `svg` and less than 10 <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> declarations, including those in keyframes! ✨ </p><p><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/graphics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>graphics</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/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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinySVGtip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinySVGtip</span></a> Better gooey effect with no matrix filter!</p><p>Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).</p><p>The assembly containing them gets an SVG filter as below.</p><p>Heavily commented 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>: <a href="https://codepen.io/thebabydino/pen/NWVdKaG" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/NWV</span><span class="invisible">dKaG</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</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/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</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/goo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>goo</span></a> <a href="https://mastodon.social/tags/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gooey</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/blobby" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blobby</span></a> <a href="https://mastodon.social/tags/blur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blur</span></a> <a href="https://mastodon.social/tags/alpha" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>alpha</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/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinySVGtip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinySVGtip</span></a> How do you create an *inset* shadow on an `img` element?</p><p>You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles &amp; questions on StackOveflow on this very topic.</p><p>SVG filters to the rescue for an elegant solution! </p><p>✨ offset &amp; blur image<br>✨ subtract it out of original image alpha ⇒ get black inner shadow<br>✨ paint it 🍊<br>✨ place it on top of img</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</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/inset" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>inset</span></a> <a href="https://mastodon.social/tags/shadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>shadow</span></a> <a href="https://mastodon.social/tags/image" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>image</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/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/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>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinySVGtip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinySVGtip</span></a> Remember to *always* set</p><p>`color-interpolation-filters='sRGB'`</p><p>for your <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a>.</p><p>Otherwise: wildly different results in Chrome/ Firefox vs. Safari out of primitives that manipulate channel values (`feComponentTransfer` for gooey effect, `feColorMatrix` for stuff like 👇)</p><p>Thx to <span class="h-card" translate="no"><a href="https://front-end.social/@AmeliaBR" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>AmeliaBR</span></a></span> for the tip.</p><p>SO is *full* of "why isn't the Chrome/ Firefox result as expected?", "why is it different in Safari?" questions.</p><p><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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</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/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/xml" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>xml</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinySVGtip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinySVGtip</span></a> Been using this forever, but don't think I've ever shared it here.</p><p>Easily create stripes along any direction in SVG!</p><p>✨ draw a line along that direction<br>✨ make it dashed<br>✨ make it much thicker<br>✨ no, not like that... I really mean much thicker!</p><p>That's it! 🥳🎉</p><p>Here it is, illustrated with <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> on <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CodePen</span></a>: <a href="https://codepen.io/thebabydino/full/MWLBzpa" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/MW</span><span class="invisible">LBzpa</span></a></p><p><a href="https://mastodon.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://mastodon.social/tags/stripes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>stripes</span></a> <a href="https://mastodon.social/tags/svgPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgPattern</span></a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>pattern</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/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