My Svg.Skia library for #svg #rendering that uses #SkiaSharp #dotnet just hit 6 million #NuGet downloads https://www.nuget.org/profiles/wieslawsoltes

#GenerativeArt interlude

How well does the hachure algorithm stand up to various complex curves?

In general these are not closed curves; the algorithm will close them off and treat them as such. (Hence the stray crosslines.)

A modulated torus knot

1/5

Tool Turns SVGs into Multicolor 3D Prints - Want to turn a scaled vector graphic into a multicolor 3D print, like a sign? You’... - https://hackaday.com/2025/05/28/tool-turns-svgs-into-multicolor-3d-prints/ #3dprinterhacks #conversion #3dprinted #sign #stl #svg

#GenerativeArt interlude

What if you took a regular tiling pattern and filled each tile with random cross-hatching?

#XQuery #SVG #CreativeCoding

1/5

TIL that

path {
vector-effect: non-scaling-stroke;
}

will retain the stroke width in #SVG strokes regardless of zoom level (f.ex with #d3js)

<Happy noises>

Google Chrome renders #SVG files in 96dpi, causing strange scaling effects when trying to open a 100dpi file in it for precise embossing. Found this out while making braille business cards for the upcoming Tactile Graphics conference in Amsterdam. By using viewBox and specific width and height values, we can emboss with precision while still using nice round numbers in our designs. https://blindsvg.com/pages/setup/#chromeScale

I had a moment of inspiration and created #ggg take a look (still #experimental #foss software)

ggg: #guile #scheme #glyph #generator

https://codeberg.org/jjba23/ggg

Through #svg generation from #lisp we leverage a (wip) #dsl and apply some #math knowledge to build pixel perfect project #markdown / #org badges.

It also scripts #imagemagick to export to #png or #webp .

You can then use the svgs in your #codeberg (or #github) repository #readme for example.

I provide a #guix manifest in the repo

Using `<text>` inside `<svg>` is accessible if the SVG doesn't have a `role`. However if it has `role="img"` (plus accessible name) then most screen readers ignore the `<text>` and only announce the name.

Therefore, using `<text>` inside `<svg role="img">` comes under SC 1.1.1 Non-text Content, and the text must be included in the accessible name or description.

This usage does pass SC 1.4.5 Images of Text, because users can visually customize it.

#ReleaseSaturday — Just added 35 new color palettes (255 in total now) to https://thi.ng/color-palettes. All of these are based on images and dominant colors have been extracted via this tool below and then partially hand edited. The SVG swatches were generated via a custom tool (included in the project repo).

The package provides accessors for obtaining themes as CSS hex colors, RGB or LCH tuples. Themes can also be programmatically selected/filtered by a number of composable criteria (examples in the readme)...

https://demo.thi.ng/umbrella/dominant-colors/

New Kitten Release

• Breaking change: `kitten.icons` namespace is now flat (not alphabetically sharded). This should make it much nicer to author with. (The alphabetical sharding was an attempt to work around a size limitation with large objects when using automatic type inference in the TypeScript language server. Since I’m now generating a TypeScript type definition for the entire data structure, the limitation no longer applies and thus the sharding is no longer necessary.) https://kitten.small-web.org/reference/#icons

• The `tags` and `categories` hash tables on `kitten.icons` – which are included as authoring-time aids to help you find icons using metadata searches in your editor – are now marked as unenumerable properties so they no longer pollute the root icons namespace so you can, for example, safely iterate through all icons with a simple loop.

• I’ve started a change log even though Kitten is still pre-release so there is a better place to find them than looking through my Mastodon release notification posts :) https://codeberg.org/kitten/app/src/branch/main/CHANGELOG.md

Enjoy!

#GenerativeArt interlude

More fun with open venation patterns, using different kinds of shapes as to lay out the attraction targets

Frost flowers.
Based on a random tiling.

«#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

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 without being in the most hearted of previous year.

#GenerativeArt interlude

A little open venation

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)`!)

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