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.
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.
I love SVGs as vectors for injection.
#Design #Resources
SVG Shield Badge Shapes · Certificate/badge motifs for your website footer https://ilo.im/16531k
_____
#Business #Marketing #Security #Shields #Badges #Certificates #ProductDesign #WebDesign #SVG #Collections
New phishing wave using SVG attachments
Still in German, sent from legitimate but compromised addresses (no-reply@******), pretending to be about unpaid invoices.
Flow:
SVG file hidden script
auto-downloads Dokument.zip
malicious .js inside.
Example IoCs & script/payload domains
Subject: ZUGFeRD Rechnung 23066534 _ Kundennr. 118298 _ Datum 21.01.25
File: Rechnung 23066534.svg
hxxps://yourmilliondollarsidehustle[.]com/
hxxps://zalyzi63[.]ru
Subject: Rechnung 20250142 zu Ihrer Bestellung Webshop 20829
File: VRE20250142.svg
hxxps://zaliamylia[.]lt
Subject: F**** B***** – Rechnung 22947272
File: RCH22947272 1010035630-1.svg
hxxps://yourname[.]physio
hxxps://young-c[.]com
Der Sommer hat uns erreicht und deshalb sollt eins stets erfrischt bleiben.
Das SVG findet ihr im Repo unter:
https://repo.kasiandras-dreams.de/Print/Antifa-Fanta_(CC0)/antifa.svg
I think I'm onto something, but I'm not there yet.
I need to keep playing with the idea. Also figure out where to put the controller board :)
`feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - check it out on @codepen https://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
You can find all demos made for & mentioned in the article gathered up in this @codepen collection https://codepen.io/collection/yyNzVe
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.
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.
Here is the third 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 .
I do have some ideas for variants - including one for the upcoming #July4th protests, or back sides linking to different onboarding sites - but before doing them I want to get the basic #GraphicDesign right.
A question, though: Can someone test the #Inkscape #SVG files to see if they can open and modify them on their own devices? I want to encourage modification, after all.
https://drive.google.com/drive/folders/1JxwrLkpvuBaAcRMLFoEjbIXJnhO-bs3r
Okay, here is the second 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 .
The layout is for European-standard 85x55mm business cards, but in order to encourage modification I have also made the #Inkscape #SVG files available. I am also willing to whip up custom variants for specific needs.
I am also open for suggestions for improvement - my own #GraphicDesign skills are pretty mediocre.
https://drive.google.com/drive/folders/1JxwrLkpvuBaAcRMLFoEjbIXJnhO-bs3r
Since you folks seem to have appreciate the logo, I've put up a short write-up on it and its context, including the possibility to download the #SVG source of the logo itself.
EDIT for language.
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
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
For the #Emulsion #GUI I drew *every* #Game platform / console / machine #gamecontroller in #inkscape ; Tonight, the #Sony #Playstation ; This one was REALLY tricky what do you think?
#SVG #IndieDev #gamedev #retrogaming #emulation #gaming #linux #floss
View the complete #gamecontroller series here
GET EMULSION!
https://yphil.gitlab.io/emulsion/
https://gitlab.com/yphil/emulsion
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.
An annoying SVG animation bug in Chrome
https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/
Writing web standards is hard0. You have to write a formal specification which is useful for machines, humans, and web developers1.
I recently stumbled across what I think is a little bug which might be caused by a misreading of the SVG Animation specification. Here you should see two overlapping circles gradually appear:
If you're on Chrome, you might only see one circle animate. Why? Bloody semicolons! The bane of every programmer's existence2.
The specification for SVG Animation has this text for human readers:
keyTimes
A semicolon-separated list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the ‘values’ attribute list, and defines when the value is used in the animation function.
[…]
If the last semicolon separator is followed by either just white space or no more characters, ignore both the separator and the trailing white space.
To me, that isn't ambiguous. The text keyTimes="0; 1;"
has a final semicolon with nothing after it. Therefore it should be ignored. Instead, Chrome throws an hissyfit and says Error: <animate> attribute keyTimes: Invalid value, "0; 1;".
But maybe the humans who wrote the description were sloppy. There's also a machine-readable formal specification. It defines the acceptable sequence as being:
<number> [; <number>]* ;?
This isn't quite Backus–Naur form3, but rather CSS Values.
<number>
is a component.[
and ]
are grouping combinators.*
and ?
are component multipliers*
"indicates that the preceding type, word, or group occurs zero or more times."?
"indicates that the preceding type, word, or group is optional (occurs zero or one times).";
is just a semicolon4.Reading the definition tells us that a valid value will be a number, followed by zero-or-more groups of "semicolon and another number" with an optional final semicolon.
So, based on my reading, I think Chrome is wrong to throw an error here. Both Firefox and Safari work with a trailing semicolon.
Accordingly, I've raised a bug with the Chromium team. If you think I have erred in this matter, please let me know.
I do have some experience in this matter. ↩︎
Back in 2006, Catharine A. MacKinnon provokatively asked "Are Women Human?". Her argument (which I shall badly summarise) is that if women were human, then they'd be protected by universal human rights. Given the state of the world then (and now) it is hard to argue that women receive as great a level of attention as the default male. I don't intend to trivialise MacKinnon's work - but I do find it interesting that developers are often treated separately from other humans. ↩︎
I imagine English literature students also find them confusing; everyone does. ↩︎
Also the bane of programmers everywhere! ↩︎
Just like how sometimes a cigar is just a cigar. ↩︎