vello_svg, https://github.com/linebender/vello_svg.
An integration to render SVG files with Vello.
Play with it in the browser, https://linebender.org/vello_svg/.
Okay here is my very simple concept for a #FediCard - a "business card" that encourages people to join the #Fediverse and links to @_elena 's explanatory video.
My idea is that people can hand these out at #protests, political organizations, and so forth - where politically active people gather who already have had bad experiences with commercial social media.
The back side could be customized further to list an instance which is most relevant to the place where you want to share them - for example, I want to print a variant for the gruene.social #Mastodon instance.
I will certainly try to apply my meagre #design skills to make this more appealing, but first I wanted to hear what you all think of this concept, and what your suggestions for improvement are.
(Note: If you want to play around with the design, I have made it available in #SVG / #Inkscape format. The template has the 85 x 55 mm size for European business cards, so you will want to adjust it for other regions.)
#FediHelp
https://drive.google.com/drive/folders/1JxwrLkpvuBaAcRMLFoEjbIXJnhO-bs3r
I love the very rare #game in #svg
https://upload.wikimedia.org/wikipedia/commons/9/9b/SMIL_missile_demo.svg
It's not even javascript, it's just SMIL animation with triggers.
Here is the fourth iteration of my #FediCard . The idea is to hand these out at #protests , political organizations, and anywhere else where people might be receptive to leaving corporate social media behind.
The QR code links to @_elena 's explanatory video of the #Fediverse .
In this iteration, I have included some variants for different front and back sides. There is a front side specifically made for the #NoKings protests.
I've also made various back sides that either lead to the "landing page" of different systems, or which list the user name of specific users (in this case me). You could put your own user name there, and use this to connect to other Fediverse users in the real world.
For the next step I need some more #FediHelp feedback:
1. Are there any other "landing sites" for major #Fediverse systems I should add? I mean "landing sites" in the sense that you can pick a specific server, not how to host your own, since I want to make joining the Fediverse as simple as possible for newbies.
2. Are there any #GraphicDesign issues that I need to take care of with these pages?
3. If you have #Inkscape (you can download it at https://inkscape.org/ ), can you check if you have any problems with modifying the #SVG files for your own purposes? (Such as making a back side with your own user name.)
Once I am satisfied with this version, I will make a variant with the American 3.5×2 inch size - the current version uses the European 85x55 mm standard.
I am also willing to make translations for other languages but (unless the text is in German) you will have to provide a translation. I am further willing to make variants for specific protests.
Although it is my hope that people will use the files and ideas I have provided, and come up with their own variants.
2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK
An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.
#SVG #filter #svgFilter#JS #interactive #javascript #code #coding #frontend#CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout
Behind the demo https://mastodon.social/@anatudor/112242678457752295
I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!
Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/
Hope you enjoy, a lot of work went into it.
#CSS#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient
So what else could we do? Use an SVG filter!✨
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here https://mastodon.social/@anatudor/114703583973454917 ) that makes it stepped.
Works for all gradient types - see this @codepen demo https://codepen.io/thebabydino/pen/raVrZQN 😼
#cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev #svgFilter #cssVariables
I don't think getting consistency with SVG's filters is going to be a problem. None of the implementations for em and ex are consistent. Percent is broken in a couple too, including Inkscape.
@federicomena Let me know if you want the SVG test file.
«#SVG in essence is a language that describes images in text. It describes how something must be presented...So only at the final moment of presenting this description is calculated into pixels. Also it can flourish images into animations: movements along complicated paths, a poisoned apple fluently going from sickly purple to tempting red, or the girl that grows after drinking from the bottle saying "Drink me"» - @steltenpower in http://svgopen.steltenpower.com/livre_english.txt
A space for Bonfire maintainers and contributors to communicate
