How would you create this in such a way that its individual parts can be scaled independently, including via #CSS animations/ transitions?
Here's my take on it https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/
Recent searches
Search options
Administered by:
#svg
23 posts14 participants11 posts today
in 
Single `img` element squircle + inner shadow with #SVG #filter magic 
Check it out on @codepen https://codepen.io/thebabydino/pen/MYgNgBa
Continued thread
Continued thread
Here's a gradient background version on @codepen too https://codepen.io/thebabydino/pen/KwKrJGp
Shape depends on how the text content naturally wraps.
GIF
#Development #Launches
Toon Titles · Cartoon titles brought to life with CSS, SVG, and SMIL https://ilo.im/1632jj
_____
#Collection #Cartoons #Animations #Design #WebDesign #WebDev #Frontend #SMIL #SVG #CSS
Continued thread
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.
Continued thread
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].
GIF
Continued thread
`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.
GIF
SVG and PNG tech icons
Download, copy and paste tech icons in SVG and PNG format for your projects.
#Html #CSS #SVG #PNG
#Mastodon #Fediverse #Pixelfed #Nextcloud
Wenn ich die #EH22-Logos im #SVG-Format unter https://git.hamburg.ccc.de/EH22/design-public/src/branch/main/logo in einem beliebigen Browser anschaue, sehen sie wie gewünscht aus. Lade ich sie in #Inkscape (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?
CCCHH Gitdesign-publicdesign-public
Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure #CSS + #SVG #filter demo on @codepen doing it https://codepen.io/thebabydino/pen/KwKGrjR
Heavily commented. See also https://mastodon.social/@anatudor/114185324674119212 for details about some of the filter primitives.
GIF
The first Apple Watch was introduced 1995.
It's #contemporary #design is standing out after 30 years, still. While it was deeply integrated into #MacOS System 7.5, it's not one of their digital #gadgets. This #anniversary seems to be perfect to revisit and redraw some shacky lines and seconds in corporate #history of #AppleComputers.
https://youtu.be/AR5DUrI994Q
#Apple lost me as #proUser when they rejected my third warranty case in a row.
To rebuild the #AppleWatch from scratch in #vectorgraphics I prefer #Inkscape #SVG #copyleft on #Linux #FOSS over #Adobe #Illustrator #Ai #IP #copyright #software.
Go get the best #vector #designer #app
https://inkscape.org
and you can draw freely #retrocomputer #illustrations like we do.
It's #contemporary #design is standing out after 30 years, still. While it was deeply integrated into #MacOS System 7.5, it's not one of their digital #gadgets. This #anniversary seems to be perfect to revisit and redraw some shacky lines and seconds in corporate #history of #AppleComputers.
https://youtu.be/AR5DUrI994Q
#Apple lost me as #proUser when they rejected my third warranty case in a row.
To rebuild the #AppleWatch from scratch in #vectorgraphics I prefer #Inkscape #SVG #copyleft on #Linux #FOSS over #Adobe #Illustrator #Ai #IP #copyright #software.
Go get the best #vector #designer #app
https://inkscape.org
and you can draw freely #retrocomputer #illustrations like we do.
A Deep Dive Into the Inline Background Overlap Problem, by @anatudor (@frontendmasters.com):
https://frontendmasters.com/blog/overlapping-inline-backgrounds/
frontendmasters.comA Deep Dive into the Inline Background Overlap Problem – Frontend Masters Blog`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.
eurritimia.neocities.orgIvy Mãos
Continued thread
Rough minutes from the #SVG session, if you were interested but couldn't call in:
https://www.w3.org/2025/03/26-svg-neglect-minutes.html
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.
www.w3.orgVectors of Neglect – 26 March 2025
