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

#MastoArt #Papercut #SVG #Moth #PapercutDesign #Cricut

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

#XQuery #SVG #CreativeCoding

#Caturday #CatsOfMastodon #MastoCats #SVG #javascript

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

#litelement #webcomponents #typescript #learnwithplay

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.

#MastoArt #Papercut #SVG #Puffin #PapercutDesign #Cricut

A very cute tutorial on #svg
https://svg-tutorial.com/

A nice looking #SVG Tutorial, learning step by step with a fun interface. #css #frontend

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

#webdevelopment #svg

#Development #Guides
Making SVG loading spinners · An interactive guide showcasing how to craft them https://ilo.im/15xcnu

_____
#WebDev #Spinner #Frontend #SVG #CSS

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

#XQuery #SVG #CreativeCoding

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.

#Cricut #SVG #PapercutArt #MastoArt

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.

#SVG #LEDShadowbox #MastoArt

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.

#SVG #GenerativeArt

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

#MastoArt #PapercutArt #Cricut #SVG

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.

#AffinityDesigner #SVG #WIP #MastoArt #Shadowbox

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.

#MastodonArt #MastoArt #Papercut #SVG #LEDShadowbox

"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"

#news #guyana #essequibo #SVG

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

#XQuery #SVG #CreativeCoding

Oufty !
Gros bug fix pour Inkscape !
La version 1.3.2 corrige de gros bugs de sauvegarde de la version 1.3.1 : https://inkscape.org/news/2023/12/01/Inkscape-1-3-2-solves-data-loss-bug/

#Inkscape #FLOSS #graphism #vectors #SVG #design

#ArtAdventCalendar Day 2

Mandala 02 - Papercut design cut from an A5 sheet of black paper.

#Cricut #AffinityDesigner #SVG #PapercutArt #Mandala

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.

https://usb.openlab.dev

#Notes #JavaScript #SVG

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/

#webDev #svg #canvas #blogPost

#GenerativeArt interlude

Fake fossilized tree rings

Because waiting for those multi-level Turing patterns to finish gets boring

#XQuery #SVG #CreativeCoding

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.

#WebDev #HTML #CSS #SVG

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

#MastoArt #Art #SVG #Papercut

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!

Wooo! First sale on my Etsy shop - Happy dance 🥳🕺

#Etsy #EtsyShop #SVG

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

An old dragonfly design I’ve made, an SVG design cut on a Silhouette Cameo.

This one initially had some slight cutting problems due to areas being too close together (on the left wing you can see it’s split) - but this has since been tweaked in the design file.

#Papercut #SVG #MastoArt #FediArt

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

#SVG #EtsyShop #DesignBundles

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

#svgFilter #css #coding #frontend #webDev #webDevelopment

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_).🙃

#SVG #Graphics #GameDev #Pong

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 🕺

#EtsyShop #MastoArt #SVG

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

https://aphconnectcenter.org/coding-symposium-3-0/#h-program-day-1-focus-on-student-instruction-nbsp-nbsp

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

#XQuery #SVG #CreativeCoding

#CSS #SVG

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

#SVG #CSS #favicon #webdesign

“‘Copy as SVG’ is just the most useful Figma feature ever.” — Jonas Pelzer

_____
#Design #UiDesign #WebDesign #Tools #Figma #SVG #Quote