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 soon!

ALDR Design 🎨
5 hours ago

#ArtAdventCalendar Day 10.

Luna Moth - papercut design cut from black paper.

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

A papercut design of a luna moth cut out of black paper, and displayed against a blue piece of card.
Mary Holstege
12 hours ago

#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

Hexagonal grid with a lens shape along each edge, two thick arcs facing each other in the inside, and dots arranged in a consistent pattern (three between an arc end and a corner, four arranged in cardinal directions from center within the bounds of the arcs, and an extra one next to one of those four). The lenses, arcs, and dots are either blue or white, creating a random counterpoint to the consistent rhythm of the pattern.
Adam Krawacki
21 hours ago

Speed Limiter Fitted - pliki cyfrowe, Digital files. #pdf #svg

ALDR Design 🎨
1 day ago

#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

A short video/gif showing the details of a multi-layered papercut design in a shadowbox and backlit with LED. The scene is depicting a forest and an otter on a log, with parts of each layer forming the shape of a bear head as the final outline.
A short photo showing a multi-layered papercut design in a shadowbox and backlit with LED. The scene is depicting a forest and an otter on a log, with parts of each layer forming the shape of a bear head as the final outline.
Ville Takanen
1 day ago

I had a neat idea on how to make #css currentColor work for external (ie. fetched) #SVG files.

What do you think:

#litelement #webcomponents #typescript #learnwithplay
2 days ago

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

2 days ago

#Development #Courses
SVG tutorial · Learn SVG step by step, from basic to advanced concepts

#Design #WebDesign #SVG #Animation #Interactivity #WebDev #Frontend #CSS #JavaScript

ALDR Design 🎨
2 days ago

#ArtAdventCalendar Day 8.

Puffin - papercut design cut from black paper.

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

A papercut design of a puffin cut out of black paper, and displayed against a grey piece of card.
2 days ago

A very cute tutorial on #svg

David Bisset
2 days ago

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

David Bisset
2 days ago

Making "noisy" #SVG or adding noise texture with only code. #frontend #css

Pretty cool. Expecting @chriscoyier to mention this in a future Shoptalk Show. 😉

See also:

Andrew Wooldridge 🌱
2 days ago

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.




#webdevelopment #svg

3 days ago

#Development #Guides
Making SVG loading spinners · An interactive guide showcasing how to craft them

#WebDev #Spinner #Frontend #SVG #CSS

James Basoo
3 days ago

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.

Mary Holstege
4 days ago

#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

A grid of various constrained random walks in various Earth tones (from 'lajolla' gradient). The walks only use left, right, up, and down and form various rectangular squiggles. It looks like some weird kind of writing, perhaps.
ALDR Design 🎨
4 days ago

#ArtAdventCalendar Day 6.

String of Pearls - papercut design cut from black paper.

#Cricut #SVG #PapercutArt #MastoArt

A black papercut design of a string of pearls plant in a hanging basket. It’s not to scale, but displayed next to a real succulent house plant in a small pot. A blue paper ‘floor’ is at the bottom, with scrap paper (that resulted from the design being cut) scattered around. There is a yellow sheet of paper being used as a background panel.
Adam Krawacki
5 days ago

Only here! All the latest ADR signs for road transport!
Signs #ADR, #GHS and #UN - Digital files #pdf & #svg #signs #adn #transport #etsy

ALDR Design 🎨
5 days ago

#ArtAdventCalendar Day 5.

Rabbit Shadowbox, 4 layer papercut piece, backlit with LED.

#SVG #LEDShadowbox #MastoArt

A shadowbox design of a Rabbit set within a deep frame. Inside the Rabbit are 4 papercut layers depicting some trees, grass, and a rabbit. The layers are spaced and enclosed in the frame, backlit with LED so that light passes through each layer.

The frame is displayed on a green cutting mat, with a black Silhouette Cameo 4 machine behind it, the very machine used to cut each layer.
ALDR Design 🎨
5 days ago

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

Animated gif going layer by layer for a shadowbox design depicting a dinosaur scene in a forest. Two trex and stegosaurus can be seen.
Paul Hebert
6 days ago

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

An 2d animated pattern. Small branching shapes spread across a canvas, then at the end all of the branch ends sprout circular appendages.
6 days ago
ALDR Design 🎨
6 days ago

#ArtAdventCalendar Day 4.

Deer Skull Reclaimed by Nature - papercut design cut from black paper.

#MastoArt #PapercutArt #Cricut #SVG

A black papercut design of a deer skull that’s been reclaimed by nature. Present on the deer skull are mushrooms, ivy, and a bird on one of its antlers. Displayed against a grey background, with scrap paper (that resulted from the design being cut) scattered in the background.
ALDR Design 🎨
6 days ago

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

Screenshot from within the Affinity Designer software on MacOS, depicting a dinosaur theme constructed from many layers of silhouette design - each layer a different shade of grey. The scene depicts two t-rex dinosaurs and two stegosaurus, in a forest.
ALDR Design 🎨
6 days ago

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

Screenshot from design software Affinity Designer on MacOS. Multiple layers are being used in a landscape document, with different shades of grey. The layers are making up a scene of prehistoric-like plants, and dinosaurs (Two T-Rex, and two stegosaurs)
ALDR Design 🎨
1 week ago

#ArtAdventCalendar Day 3.

Manta Ray Shadowbox, 5 layer papercut piece, backlit with LED.

#MastodonArt #MastoArt #Papercut #SVG #LEDShadowbox

A shadowbox design of a Manta Ray, set within a deep frame. Inside the Manta Ray are 5 papercut layers depicting an underwater scene, corals, crabs, and even some swimming fish. The layers are spaced and enclosed in the frame, backlit with LED so that light passes through each layer.

The frame is displayed on top of a green cutting mat.
1 week ago

"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

Mary Holstege
1 week ago

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


If you take them mod some number and plot the grid, interesting patterns arise

#XQuery #SVG #CreativeCoding

Take an empty square and surround it with four black squares on each side. Now fill the empty squares with the same arrangement, scaled down. And do that again in all those empty subsquares. And again. Again. Again. You have a quilt of black and white squares, all fractal and lacy.

This plotted D(a,b) mod 5
Dotgrid is a grid-based vector drawing software designed to create logos, icons and type. It supports layers, the full SVG specs and additional effects such as mirroring and radial drawing. Dotgrid exports to both PNG and SVG files.

#svg #simple
1 week ago

Oufty !
Gros bug fix pour Inkscape !
La version 1.3.2 corrige de gros bugs de sauvegarde de la version 1.3.1 :

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

ALDR Design 🎨
1 week ago

#ArtAdventCalendar Day 2

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

#Cricut #AffinityDesigner #SVG #PapercutArt #Mandala

A mandala design cut out of black paper, displayed against a grey background, with scrap paper (that resulted from the design being cut) scattered in the background.
Ana Tudor 🐯
1 week ago

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

#svg #rant #coding #css #textEffect #frontend #webDev #filter

Text cutout with the magenta panel it's cut out of being sliced diagonally and the slices offset along their length in a direction depending on their parity. The panel slices project shadows onto those below them vertically on the page and onto the purple textured background behind.

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.

#Notes #JavaScript #SVG

A 2d floor plan with the temperature overlayed using interpolation across the whole space
Amadeus Maximilian
1 week ago

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

#webDev #svg #canvas #blogPost

Mary Holstege
1 week ago

#GenerativeArt interlude

Fake fossilized tree rings

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

#XQuery #SVG #CreativeCoding

A slice through a tree, showing the rings. The tree has apparently fossilized to agate or something: there is a sheen to it. The rings show a little texture too them: tiny ridges catch the light.

A simple generative model, where each season has an average growth rate (smaller for winter vs summer) that gets added to the growth rate for a particular part of the tree. Tree growth rates are correlated to their neighbours and from season to season.
Editor B
2 weeks ago

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:

But I'm open to other suggestions!

2 weeks ago

“SVG filters are some of the most underrated front-end tech. They are ridiculously powerful.” — Scott Kellum

#Development #WebDev #Frontend #SVG #SvgGraphics #SvgFilter #Quote

ALDR Design 🎨
2 weeks ago

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.


Screenshot of my website in development for ALDR Design. The main text says 

"Designs you can craft with"

"Intricate templates for you to craft with, ideal for paper and more. Every design has been test cut and comes with detailed instructions on how to use it" 

There are a couple of buttons to shop my Shadowbox and SVG collection, with a dragonfly design to the right. Below the heading area is a featured block, showing my Owl, Stag Beetle, and Deer Skull design. This is all set on top of a grey'ish background with gridlines.
ALDR Design 🎨
2 weeks ago

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

that other makers and crafters can use 😊

#MastoArt #Art #SVG #Papercut

An intricately cut leaf out of black paper - displayed against a metallic bronze paper background and surrounded by the out pieces that came from the design.
A framed Manta Ray design, composed of an initial silhouette design of a Manta Ray, and and underwater scene on the 4 papercut layers within. This is all backlit by LED light and set within a deep IKEA frame.
A silhouette dragonfly design on my iPad in the process of being made, shown in the app Affinity Designer. An Apple Pencil is resting on the display, in the background can be seen a LED mechanical keyboard.
A dragonfly design cut out of black paper,  displayed on a small potted succulent plant against a grey backdrop.
Ana Tudor 🐯
2 weeks ago

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

Animated GIF. On the left, it shows the example SVG with a dashed line from the top left corner to the bottom right one. On the right, it shows the `stroke-width` in DevTools and how gradually increasing its value from 1% to 83% in this case turns the dashed line into a diagonal stripe pattern.
Ana Tudor 🐯
2 weeks ago

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

#svg #stripes #svgPattern #pattern #coding #frontend #webDev #webDevelopment

1️⃣ Draw a line along the direction of the stripes, let's say along the main diagonal.

Defaults for x1, y1, x2, y2 are all 0 and we want the start point x1,y1 to be at 0,0 (top left corner) anyway, so we only set x2,y2 at 100%,100% (bottom right corner).

<line x2='100%' y2='100%' stroke='orange'/>

This draws an orange ine along the main diagonal, from the top left corner to the bottom right one.

2️⃣ Make this line dashed.

<line x2='100%' y2='100%' stroke='orange' stroke-dasharray='20%'/>

This makes the line dashed.

3️⃣ Make this line thicker.

<line x2='100%' y2='100%' stroke='orange' stroke-dasharray='20%' stroke-width='20%'/>

This makes the dashed line thicker.

4️⃣ No, not like that... really, much thicker!

<line x2='100%' y2='100%' stroke='orange' stroke-dasharray='20%' stroke-width='150%'/>

The dashed line is now so thick that the dash lines stretch perpendicularly onto it to the point they cover the entire SVG rectangle.
Sebastian Lammers
2 weeks ago

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:

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!

ALDR Design 🎨
2 weeks ago

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

#Etsy #EtsyShop #SVG

Kristoffer Strube
2 weeks ago

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

Zooming using touch without selected shapes losing focus.
2 weeks ago

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


ALDR Design 🎨
2 weeks ago

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

A dragonfly design cut out of black paper and placed in a see-through glass frame, being held you against a moody grey sky.
ALDR Design 🎨
2 weeks ago

#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

Ana Tudor 🐯
2 weeks ago

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!

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

Jan :rust: :ferris:
2 weeks ago

This is genius:

vong | The first compute-centric vector graphic video game

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

ALDR Design 🎨
2 weeks ago

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

Ana Tudor 🐯
3 weeks ago

#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

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

ALDR Design 🎨
3 weeks ago

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

Timelapse showing the construction of one of my LED Shadowbox designs set within an IKEA frame. 5 layers of machine cut paper depicting a forest scene and a deer, set within the outline of a dear head. All the layers are being backlit by LEDs.
Close up shot of my LED Shadowbox turned on, 5 layers of machine cut paper, showing a forest scene with a deer, set within the outline of a deer head.

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

Ana Tudor 🐯
3 weeks ago

One of my most popular #CodePen demos of the past month: cycling gradient text glow

✨ 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

Animated GIF. Cycling gradient text with the same gradient glow.
Ana Tudor 🐯
3 weeks ago

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

Paul Hebert
3 weeks ago

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.

A symmetrical drawing that looks like a flower in an explosion.
Mary Holstege
3 weeks ago

#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


#XQuery #SVG #CreativeCoding

Black and white maze design. There are interlocking circular structures in the maze, arranged symmetrically (although the maze is not itself symmetric). It is chaos. It is order. I could stare at it for hours.
4 weeks ago
Icy Planet
A bottle on the beach
4 weeks ago

#Development #Guides
SVG ViewBox · How the SVG ViewBox works; a creative coding lesson

#Design #UiDesign #WebDesign #WebDev #Frontend #VectorImages #SVG #SVGviewBox

1 month ago

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="">
@media (prefers-color-scheme: dark) {
.r {fill: white}
<rect class="r" fill="black" width="16" height="16">

#SVG #CSS #favicon #webdesign

1 month ago

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

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