#SVG
I've been having trouble getting the Braille29 font to register when referencing it in an #SVG file, so I took it upon myself to build a little braille character library that can be pasted into a defs section and referenced within a drawing if you need braille anywhere in it. It uses circles and unit measurements set to the NLS #Braille standards, and embosses out perfectly from my Delta. Still cleaning up the documentation, but will put it up on BlindSVG.com soon!
#ArtAdventCalendar Day 10.
Luna Moth - papercut design cut from black paper.

#GenerativeArt interlude
Mosaic fly eye
This pattern inspired by a SciAm diagram "an array of hexagonal ommatidia, each containing eight photoreceptor cells (circles) and two primary pigment cells (crescents), surrounded by six shared secondary pigment cells (ovals). The fact that a single ommatidion can have white and normal genotypes shows its cells are not necessarily descended from a common ancestral cell"

Speed Limiter Fitted - pliki cyfrowe, Digital files. #pdf #svg https://etsy.me/3Nk9epw




#ArtAdventCalendar Day 9.
Otter and the Bear Shadowbox Commission, multilayered papercut piece, backlit with LED.
This is a piece I made last year for a friend who wanted a gift for his partner on their birthday 🦦🐻🎈
#Shadowbox #MastoArt #LEDShadowbox #Cricut #SVG #PapercutArt


I had a neat idea on how to make #css currentColor work for external (ie. fetched) #SVG files.
What do you think: https://www.villetakanen.com/sundry/using-lit-and-currentcolor-shadow-trick-for-svg-icons
Just visualized #day8 of #adventofcode2023 as #svg
https://github.com/jeffreygroneberg/adventofcode2023/blob/main/day8/ride/simple.gv.svg
Still a hell of fun to solve these puzzles :P
Solution is here: https://github.com/jeffreygroneberg/adventofcode2023/tree/main/day8
#AOC #aoc2023 #aoc23 #coding #developing #devops #dev #code #secops #aoc

👀 Support for #rive / @rive_app animations & animated #SVG has just landed!!! 🚀 #widevideo

Flight: #WZZ889
ICAO code: #471FAD
Callsign: #WIZZAIR
Operator: Wizz Air Hungary
Country: 🇭🇺
From: #SVG to #KUN
Speed: 770 kmh
Altitude: 10973 m
Distance: 7.6 km
Angle ∆: 55.4°
Direction ->: WNW
Track:
http://globe.adsbexchange.com/?icao=471FAD&lat=50.983&lon=4.447&zoom=10.5&showTrace=2023-12-08
http://globe.adsb.fi/?icao=471FAD&lat=50.983&lon=4.447&zoom=10.5&showTrace=2023-12-08
History:
https://www.radarbox.com/data/mode-s/471FAD
Seen: 12x
http://bit.ly/gift-for-radar-mechelen
#Development #Courses
SVG tutorial · Learn SVG step by step, from basic to advanced concepts https://ilo.im/15xcxv
_____
#Design #WebDesign #SVG #Animation #Interactivity #WebDev #Frontend #CSS #JavaScript
#ArtAdventCalendar Day 8.
Puffin - papercut design cut from black paper.

A very cute tutorial on #svg
https://svg-tutorial.com/
Making "noisy" #SVG or adding noise texture with only code. #frontend #css
https://daniel.do/article/making-noisy-svgs/
Pretty cool. Expecting @chriscoyier to mention this in a future Shoptalk Show. 😉
See also: https://css-tricks.com/grainy-gradients/
If there was one thing I could do to influence the #webdev community, it would be to impress upon all developers that there are 4 core technologies for FE development, not just 3.
HTML
CSS
JavaScript
and
SVG
#Development #Guides
Making SVG loading spinners · An interactive guide showcasing how to craft them https://ilo.im/15xcnu
I wrote a little shell script to convert SVGs into a #Shopify snippet yesterday. I don't like it, but it seems the agreed upon #SVG icon workflows in Shopify are:
1. Turn every SVG file into a .liquid snippet
2. Manually copy each icon into a big ol' switch statement in a single snippet
1 clutters your snippet directory, 2 is a lot of human-error-prone manual work so I automated the latter. It's not elegant, but at least it helps inline SVGs.
https://jamesbasoo.com/blog/svg-icon-shopify-liquid-snippet/
#GenerativeArt interlude
Constrained walks
A few days ago I posted some grids made by taking Delannoy numbers mod something
Delannoy numbers have application for determining how many distinct constrained walks you get of a certain type in grids of various sizes
Here we constrain to → ← ↓ ↑
I don't forbid backtracking

SVG IO | crea #grafica #SVG gratis con l'intelligenza artificiale
#intelligenzaartificiale #vettoriale
https://webappsmagazine.blogspot.com/2023/12/svg-io-crea-grafica-svg-gratis-con.html
#ArtAdventCalendar Day 6.
String of Pearls - papercut design cut from black paper.

Only here! All the latest ADR signs for road transport!
Signs #ADR, #GHS and #UN - Digital files #pdf & #svg #signs #adn #transport #etsy https://etsy.me/3Jx6ByM

#ArtAdventCalendar Day 5.
Rabbit Shadowbox, 4 layer papercut piece, backlit with LED.

Think I'm done on the design now (if the GIF loads) 🎉 Some last minute checks and then I should be good to export these and get them cut out of paper using a #Cricut, and set within a deep frame and finally backlit by LED.
#SVG #PapercutArt #MastoArt #SVGDesign #AffinityDesigner #LEDShadowbox
I'm making a little tool to automatically animate SVG drawings and am having fun using it on old generative art pieces I made.
I like how animating this one shows the logic of how the path-finding algorithm worked.

#Inkscape 1.3.2 has been released (#FreeDesignTool / #SVG / #ScalableVectorGraphics) https://inkscape.org/
#ArtAdventCalendar Day 4.
Deer Skull Reclaimed by Nature - papercut design cut from black paper.

More progress 💪 I'm liking the direction this is taking - Plenty more detail I want to add into each layer (and I might add a few more tree layers at the back too).
I'll also be testing a reflection layer - though I'm prepared to backpedal on that if it doesn't work when cut out of paper.
10 layers so far, on track to be one of the more complex shadowbox designs I've done.

A very WIP of a new shadowbox design, a custom gift for someone in the family who loves dinosaurs, specifically dinosaurs fighting 😅 🦖
Once all the layers are in and much more detail added, it will be cut from paper and set within a deep LED backlight frame.
#AffinityDesigner #SVG #WIP #MastoArt #Shadowbox #LEDShadowbox #PapercutArt

#ArtAdventCalendar Day 3.
Manta Ray Shadowbox, 5 layer papercut piece, backlit with LED.

"The Bolivarian Government of #Venezuela has categorically rejected the communique issued by the Secretariat of the Caribbean Community (#CARICOM) on the International Court of Justice (ICJ) pronouncement regarding what Venezuelans refer to as Guyana’s unusual request for provisional measures against their December 3 consultative referendum"
https://www.stvincenttimes.com/venezuela-rejects-caricom-communique-on-disputed-essequibo-region/
#GenerativeArt interlude
Delannoy numbers (a thread)
There's kinda sorta 2D Fibonacci numbers
D(a,b) = D(a,b-1) + D(a-1,b) + D(a-1,b-1)
D(0,b)=D(a,0)=1
If you take them mod some number and plot the grid, interesting patterns arise

https://100r.co/site/dotgrid.html
#svg #simple
#ArtAdventCalendar Day 2
Mandala 02 - Papercut design cut from an A5 sheet of black paper.

I'd love to use SVG, there's cool stuff you could do with it...
But it's so fucking broken and heaven forbid you comment on a 15+ year old bug with your use case because you get hit with a big fat dismissive attitude.
Anyway, this text effect could have been done without duplication & the text could have been selectable.
IF SVG worked.
That's not the case, so a non-selectable duplicated text is all you get https://codepen.io/thebabydino/pen/ZEwjvvx
#svg #rant #coding #css #textEffect #frontend #webDev #filter

Had another pass at my floorplan-building-data visualisation and I'm pretty happy with it. The interpolation is looking pretty good!
You can click on the rooms and "nodes" to see their live data now too.

Hey, it was close, but I actually managed to still get a blog post out in November! 🥳
Here are some notes on using `foreignObject` to render HTML to a `<canvas>` and what issues can come up when dealing with multiline text and custom fonts. 😊
https://amxmln.com/blog/2023/rendering-svg-with-text-to-html-canvas/
#GenerativeArt interlude
Fake fossilized tree rings
Because waiting for those multi-level Turing patterns to finish gets boring

I have some old artwork lying around, stuff I created as long as 24 years ago for projects long since abandoned. I used Macromedia Flash as my drawing tool, and I'm finally figuring out how to convert these illustrations into #SVG format, which I think is cool, but to what end? What to do with them? I am thinking to upload them to Wikimedia Commons. Here's the first:
https://commons.wikimedia.org/wiki/File:Compass_(drawing).svg
But I'm open to other suggestions!
“SVG filters are some of the most underrated front-end tech. They are ridiculously powerful.” — Scott Kellum
_____
#Development #WebDev #Frontend #SVG #SvgGraphics #SvgFilter #Quote
I've been working on my website for this project again!
It's been on/off for a while now - mostly because I wanted to get around to re-listing my stuff on Etsy first. Now I have, the engine is turning for this project once more!
Plenty left to do on the website, but here is a screenshot of where it's at right now. (Wording will change)
Made with HTML, CSS, and #11ty 💚
Eventually It'll be home to a newsletter, and a tutorial section of some kind too.

#Introduction time!
Hi, My name is @christian
and I like to make digital designs and turn them into... things. I hope to share my journey on this project here.
My current focus is with LED shadowboxes and papercut pieces.
I design in #AffinityDesigner, and get them cut with a #Cricut machine ✂
I hope to offer physical products for sale one day - but until then I'm sharing digital templates:
https://www.etsy.com/shop/aldrdesigndigital/
that other makers and crafters can use 😊
Here's an animated illustration of how increasing the `stroke-width` in DevTools turns a dashed line into a stripe pattern.
#svg #stripes #svgPattern #pattern #coding #frontend #webDev #webDevelopment
#tinySVGtip Been using this forever, but don't think I've ever shared it here.
Easily create stripes along any direction in SVG!
✨ draw a line along that direction
✨ make it dashed
✨ make it much thicker
✨ no, not like that... I really mean much thicker!
That's it! 🥳🎉
Here it is, illustrated with #code on #CodePen: https://codepen.io/thebabydino/full/MWLBzpa
#svg #stripes #svgPattern #pattern #coding #frontend #webDev #webDevelopment
I added a new section to my website, where I list sketches that I've built for fun. It's mostly #dataviz prototypes built with #svelte and #d3 but I also have some sketches on #scrollytelling or #SVG shape morphing.
It's an ongoing side project that will continue to grow.
See the sketches here:
https://sebastianlammers.com/sketches/
Let me know if you see sth. useful or feel inspired to built your own version of one of the sketches :)
Edit: sth. weird going on with the preview below. Click the link above!
Released version 0.2.1 of Blazor.SVGEditor to NuGet today fixing that selected shapes would lose focus when zooming using touch.
#blazor #dotnet #svg
Project: https://github.com/KristofferStrube/Blazor.SVGEditor
One of the ways in which I would like to minimize disk usage is using #JpegXL instead of #PNG (or even #JPEG, but I'm not hosting JPEG images), which I cannot do as long as #Firefox doesn't enable JPEG XL support in the mainline edition of its browser (no, I don't care that #Google has decided to boycott it in #Chrome, just like I haven't cared about their lack of #MathML support and proper #SVG animation support for years).
4/n
#Etsy listings dealt with ✨
Now to tackle Design Bundles.
There the first image must meet a 3:2 ratio (so a slight tweak to my batch processing file)
Then I need to wrap my head around licences. Design Bundles applies its own licence which allows for a lot, and I think I should make my licence for the files in Etsy mirror that... to save for future headaches and let folks who buy from either store have the same allowances in what they can do with my designs.
If you're a patron on Patreon, then first of all thank you and second... you may have noticed I've been toying with #SVG filters a bit more for the past couple of years.
And if you're a $5+ patron... a ✨ very cool ✨ new SVG filter effect just dropped! https://www.patreon.com/posts/93387505
This is genius:
vong | The first compute-centric vector graphic video game
https://github.com/simbleau/vong
I think _zooming_ should be an explicit feature in the game (which triggers some behaviour/state change in the game _besides zooming_).🙃
Yay! I have now re-uploaded and listed all 43 original designs to my new #Etsy account, all of them digital downloads.
I also ended up with a pretty sweet batch-processing system for future designs thanks to Data Merge in Affinity Publisher (Listing images),
and Mail Merge in Microsoft Office/Excel (Listing descriptions and tags)
👌
Time to happy dance 🕺
#SVG comes with so many cool features, but bringing that power to #CSS is so broken unless you don't need responsivity.
clip-path: path() is an example https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/
Another is when toying with lighting - x,y spotlight position can't use % values, just unitless numbers.
#coding #frontend #svgWish #cssWish #svgFilter #cssFilter #clipping #lighting #svgLighting #svgPath #webDev #webDevelopment #codingFrustrations
This Deer shadowbox was one of the first I completed 🦌.
Designed in Affinity Designer, cut with a Cricut - 5 layers of paper stacked and backlit with LED.
EDIT: Fixed timelapse/gif
#Cricut #Shadowbox #SVG #PapercutArt #MastoArt #LEDShadowbox #ALDRDesignShadowbox
Come register for this event to check out a lot of great talks regarding #accessible #coding and #TactileGraphics curricula! I'll be demoing #SVG coding and giving a BlindSVG.com walkthrough; we'll be releasing our Tangible Art & Design Adventures (TADA!) curriculum from CATT-NW; @ChanceyFleet will be giving a keynote on the second day; lots of activity to get folks excited about coding and digital creativity! https://aphconnectcenter.org/coding-symposium-3-0/
One of my most popular #CodePen demos of the past month: cycling gradient text glow https://codepen.io/thebabydino/pen/rNPOpJK
✨ very little #CSS + a simple #SVG filter
✨ no images whatsoever save for a CSS gradient
✨ no text duplication
✨ cycling gradient effect obtained just by animating a CSS variable
#coding #frontend #webDev #webDevelopment #svgFilter #cssGradient #gradientText #textGlow #glow #textEffect #gradientGlow #cssVariables #houdini #graphical #effect
Toying with using #SVG lighting filters for #CSS 3D shapes... 🤔
(not happy with it, perf sucks huge donkey dicks, 3D rotation is choppy as fuck...)
#coding #frontend #3D #maths #mathematics #geometry #svgFilter #webDev #webDevelopment
I added an option to download as #SVG which lets me print the drawing on my #penplotter
It’s fun drawing with a computer but ending up with a physically drawn art piece.

#GenerativeArt interlude
Yes, more of these
I'm in love with how you get order from the chaos with just a bias in the starting search angle instead of a random search angle
Hypnotic
#Development #Guides
SVG ViewBox · How the SVG ViewBox works; a creative coding lesson https://ilo.im/15gix6
_____
#Design #UiDesign #WebDesign #WebDev #Frontend #VectorImages #SVG #SVGviewBox
SVG allows you to embed CSS.
CSS can detect dark mode.
Make your favicons in SVG!
Simple example:
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
.r {fill: white}
}
</style>
<rect class="r" fill="black" width="16" height="16">
</svg>