Masthash

#SVG

David Runge
9 hours ago

I just merged my first (larger) contribution to #sequoia's #weboftrust tooling:
https://gitlab.com/sequoia-pgp/sequoia-wot/-/merge_requests/63

The sq-wot #CLI tool can now export to #graphviz #DOT for most of its subcommands. This means you can generate your web of trust as a graph and convert that to e.g. #svg or #png.
I'll do a more extensive write-up of this in the coming days.

My thanks go out to @nwalfield, @wiktor and @hko for extensive reviews and help with the change!

#rustlang #openpgp

GNU/Linux.ch
10 hours ago

Punkt, Punkt, Komma, Strich - fertig ist das Mondgesicht!

Das Format Tiny Vector Graphics ist einfacher und kleiner als entsprechende SVG-Dateien.

#Grafik #SVG #TVG #Format #Linux

https://gnulinux.ch/punkt-punkt-komma-strich-fertig-ist-das-mondgesicht

David Bisset
17 hours ago

A collection of 120+ basic #SVG shapes to copy - the SVG code goes into to your clipboard.

https://shapes.framer.website/

vy
1 day ago

people like @DeanBaker13 discredit themselves with their shallow response to #SVG. It is in real life not simple for even a small business to keep their money distributed over multiple bank accounts - partly because banks treat small business poorly and load them with fees. They want big accounts.

Mary Holstege
1 day ago

Similar patterning, stronger colour contrast making the illusion more compellling

#GenerativeArt #XQuery #SVG #CreativeCoding

Spiral illusion created by alternating regions of yellow and navy interlocking arcs arranged in circles. The various tilts of the arcs creates the illusion.
sofia
1 day ago

oh yeah: i was informed that it doesn't work in Safari, presumably because they don't allow the shape ("d") of #SVG paths to be assigned via #CSS.

their loss. i can't be bothered to support Safari's non-compliant bullshit. i don't even know how i could feature-check for that 🤷…

i do have a colorblind mode, though. i just take a notch out of the octagons and rotate them so they look like pacmans facing various direction. but i'll probably switch to chevrons or something…

NaNdy Stalick
2 days ago

Is there a performant #Linux way to rasterize an #SVG that doesn't involve just using a whole web browser? Even a #python lib would do, but I'd rather keep it #nodeJS

Asking for my #Eink #Epaper #raspberrypi #raspi project

Mary Holstege
2 days ago

#GenerativeArt interlude

It's a spiral, no, wait, two spirals, or wait a knot, right? No, wait. What?

Circles.

#XQuery #SVG #CreativeCoding

Alternating white and brown squares are arranged circularly over a red background. The tilting of the squares creates a compelling visual illusion that there is some kind of spiral or knot in play, but it is just circles.
Terence Eden
2 days ago

A big update to SuperTinyIcons
https://github.com/edent/SuperTinyIcons

Loads of #SVG icons for popular services - each one UNDER 1,024 bytes. Yup, less than a kilobyte each.

Take a look!

Mary Holstege
3 days ago

#GenerativeArt

Slime mold

Experimenting with applying a sine modulation to the hyphae radii, plus a little lighting

#XQuery #SVG #CreativeCoding

Non-intersecting branching growth covering the center of the canvas. The tendrils are in shades of green and tan and have a raised semi-glossy appearance.
Jon Croce
3 days ago

Made a windmill style loading spinner messing around with #SVG and #CSS animations :blobfoxgoogly:

A square rotated 45 degrees and divided into eight triangles that animates the hue of each triangle's color, creating a windmill-like effect.

A last side by view of @drgeo sketch.
#CuisSmalltalk rendering then #Firefox #SVG rendering.
#Smalltalk

Cuis
Firefox SVG

Side by view of @drgeo sketch.
#CuisSmalltalk #VectorGraphics rendering then #Firefox #SVG rendering.
#Smalltalk

Cuis
Firefox

Work in Progres exporting @drgeo sketch to #SVG.
Observe the stunning rendering quality of #CuisSmalltalk compared to #Firefox.
#Smalltalk

Firefox rendering
CuisSmalltalk rendering
Nelson Chu Pavlosky
4 days ago

#FollowFriday recommendations for the #Philadelphia area:

- @stumblewyk - GM running #TTRPGs, #Philly sports, cute dog
- @joni - brand design, #SVG, #bees, weight lifting, the tippy top of DE
- @stephstephking - education and children, #writer, #publicTransit
- @nicolewolverton - Horror, #elections, globetrotting

Adam Krawacki
5 days ago
Andrew Leahey
6 days ago

More than you ever wanted to know about the FDIC insurance system but, like, not *a lot* more than you wanted to know. Just the right too-much amount.

@law #lawfedi #law #fdic #svg

Apple #Podcasts: https://podcasts.apple.com/us/podcast/minimum-competence/id1668925072

Everybody else find a link here or in your player of choice: https://esqcast.com/@minimumcompetence/episodes/weds-3-15-fdic-deposit-insurance-fund-primer-florida-digital-rights-anti-esq-and-harvey-ai

Tricia (she/her)
1 week ago

Thrilled to be presenting at Storybook Day today (3/14), the first-ever #Storybook user conference! I’ll be sharing my process of creating a “Digital Garden” in Storybook with #React, #SVG, and #FramerMotion animation.

Conference is streaming here starting at 10:00am PDT, and my talk is at 12:43pm PDT:

https://storybook.js.org/day/stage/main

Boxy SVG Editor: Supposedly good at producing clean SVG
https://boxy-svg.com/
#graphics #editing #images #svg #+

ertdfgcvb
1 week ago

svg8.svg — Code is numbers.
Edition of 10
(Final version)

Each character of the source code is remapped to a hexadecimal digit (0-F) with an added offset over time. Each line of code will be visited once.

Project page

http://ertdfgcvb.ch/+/svg

Realtime version

https://objkt.com/asset/hicetnunc/815103

#realtime
#svg
#quine
#bigint
#javascript
#NFT
#cryptoart

Mary Holstege
1 week ago

#GenerativeArt interlude

Danzer triangles, now with texturing

#XQuery #SVG #CreativeCoding

The canvas is covered with Danzer triangles: an aperiodic triangular tiling. The overall arrangement has been warped to curl around a point to the right side of the canvas. Some of the triangles are rendered with shadows, creating the effect of lacework over a background that shades across soft blues and greens from the top left corner to the bottom right. The triangles that stand out are in various soft shades of pink and orange, with an inset layer or lilac triangles.
Ana Tudor 🐯
1 week ago

And the most random assortment of buttons to summon Satan https://codepen.io/thebabydino/pen/eYYyqZR

Fun fact: first made this for a conference talk. Upon arriving there, discovered the venue was a church. One of the paintings there crashed with a loud noise during my talk.
https://twitter.com/anatudor/status/1197923211347931138

Requires support for registering custom properties via @ property.

#CSS #JS #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #mask #svg #satan

Animated gif. Clicking the Summon Satan button brings up a Lucipurr character and a control panel with a melting pot of styles for the controls there. These controls can make Lucipurr's horns and forehead pentagram start glowing, can make his whiskers start moving, can make his fangs and claws come out, can adjust the length of his pitchfork or his eye colour.
Adam Krawacki
1 week ago
Jeff Brown
1 week ago

I must have received emails from every single bank that I have a relationship with all telling me that everything is fine and deposits are FDIC insured and completely safe.

So sure EVERYTHING IS NORMAL.

#SVG
#bank
#bankmeltdown

vy
1 week ago

I think it's time for tea and a book
#SVG #SiliconValleyBank #Glibertarians

Cover of idiotic libertarian book " Atlas Shrugged"  with new title "Yellin Shrugged"
Romain Barthélémy
1 week ago

Trying to use a #SVG file as #Keynote shape.

Can’t find anything simpler than:
1/ Open in LibreOffice Presentation, break the image, and save to pptx
2/ Open pptx in Keynote and trying to rebuilt the shape from the broken parts with Unite/Intersection/Subtract/Exclusion

Any better straightforward solution?

#MacOS #Apple #LibreOffice

Steffo
1 week ago

Huh. #SVG on #Sphinx works when viewing the documentation locally, but not when viewing it on #ReadTheDocs...

Adam Krawacki
1 week ago
paul 🇬🇧
2 weeks ago
Awkward Look Monkey Puppet refers to two images of the Monkey Puppet known as Kenta from the Japanese children's television show Ōkiku Naru Ko awkwardly looking towards the camera and then away. The side-eye glance is not the original scene of the monkey and was instead created in Photoshop when the meme was first made in 2016. The double image gained significant popularity as a reaction in 2019 after originally circulating Spanish meme communities in the years prior.
Mary Holstege
2 weeks ago

#GenerativeArt interlude

Basket

Chair tiling with a cylindrical mapping

#XQuery #SVG #CreativeCoding

The canvas is mostly filled with L-shaped tiles in warm colours shading from greens and yellow at the top left through reds and oranges in the middle to purples and yellows at the bottom right. The whole arrangement is curved, as if wrapped around a cylinder.
Mary Holstege
2 weeks ago

#GenerativeArt interlude

Bam!

What happens when you apply a very disruptive mutation function to a triangular tiling.

#XQuery #SVG #CreativeCoding

Lines criss-crossing from here to there in a chaotic jumble, more or less centered on the canvas. Regions filled in a variety of colours: greens, blues, oranges, black, white.
Armorial College of Pride
2 weeks ago

Can anyone recommend a good place for #hosting #CreativeCommons #svg #vectorart and resources? I need something that:
• is free or close to it
• facilitates CC licensing
• does not require login to view or download
• isn't Microsoft, Google, Facebook, Amazon etc.
• preferably is part of the #fediverse

Ability to host more than just svg would be a bonus but not vital. Likewise hotlinking.

In times past I'd've hosted myself but I simply don't have time to maintain server security these days.

Willard Goosey
2 weeks ago

Finally figured out how to do a thing I've wanted to do since I started using RISC OS! How to convert my #Linux #XFig files into #RiscOS Draw files!

Modern xfig can export to #SVG. #NetSurf can load plain SVG files and export to draw! Boom done!

Adam Krawacki
2 weeks ago

Green Emission - Digital files. Znaki ekologiczne - Pliki cyfrowe. #SVG #PDF #PNG #green #emission #truck #normyspalania #znaki #ekologiczne #digital #files #pliki https://etsy.me/3T3tBc2

Mary Holstege
2 weeks ago
A non-periodic pattern of triangular tiling in red, yellow, and black.

Apply a topographic map to any element with #CSS and #SVG filters: https://codepen.io/scottkellum/pen/poOWGQg

A graphic topographic map with muted tones
argumento :socialiststar:
2 weeks ago

Pueden descargar una versión vectorizada de este cartel de Karl Maria Stadler, de 1914 conmemorando el Día Internacional de la Mujer Trabajadora de #OpenClipArt #SVG #Inkscape #8DeMarzo #DiaInternacionalDeLaMujerTrabajadora #InternationalWorkingWomenDay

https://openclipart.org/detail/316436/8-de-marzo

Como ya está en vectores, se puede escalar, imprimir en distintas técnicas, cambiar los colores, usar los vectores para hacer playeras, etc.

Cartel alemán de los años 20, conmemorando el Día Internacional de la Mujer Trabajadora, trazado en vectores en Inkscape
72mena
2 weeks ago

06:22 . Project Watchface. #JavaScript #SVG

Ulrike
2 weeks ago

[en] playing with #vivus, a JS lib animating SVG line drawings https://maxwellito.github.io/vivus/ #vivus #svg #js

72mena
2 weeks ago

New watch face is live: XTAL. This GIF shows how to read the time. I also included a new "info" icon, it is a guide that gives you all the numbers on this watch face. Check it out. #javascript #svg
https://watchface.netlify.app/

Kai Klostermann
2 weeks ago

Btw, my talk for #WebDevBBQ in #Stuttgart is up and running ☺️ Looking forward speaking about animated #SVG s.

#Dev #Meetup

Peter Tripp
2 weeks ago

Hand made svg pixel art.
5x5 Smilie

#svg #handmade #playdate #indiedev #pixelart

72mena
2 weeks ago

🚧 I'm working on a new watch face this weekend. Here's a sneak peek. #svg #javascript

A diagram of a new watch face I'm designing.
Oblomov
2 weeks ago

Doe anybody know if there is a way for an #SVG to “know” if it's being included as an img or if it's “standalone”? #askFedi #webdev

My issue is the following: I'm trying to add #darkMode support to my SVGs, but this actually makes them “invisible” when visualized standalone at least on #Firefox, because the background (unspecified, so transparent when an image) ends up white when standalone. I would like to specify the SVG background as black but ONLY when viewed standalone. Suggestions?

CodePen.IO :verify:
3 weeks ago

RT Ana Tudor 🐯🖤🌻
For the latest #CodePenChallenge: grainy dissolving an image's edges https://codepen.io/thebabydino/pen/oNMBeye?editors=1100
Done with #CSS + an #SVG filter, heavily commented.
For comparison, the original image in the img tag which you can see on right click, open image in new tab. https://t.co/T0snwG00lr

:sys_twitter: https://twitter.com/anatudor/status/1631242357210333190

Media source: https://pbs.twimg.com/media/FqNTCEbX0AErTt8?format=png&name=orig
Media source: https://pbs.twimg.com/media/FqNVTKbX0AIvJor?format=png&name=orig
Ana Tudor 🐯
3 weeks ago

If you're supporting me on Patreon (https://www.patreon.com/anatudor), then this is

🎇 a thank you for supporting my work
🎇 a reminder I've been posting new stuff every week, stuff that cannot yet be found anywhere else on the web, done by anyone 😼

#CSS #SVG #coding

Ana Tudor 🐯
3 weeks ago

For the latest #CodePenChallenge: grainy dissolving an image's edges https://codepen.io/thebabydino/pen/oNMBeye?editors=1100

Done with #CSS + an #SVG filter, heavily commented.

For comparison, the original image in the img tag which you can see on right click, open image in new tab.

#CodePen #webDev #webDevelopment #coding #SVGFilter

image with grainy dissolving edges
original rectangular image, no edge graininess
jake
3 weeks ago

the #figma community wants to hear about your ideas. a third of our users are developers! personally, I want to see talks about #a11y #css #web #svg and #typescript

this is going to be a massive #design and #developer event and we'd love to have you there. reach out to me with questions. you can submit a talk idea at https://config.figma.com

CSS Basics
3 weeks ago

Putting Gears In Motion: Animating Cars With #HTML And #SVG: "SVG <animateMotion> provides a way to define how an element moves along a motion path. In this article, Paul Scanlon shares an idea of how to use it by animating race cars in an infinite loop as easy as one-two-three!" https://www.smashingmagazine.com/2023/02/putting-gears-motion-animating-cars-with-html-svg/

gemma lynn
3 weeks ago

mucked around with some dumb legacy #reactjs #svg nonsense this morning and then compensated for feeling dumb by telling myself that other people might also feel dumb so we can all feel dumb together

https://til.ello.tech/to-inline-a-sprite-svg-that-was-externally-linked

#webdev #frontend

Christian Grobmeier
3 weeks ago

I have been using Pixelmator Classic for a long time on my mac and recently upgraded to Pro for working with SVG. That was the best decision ever. It's beautiful and fast, and even /me can create simple, useful graphics quickly. Thanks, @pixelmator

#svg #graphic #pixelmator #photoshop #inkscape #illustration

Ana Tudor 🐯
3 weeks ago

Something for this week's #CodePenChallenge: 1 div grainy/ dithered gradient blob with a simple SVG filter https://codepen.io/thebabydino/pen/GRBrWeY

I've given this concept a try before https://twitter.com/anatudor/status/1407388305948397571 but lately, I've been toying with SVG filters a bit more and... I got better at it...🤷‍♀️

#CSS #SVG #CodePen #SVGFilter #dither #grainy #gradient #blob #webDev #webDevelopment #compositing #maths

A mesh gradient blob with dithered fading edges.
v_i_o_l_a
3 weeks ago

"Atlas icons": "Open source free #icons library, available in variable stroke #SVG format, web font, Figma, React, Vue and Flutter ready to use packages" › https://atlasicons.vectopus.com/
[via "designer in action"-newsletter, https://www.designerinaction.de/gestaltung/atlas-icons-im-vektorformat/]

Chris Miller 🍿
4 weeks ago

Shout out to the wonderful Inkscape vector graphics software! It's seriously one of the best one-stop-shop tools I know for technical planning and communication.

Most recently I wanted equipment images for my home network diagram. Stock photos exist for the UniFi gear but they weren't quite what I was looking for. And my 4U server case (RSV-L4500U) is somewhat custom. Managed to create from-scratch SVGs for all three over a couple of evenings!

#svg #inkscape #foss #homelab

Christian Tietze
4 weeks ago

Convert all glyphs of a #font to individual #SVG files https://barrd.dev/article/convert-all-glyphs-of-a-font-to-individual-svg-files/

I'm pretty sure I could've used this not long ago! Only where ...

If you are in or around #NYC on March 23-25th and want to learn #TactileDrawing and #TactileArt, sign up and come join our TeachIn at the #NYPL Andrew Heiskell Talking Book Library! I'll be helping @ChanceyFleet and #AnnCunningham teach #blind drawing and art concepts, #SVG coding, and how to create #TactileGraphics and tap into your creative and spatial skills. This is really exciting! #a11y #FeelAroundAndFindOut https://docs.google.com/forms/d/e/1FAIpQLSdB-q2xMqfVzx5Ltu-9KxkbqaGaWW3WuTwcdJ6oGxldupAAJg/viewform

Noah Liebman
4 weeks ago

Making a bar chart with a lot of #css, a little bit of #d3, and no #svg https://noahliebman.net/2023/02/using-css-layout-for-graphs/

David Bisset
1 month ago

https://iconoir.com is an #opensource #icon library. Available in #SVG format, Font, React and React Native libraries, #Figma and Framer.

Mary Holstege
1 month ago

#GenerativeArt interlude

More fun with circles

This arrangement from a random flip-inverse-reverse path with full symmetries, triangulated, rendered with a gradient fill.

#XQuery #SVG #CreativeCoding

A four-way symmetric arrangement of circles of various sizes. The circles are coloured in various shades of orange and contain nested off-center circles. There are varying numbers of nested circles and different off-centers, breaking the symmetry. The pattern is dominated by an oval of six larger circles, with a couple of similar ovals with smaller circles nestled inside the outer oval. Various smaller and teeny circles create a filligree between and around the ovals.
Andrew Wooldridge
1 month ago

Using SVG foreignobject, you can embed cool HTML into your github README files https://pragmaticpineapple.com/adding-custom-html-and-css-to-github-readme/

#github #readme #svg

Dave Barr
1 month ago

Convert all glyphs of a font to individual SVG files

I was trying this out for a concept idea I have, found some bits and pieces on the Interwebs and put it all together in a short article.

https://barrd.dev/article/convert-all-glyphs-of-a-font-to-individual-svg-files/

#Font #SVG #WebDev