While I'm not a huge fan of the verbosity of the syntax* here, this is very cool, and the basic demo is surprisingly impressive: https://webkit.org/blog/16794/the-css-shape-function/

* Though to be fair: a) I don't remember all of #SVG's commands, and b) this does feel rather expressive and #CSS-y (looking at you, `radial-gradient(circle at center in hsl longer hue, red, blue)`!)

Prismic.io has published a collection of lists for many types of css/javascript/svg driven animations to enhance your web apps' user experience. Each example includes real-world use cases and clear code examples in the appropriate languages.

The collection includes:

1. Text Animations
2. Hover Effects
3. Button Animations
4. Background Effects, and
5. Image Effects

"CSS Animation Collection: 150+ Examples & Code"

https://prismic.io/guides/css-animations

I'm really practical. First the idea, then the implementation. Techniques are just tools, albeit powerful ones #html #css #javascript #php #svg

Coloring Richard Kiel as Jaws in James Bond

https://mycreepycoloringbook.tchouk-tchouk.com/coloring/richard-kiel-as-jaws-in-james-bond-1977-79/66/?AUTO_PLAY=1#DarkSeaGreen,DarkOliveGreen,Turquoise,Cyan,OliveDrab

Coloring Richard Kiel as Jaws in James Bond

https://mycreepycoloringbook.tchouk-tchouk.com/coloring/richard-kiel-as-jaws-in-james-bond/66/?AUTO_PLAY=1#Chocolate,DimGray,White,PaleTurquoise,AliceBlue

Interesting:

OmniSVG is the first family of "end-to-end multimodal SVG generators" capable of generating complex and detailed SVGs ("from simple icons to intricate anime characters").

https://github.com/OmniSVG/OmniSVG

#GenerativeArt interlude

More fun with integer sequences

Triangular Truchet tiling with integer sequences driving things

Flip sequence determines whether hypoteneuse runs down from left or up; swap sequence determines whether the pattern lays out from left or right.
Colour sequences determine colour advancement horizontally and vertically.

Loops

Massive Surge in SVG Based Phishing

A new breed of phishing attacks is targeting web users using image files as delivery vehicles, according to a new report from Trustwave SpiderLabs and the firm that co-founded the security firm.

Pulse ID: 67fbb96ccb2b2cd5801ad78b
Pulse Link: https://otx.alienvault.com/pulse/67fbb96ccb2b2cd5801ad78b
Pulse Author: cryptocti
Created: 2025-04-13 13:17:32

Be advised, this data is unverified and should be considered preliminary. Always do further verification.

#Design #Launches
SVG Viewer · Edit, optimize, and convert SVGs, all on one site https://ilo.im/163721

_____
#SVG #Editor #Optimizer #Converter #ProductDesign #UiDesign #WebDesign #Development #WebDev #Frontend

A relire : SVG Gobbler, une extension Chrome / Firefox pour télécharger tous les SVG d'un site

https://blog.shevarezo.fr/post/2022/02/10/svg-gobbler-extension-chrome-firefox-telecharger-svg-site

#navigateur #firefox #chrome #extension #svg @_rossmoody

Some nice #SVG tricks. Animated "Knight Rider" bars, table of contents tweaks, and more.

https://fuma-nama.vercel.app/blog/svg-art

Okay, so apparently #drawIO does not export #SVG as proper SVG..... the texts are embedded in some HTML elements...
Firefox can render it perfectly, but when using some tool like #Inkscape , the text is a raster graphic.
When turning off font embedding and XML inclusion of the diagram within the SVG file, when exporting from drawIO, Inkscape can at least load the text as text, but it is weirdly truncated and does not stay within its bounds.

What the hell is this?

Edit: Pinging @drawio - perhaps you guys have an idea? :D

So something in my build setup is _very_ clever and knows that the default value for the preserveAspectRatio #SVG attribute is "xMidYMid meet". And therefore removes the attribute for production builds because of "performance" (as if this would make ANY difference). Problem is, there is a rather important CSS rule somewhere in the projects that selects for svg[preserveAspectRatio] and now everything's boken

New Kitten feature: Icons!

You can now make use of a subset of the icons in the Phosphor icons set by @minoraxis and @rektdeckard.

https://kitten.small-web.org/reference/#icons

Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.

Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):

export default function () {
return kitten.html`
<${kitten.icons.c.Cat}
size=40%
weight=duotone
colour=deeppink
/>
`
}

(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)

Enjoy!

#GenerativeArt interlude

More fun with OEIS integer sequences.

Today we'll make some pseudospirals: a sequence of arcs with 90 degree turns in between, where the radii are driven off a sequence. Arcs may have a gain function applied. Negative radii flip direction.

A200437: Number of -n..n arrays x(0..9) of 10 elements with zero sum and no two or three adjacent elements summing to zero
Sequence negation (every 17th), no gain

A @friction mograph test using text effect (a little too fast) !

Here is the friction project if anyone wants to take a look ! https://e.pcloud.link/publink/show?code=XZ8IldZJIA7G6DSzW0dOOxx9Dt3g0q4kMM7

Friction is an open source 2d animation software, which could replace #aftereffect

Unofficial discord https://discord.gg/FkjnM2r2JD
Official page https://friction.graphics/