pascal, to CSS
@pascal@moth.social avatar

I have blogged again, this time about animating SVG stroke properties with CSS to create fireworks. https://www.pascal.com/diary/2024-02-23-animating-svg

#svg #css #svelte #sveltekit

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

Circly McCircleFace

#XQuery #SVG #CreativeCoding

cloudcannon, to random
@cloudcannon@techhub.social avatar

Collaborating in style — with a Git-based Headless CMS! ☕️ 😍

video/mp4

hugolego,

@cloudcannon biutiful... by the way, for #UI - frontend ... any thoughts about combining your platform with other powerful tools ? :

In other words when a #git #workflow meets #svg #art & design ? What ... if ?

Just wondering about what could happen ... when something like "cloudcannon meets " @penpot

https://penpot.app/

xahteiwi, to webdev
@xahteiwi@mastodon.social avatar

Somewhat niche question.

Suppose I have SVG files, which include some text (labels, and such like). And I want to use those images in several reveal.js presentations using different themes, which means the presentations use different default fonts.

Do I have a way to ensure that the text in the SVG is rendered in the same font as the HTML it's embedded in? If so, how?

(Boosts appreciated. Helpful comments too, obviously. 🙂)

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

Snake tangle

Also not what I was really looking for

We'll just call this Failure Week

#XQuery #SVG #CreativeCoding

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

Not what I was trying for, but I kinda like it anyhow

#XQuery #SVG #CreativeCoding

davidbisset, to free
@davidbisset@phpc.social avatar

https://fffuel.co is a collection of color tools and #free #SVG generators for gradients, patterns, textures, shapes & backgrounds #design #frontend

didoesdigital, to CSS

Why might an SVG shape rotate weirdly?

What is an annulus sector?

What happens when you apply an SVG attribute rotation and a CSS style rotation at the same time?

Where did that D3 arc go?!

All your hypothetical questions have been answered!

Rotating SVG paths: https://observablehq.com/@didoesdigital/rotating-svg-paths

#svg #css #DataViz

oblomov, to webdev
@oblomov@sociale.network avatar

I'm looking forward to the new #Ladybird browser becoming mature enough to become a viable alternative to Firefox as a daily driver.

I've seen it mentioned that at this time its development is apparently driven by the need to be able to render specific websites and/or page, so I'm going to throw a #challenge that even Chrome failed at rendering correctly until recently:

http://wok.oblomov.eu/ars/halving-series/

#MathML #SVG #SMIL #webdev

roggmatz, to CSS

5 hours later, I was able to dynamically set the color of #SVG icons using #CSS variables and #JavaScript, although at a cost of having a semi-broken layout as the anchor tags containing the icons no longer match the size of the icons themselves.

Today’s lesson: do not expect complex code snippets generated by ChatGPT to actually work and do not use them as starting points if you do not fully understand the underlying algorithm.

toxi, to animation
@toxi@mastodon.thi.ng avatar

Animating SVG via https://thi.ng/hiccup-svg and the new https://thi.ng/ramp v3 with its multi-channel timelines... sooo much easier (and easier to control) than using CSS!

https://demo.thi.ng/umbrella/ramp-scroll-svg/

(I manually set the document height to 2000px, scrolling might be weird/nonfunctional on large screens/window sizes)

#ThingUmbrella #SVG #Animation #Timeline #ScrollDrivenAnimation #UI #TypeScript #JavaScript

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

What if you constructed extended stars using Kaplan's method (https://archive.bridgesmathart.org/2000/bridges2000-105.pdf)?
What if you did a little quaternion rotation to get them plastered onto the sides of a regular dodecahedron?
What if you drew it all with a https://roughjs.com/ kind of styling? (Similar: I'm using my own thing based on ideas from rough.js.)
What if you ordered rendering and opacity by z?
What if you projected the whole mess?

Mystic Dodecahedrons

#XQuery #SVG #CreativeCoding

cssbasics, to CSS
@cssbasics@hachyderm.io avatar

#SVG Icons with #CSS Masks: "Have you ever inlined SVG icons inside a CSS stylesheet? It can improve performance by reducing HTTP requests if done selectively. I do this all the time using a custom property and background-image to make reusable icons." https://dbushell.com/2024/01/19/svg-icons-with-css-masks/

amunizp,
@amunizp@fosstodon.org avatar

@cssbasics
This is super helpful!

I did not want to do icon on CSS but I want to add SVG to background to decorate. My current background is a cradicule notebook vibe made with #CSS paths and I wanted to give it some spatter on it with #SVG simply because I have the svg and don't know how to translate to #CSS

pablolarah, to UI
@pablolarah@mastodon.social avatar

🟤⚫️ Brad Woods Digital Garden
@bradwoodsio
Notes about creative coding on the Web:
Juice - Draw on Scroll - User Driven #UI - 3D in #CSS - CSS Blend Modes - Floating Image - Layout - Nextjs - Click Target
#webdev #svg

https://garden.bradwoods.io/

Animated gif. Scrolling the homepage of the Brad Woods website with a grid of cards in light brown background changing to black on hover.

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

Tripping the light fantastic

Snell's law applied to a matrix of Cauchy materials with highly unrealistic characteristics, just to make things more fun

#XQuery #SVG

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

#genuary Day 27: 1 hour

The thing I was trying to do first depended on an old component that had somehow stopped working properly, so after spending all morning debugging that... I switched gears to this. Promising, but needs more work I think

#XQuery #SVG #genuary2024 #genuary27

mathling, (edited ) to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

#genuary Day 26: Grow from a seed

Circles spawning circles, alternating 8/9 way symmetry with pruning and generational shrinkage and colouring

#XQuery #SVG #genuary2024 #genuary26

mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

#genuary Day 25: Recreating that thing

A bit of asemic writing, always a fun time

#XQuery #SVG #genuary2024 #genuary25

mathling, to genart
@mathling@mastodon.social avatar

interlude

Day 24: Impossible objects

I am inordinately proud of the gradient in the middle of the arch/on the middle column: it was quite tricksy. Too bad ImageMagick and InkScape both failed on it. Too bad I can't just post the bloody SVG without conversion nonsense.

gfkdsgn, to apple German
@gfkdsgn@burma.social avatar

1984, January 24th., Steve Jobs presented the first Macintosh Computer. We are glad to share our MAC POP Art, in tribute, in this Fediverse, to celebrate the 40th anniversary of that milestone with You, today.

@art of made with @inkscape by

1984 Big Brother Portrait behind a vintage computer illustration of a Mac SE30 and with a Apple Lisa, Altaire 8800, IBM 5150 and Xerox Alto computers. Made with Inkscape
Colorful Retro Computer Composition of vintage IT products for the 40th Anniversary of the first Apple Mac Computer. Made in SVG vector quality with Inkscape by

gfkdsgn,
@gfkdsgn@burma.social avatar

The IBM 5150 was launched 2 year ahead of the , but wasn't a "insanely great" personal computer "for the rest of us". That's what the Computer History Museum is chatting about here...
https://computerhistory.org/events/insanely-great/

Since the & wasn't much more than a terminal with local CPU, floppy/hard disk support, the operating system was a "pirated" clone of . Even when IBM teamed up with Microsoft to break copyrights of Digital Research & Gary Kildall's IP on CP/M, wasn't up-to-date since there was no GUI available.
@art work made in with @inkscape

boldewyn, to random
@boldewyn@mastodon.social avatar

You can use #Inkscape as a filter on the command line for #SVG files with --pipe (for input) and --export-filename=- (for output):

cat my.svg | inkscape --pipe --export-type=pdf --export-filename=- | some-pdf-processing-pipeline

davidbisset, to random
@davidbisset@phpc.social avatar
mathling, to genart
@mathling@mastodon.social avatar

#GenerativeArt interlude

#genuary Day 23: 16x16

I'm not into tiny pixel art, so here is a 16x16 grid of extended stars, varying sides and kept sides across, angle of attack down

#XQuery #SVG #genuary2024 #genuary23

  • All
  • Subscribed
  • Moderated
  • Favorites
  • JUstTest
  • kavyap
  • DreamBathrooms
  • cisconetworking
  • khanakhh
  • mdbf
  • magazineikmin
  • modclub
  • InstantRegret
  • rosin
  • Youngstown
  • slotface
  • Durango
  • tacticalgear
  • megavids
  • ngwrru68w68
  • everett
  • tester
  • cubers
  • normalnudes
  • thenastyranch
  • osvaldo12
  • GTA5RPClips
  • ethstaker
  • Leos
  • provamag3
  • anitta
  • lostlight
  • All magazines