Ugh, I'm grinding gears on these PDF details. Context fill! from hell's heart I stab at thee!

At least I found some solid bugs in Inkscape's SVG rendering too. So there's that!

This weeks CodePen challenge got me learning about glowing fungi, jellyfish, and fireflies.

Amazingly CSS can animate along a SVG path and I am so happy to have learnt about that. I thought for sure I would need JS for the fireflies.

CodePen: https://codepen.io/HejChristian/full/VYYwqza

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

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

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/

#GenerativeArt interlude

Loops

1. Download sequence data from OEIS.org
2. Pick a random one
3. Take seq mod k to determine a turning angle from -90 to 90
4. Walk the sequence

Here we have k=5
A111569: a(n) = a(n-1)+a(n-3)+a(n-4) for n>3, a(0)=-1, a(1)=1, a(2)= 2 a(3)=1
5 angles

Over the weekend I got an SVG path to animate on scroll, using Anime.js.

Today I achieved the same effect with just CSS

The scroll version only works in Chromium-based browsers, but others can see it on hover.

I also dabbled with a WAAPI Version, which works the same via JS.

CodePen: https://codepen.io/HejChristian/pen/GgRaEBx