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

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

Nice Things with SVG

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

SVG Viewer - View, edit, and optimize SVGs https://www.svgviewer.dev/ #graphics #editor #online #vector #viewer #svg

SVG Crop https://svgcrop.com/ #graphics #editor #online #vector #crop #svg

#GenerativeArt interlude

Bleed

Mastodon - can you help me out?

If you can test on actual Safari (not another browser), does https://codepen.io/thebabydino/pen/EaxJmwJ?editors=1100 look the same for you as it does in my Epiphany screen? Or does the `conic-gradient()` cover the entire area?

Retoots appreciated if you cannot test. Thanks!

PS: Yes, I know it does NOT work in Firefox or Chromium browsers https://github.com/web-platform-tests/interop/issues/717

Here's a "fun" Chrome zoom bug https://issues.chromium.org/issues/408752827

#SVG #bug #svgBug #ChromeBug #code
#web #dev #webDev #webDevelopment #coding #frontend

selfh.st/icons
Une collection d'icônes et de logos au format SVG, PNG, WEBP pour vos projets

selfh.st/icons
A collection of icons and logos in SVG, PNG, WEBP format for your projects

https://selfh.st/icons/

#Html #CSS #SVG #PNG #WEBP
#Mastodon #Fediverse #Pixelfed #Nextcloud