bolha.us

23 posts14 participants11 posts today

Ana Tudor 🐯How would you create this in such a way that its individual parts can be scaled independently, including via <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> animations/ transitions?Here's my take on it <a href="https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯Here's a "fun" <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/bug" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#bug</a> 🪲 in <a href="https://mastodon.social/tags/Firefox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Firefox</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1957693" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=1957693</a>Live test <a href="https://codepen.io/thebabydino/pen/LEYMGNw" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LEYMGNw</a>

Ana Tudor 🐯Single `img` element squircle + inner shadow with <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> magic 🪄Check it out on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/MYgNgBa" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYgNgBa</a><a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/squircle" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#squircle</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/ebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ebDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Ana Tudor 🐯Here's another such example on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/azbLBJy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azbLBJy</a>Concave rounding, gradient background, shape drop-shadow, responsivity... all in one demo. Also using an <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> + <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grid</a>.<a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯Here's a gradient background version on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> too <a href="https://codepen.io/thebabydino/pen/KwKrJGp" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/KwKrJGp</a>Shape depends on how the text content naturally wraps.<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gooey</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Launches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Launches</a> Toon Titles · Cartoon titles brought to life with CSS, SVG, and SMIL <a href="https://ilo.im/1632jj" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/1632jj</a>_____ <a href="https://mastodon.social/tags/Collection" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Collection</a> <a href="https://mastodon.social/tags/Cartoons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Cartoons</a> <a href="https://mastodon.social/tags/Animations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Animations</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/SMIL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SMIL</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Ana Tudor 🐯This effectively pushes all pixels except for those with alphas originally in the [.4, .6] interval (which now stretch across the [0, 1] interval) to either 0 or 1, whichever is closer.Now you may be wondering why not do this from the start instead of those first two primitives.Well, because without knowing the blur radius in px (something that's not really possible without JS if we set it in container query or viewport units), we can't know what interval to map to.🤷‍♀️<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a>

Ana Tudor 🐯To fix this, we give the assembly a tiny blur.We don't want blurry edges👇 either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBlur</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a>

Ana Tudor 🐯Enter the <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a>!`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).This makes edges jagged. 💀 Maybe not so noticeable in some cases, but it often won't cut it.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBlur</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelpment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelpment</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/goo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#goo</a> <a href="https://mastodon.social/tags/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gooey</a> <a href="https://mastodon.social/tags/blobs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blobs</a> <a href="https://mastodon.social/tags/metalball" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#metalball</a>

jfmblinux :jeditux:SVG and PNG tech iconsDownload, copy and paste tech icons in SVG and PNG format for your projects. <a href="https://mastodon.jfmblinux.fr/tags/Html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Html</a> <a href="https://mastodon.jfmblinux.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.jfmblinux.fr/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.jfmblinux.fr/tags/PNG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PNG</a> <a href="https://mastodon.jfmblinux.fr/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mastodon</a> <a href="https://mastodon.jfmblinux.fr/tags/Fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fediverse</a> <a href="https://mastodon.jfmblinux.fr/tags/Pixelfed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pixelfed</a> <a href="https://mastodon.jfmblinux.fr/tags/Nextcloud" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Nextcloud</a> <a href="https://techicons.dev/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://techicons.dev/</a>

MacWenn ich die <a href="https://mastodon.social/tags/EH22" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#EH22</a>-Logos im <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a>-Format unter <a href="https://git.hamburg.ccc.de/EH22/design-public/src/branch/main/logo" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://git.hamburg.ccc.de/EH22/design-public/src/branch/main/logo</a> in einem beliebigen Browser anschaue, sehen sie wie gewünscht aus. Lade ich sie in <a href="https://mastodon.social/tags/Inkscape" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Inkscape</a> (1.4) werden aber wohl die Filter nicht korrekt verarbeitet. Kann mir da vielleicht jemand auf die Sprünge helfen, wieso das der Fall ist und wie man das korrigieren kann?<a href="https://mastodon.social/tags/FollowerPower" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FollowerPower</a>

Ana Tudor 🐯Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> doing it <a href="https://codepen.io/thebabydino/pen/KwKGrjR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/KwKGrjR</a>Heavily commented. See also <a href="https://mastodon.social/@anatudor/114185324674119212" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/114185324674119212</a> for details about some of the filter primitives.<a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/concave" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#concave</a>

Luke HarbySomething is cooking<a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://infosec.exchange/tags/OpenTypeJs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenTypeJs</a> <a href="https://infosec.exchange/tags/p5js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#p5js</a> <a href="https://infosec.exchange/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a>

ITs History!The first Apple Watch was introduced 1995. It's <a href="https://pixelfed.social/discover/tags/contemporary?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#contemporary</a> <a href="https://pixelfed.social/discover/tags/design?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> is standing out after 30 years, still. While it was deeply integrated into <a href="https://pixelfed.social/discover/tags/MacOS?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#MacOS</a> System 7.5, it's not one of their digital <a href="https://pixelfed.social/discover/tags/gadgets?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#gadgets</a>. This <a href="https://pixelfed.social/discover/tags/anniversary?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#anniversary</a> seems to be perfect to revisit and redraw some shacky lines and seconds in corporate <a href="https://pixelfed.social/discover/tags/history?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#history</a> of <a href="https://pixelfed.social/discover/tags/AppleComputers?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#AppleComputers</a>. <a href="https://youtu.be/AR5DUrI994Q" rel="nofollow noopener noreferrer" target="_blank">https://youtu.be/AR5DUrI994Q</a> <a href="https://pixelfed.social/discover/tags/Apple?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Apple</a> lost me as <a href="https://pixelfed.social/discover/tags/proUser?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#proUser</a> when they rejected my third warranty case in a row. To rebuild the <a href="https://pixelfed.social/discover/tags/AppleWatch?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#AppleWatch</a> from scratch in <a href="https://pixelfed.social/discover/tags/vectorgraphics?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#vectorgraphics</a> I prefer <a href="https://pixelfed.social/discover/tags/Inkscape?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Inkscape</a> <a href="https://pixelfed.social/discover/tags/SVG?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://pixelfed.social/discover/tags/copyleft?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#copyleft</a> on <a href="https://pixelfed.social/discover/tags/Linux?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Linux</a> <a href="https://pixelfed.social/discover/tags/FOSS?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#FOSS</a> over <a href="https://pixelfed.social/discover/tags/Adobe?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Adobe</a> <a href="https://pixelfed.social/discover/tags/Illustrator?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Illustrator</a> <a href="https://pixelfed.social/discover/tags/Ai?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Ai</a> <a href="https://pixelfed.social/discover/tags/IP?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#IP</a> <a href="https://pixelfed.social/discover/tags/copyright?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#copyright</a> <a href="https://pixelfed.social/discover/tags/software?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#software</a>. Go get the best <a href="https://pixelfed.social/discover/tags/vector?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#vector</a> <a href="https://pixelfed.social/discover/tags/designer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#designer</a> <a href="https://pixelfed.social/discover/tags/app?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#app</a> <a href="https://inkscape.org" rel="nofollow noopener noreferrer" target="_blank">https://inkscape.org</a> and you can draw freely <a href="https://pixelfed.social/discover/tags/retrocomputer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#retrocomputer</a> <a href="https://pixelfed.social/discover/tags/illustrations?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustrations</a> like we do.

David BissetCute thing. Animation in your <a href="https://phpc.social/tags/Github" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Github</a> repos with <a href="https://phpc.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a><a href="https://github.com/brenocq/brenocq" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/brenocq/brenocq</a>

Frontend DogmaA Deep Dive Into the Inline Background Overlap Problem, by <a href="https://mastodon.social/@anatudor" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@anatudor</a> (@frontendmasters.com):<a href="https://frontendmasters.com/blog/overlapping-inline-backgrounds/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/overlapping-inline-backgrounds/</a><a href="https://mas.to/tags/deepdives" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#deepdives</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a> <a href="https://mas.to/tags/filters" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filters</a> <a href="https://mas.to/tags/backgrounds" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#backgrounds</a>

Whimsicott :whimsicott:Very pretty hands I drew today <a href="https://donphan.social/tags/art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#art</a> <a href="https://donphan.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://donphan.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a> <a href="https://donphan.social/tags/mastoArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mastoArt</a> <a href="https://eurritimia.neocities.org/ivy_maos.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://eurritimia.neocities.org/ivy_maos.html</a>

Amelia Bellamy-RoydsRough minutes from the <a href="https://front-end.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> session, if you were interested but couldn't call in:<a href="https://www.w3.org/2025/03/26-svg-neglect-minutes.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.w3.org/2025/03/26-svg-neglect-minutes.html</a>There will also be a video of Eric's opening presentation.We didn't come up with any grand solutions in 2 hours, but I think there was a loose consensus on the following priorities:- Getting a published SVG standard that is consistent with browser SVG implementations. - Creating a comprehensive test suite to identify interop issues. - Using smaller feature module specs in future.

Ole-André RodlieCopypasta 🍝 <a href="https://github.com/friction2d/friction/pull/490" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/friction2d/friction/pull/490</a><a href="https://floss.social/@friction" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@friction</a> <a href="https://mastodon.social/tags/inkscape" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#inkscape</a> <a href="https://mastodon.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a>

Mary Holstege<a href="https://mastodon.social/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GenerativeArt</a> interludeFireworksSines and cosines FTW<a href="https://mastodon.social/tags/XQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XQuery</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/CreativeCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CreativeCoding</a>

Recent searches

Search options

Administered by:

Server stats:

#svg