The drawing syncs to the code and vice versa. Switch between using code and UI. Built on composable lens [Foster et al. 2007] and edit-lens [Hofmann et al. 2012] theory, but applied in the string domain so unknown semantics like SVG animations are preserved without parsing. Follows the path of Sketch-n-Sketch [Chugh et al. 2016] [Hempel et al. 2019] but applied to an existing image format: SVG. Generated with a novel prompting strategy of requesting an LLM to use property checking against mathematical laws as a architecture, leading to strong implementation consistency over an expansive domain.
Fragment | A modern toolkit for creative coding
Fragment lets you sketch, render, and export canvas-based graphics with ease, from quick experiments to production-ready visuals. Built on top of Vite, Svelte and Mediabunny.
Symmetric lenses | Proceedings of the 38th annual ACM SIGPLAN-SIGACT symposium on Principles of programming languages
A lens is a bidirectional transformation between a pair of connected data structures, capable of translating an edit on one structure into an appropriate edit on the other. Many varieties of lenses have been studied, but none, to date, has offered a ...
Creating fonts from SVGs – with automation! 🤖 · Leif Gehrmann
Lately I needed the ability to create a font from an existing set of SVG files that I created in Sketch. I’m not a professional font creator, but I’ve figured out an automated workflow works that works best for me.
TanStack Charts
A typed, tree-shakable chart grammar for SVG and Canvas. Compose marks, views, scales, transforms, interactions, and motion with compact primitives or D3-compatible inputs.
Tangible Functional Programming
Motion Core — Svelte-native motion toolkit with GSAP and OGL-powered components, demos, and CLI-driven workflows
Svelte-native motion toolkit with GSAP and OGL-powered components, demos, and CLI-driven workflows.
Figma’s big AI update takes on Adobe, WordPress, and Canva
There’s a new vector illustration tool on the scene.
Calculating with lenses | Proceedings of the 20th ACM SIGPLAN workshop on Partial evaluation and program manipulation
Functional programs are particularly well suited to formal manipulation by equational reasoning. In particular, it is straightforward to use calculational methods for program transformation. Well-known transformation techniques, like tupling or the ...
Simulating Hand-Drawn Motion with SVG Filters
A practical guide to implementing the boiling line animation effect using SVG filter primitives and JavaScript - Blog post by Camillo Visini
heerich.js
Tiny engine for 3D voxel scenes rendered to SVG — boolean ops, oblique/perspective cameras, zero dependencies.
Quotient lenses | Proceedings of the 13th ACM SIGPLAN international conference on Functional programming
Bidirectional programming languages are a practical approach to the view update problem. Programs in these languages, called lenses, define both a view and an update policy - i.e., every program can be read as a function mapping sources to views as well ...
Generalized Lens Categories via functors $\mathcal{C}^{\rm op}\to\mathsf{Cat}$
Lenses have a rich history and have recently received a great deal of attention from applied category theorists. We generalize the notion of lens by defining a category $\mathsf{Lens}_F$ for any category $\mathcal{C}$ and functor $F\colon \mathcal{C}^{\rm op}\to\mathsf{Cat}$, using a variant of the Grothendieck construction. All of the mathematics in this note is straightforward; the purpose is simply to see lenses in a broader context where some closely-related examples, such as ringed spaces and open continuous dynamical systems, can be included.
Svelte - Animation
Resources for animations in Svelte
Portfolio - Brandon Ma
animate: • Svelte Docs
Animations for an AI agent using SVG and Svelte
Svelte - Native Animation Tools (by Bee 🐝) — Semble
Svelte - Animation Engines (by Bee 🐝) — Semble