Open-source alternatives to Css Doodle

Pts is a TypeScript creative coding library and data visualization framework designed for building generative art and interactive visuals. It functions as a multi-target graphics engine that outputs visual commands to HTML5 Canvas and SVG through a single unified interface. The toolkit serves as a linear algebra visualization tool, providing mathematical primitives for spatial transforms and geometric calculations. This allows for the creation of algorithmic patterns and the simulation of geometric behaviors. The framework covers a broad capability surface including the design of interactive

This project is a creative software framework and procedural graphics toolset designed for building custom graphics, sound, and user interface software. It functions as a development environment that provides integrated project and dependency management for creating technical multimedia productions. The system serves as a historical source archive, preserving the code and assets used in technical creative productions from 2001 to 2011. It includes a media production bundler to package source code and assets into single executable distributions for end users. The framework covers a broad rang

Leva is a React GUI control panel and real-time parameter editor used to monitor and tweak application state and variables without modifying code or reloading the page. It functions as a dynamic state debugger and extensible input library that provides a visual interface for fine-tuning numerical, boolean, and text values within a running web application. The project distinguishes itself through a plugin system that allows the creation of custom input components and specialized behaviors to support unique data types. It utilizes type-inference to automatically map data to the appropriate visu

canvas-sketch is a JavaScript generative art framework and web-based creative coding environment. It provides a system for creating browser-based generative artwork using built-in tools for geometry and randomness. The framework functions as a high-resolution print exporter and pen plotter vector generator, allowing users to design with physical units and DPI settings for archival printing and robotic drawing machines. It also serves as a GPU shader integration tool for loading and executing shader files to achieve hardware-accelerated rendering. The project includes a development workflow f

p5.js is a JavaScript creative coding library and generative art framework. It serves as a web-based graphics engine and a high-level HTML5 Canvas wrapper designed to produce algorithmic imagery and responsive audio-visual experiences. The project provides a simplified sketching API for rendering 2D and 3D graphics directly in a web browser. It enables the creation of interactive animations, generative art, and digital experiences that respond to user input. The library covers a range of applications including interactive data visualization, browser-based multimedia art, and educational prog

Web Components is a set of specifications for creating reusable custom elements with encapsulated styling and logic for the web. It provides a standard for defining new HTML tags that function as independent components across different browser engines. The system is built on three primary pillars: the Custom Elements standard for defining new tags, the Shadow DOM implementation for isolating internal document structures and styles, and the HTML Templates specification for defining reusable fragments of markup that remain inert until instantiated. These capabilities enable modular web design

MakerSkillTree is an educational roadmap designer and interactive skill map visualizer. It provides a system for creating, exporting, and navigating structured learning paths through an SVG skill tree generator and a corresponding YAML learning path schema. The project features a drag-and-drop interface for designing custom skill trees and a bidirectional conversion system that translates visual layouts between SVG and YAML formats. This allows for data-driven version tracking and the generation of changelogs between different iterations of a skill tree. The system supports the visualization

SpinKit is a UI component library and CSS animation library focused on providing a collection of animated loading indicators and spinners. It serves as a set of lightweight visual transitions designed to create motion and feedback within web interfaces. The library implements these indicators using pure CSS rendering and keyframe animations to notify users of active background processes. It uses a class-based styling system and minimal HTML structures to render visual cues without relying on scripts or images. Appearance can be adjusted through CSS variables and custom styles to modify color

bounce.js is a JavaScript library and programmatic wrapper for generating and applying CSS3 keyframe animations and 3D transformations. It provides a tool for creating complex animation sequences without the need to write manual stylesheet rules. The library allows for the creation of animations by chaining scale, rotation, translation, and skew transformations. These generated sequences can be saved under unique names for reuse across multiple elements. The system manages the animation lifecycle through callback functions that trigger when a visual sequence completes. It also includes a com

purecss-francine is a digital artwork rendered entirely using hand-coded HTML and CSS. It functions as a visual illustration that emulates a classical oil painting without the use of images or canvas elements. The project is implemented as a Pure.CSS theme designed to achieve a specific 18th-century aesthetic. It uses pure CSS illustration techniques to render a detailed artistic piece through style sheets and markup.

Polymer is a custom element framework and web component library used to build reusable, encapsulated custom elements that function as native browser components. It serves as a system for defining public properties and attributes that trigger automatic state observation and updates within the DOM. The project functions as a data binding library, providing a mechanism to synchronize state between internal component properties and external models via two-way data binding. It covers the development of frontend component libraries and web component architecture, enabling the creation of modular u

React animations is a CSS keyframe animation library and inline style animation tool designed for React applications. It supplies pre-built keyframe motion sequences that can be applied directly to inline styles and component layouts without requiring external CSS stylesheet files. The library functions by defining reusable animation keyframes as plain immutable JavaScript objects, eliminating the need for imperative animation controllers. It dynamically generates standard CSS keyframe rules at runtime from these declarative JavaScript objects and injects them into the document on the fly, at

svg.js is a JavaScript library and toolkit for programmatically creating, modifying, and querying Scalable Vector Graphics in the browser. It functions as a programmable interface and DOM wrapper that allows developers to manipulate vector elements through a standardized API rather than writing raw XML. The library includes a dedicated animation framework for creating fluid motion and visual transitions. This is supported by tools for path morphing and the use of timelines and easing functions to animate vector graphics. The toolkit covers a broad range of capabilities, including geometric t

DiceBear is an SVG avatar generation library and image API that creates deterministic profile pictures from seed strings. It provides a system for generating consistent visual outputs across different environments and programming languages using JSON style definitions. The project distinguishes itself with a comprehensive design toolkit, including a visual style designer and a Figma integration plugin that converts design frames into JSON schemas. It supports sophisticated visual control through weighted probability distributions for components, contrast-aware color management for accessibili

This project is a GitHub contribution streak tracker and profile README statistic generator. It functions as a deployable server that calculates consecutive days of commits, pull requests, and issues to produce dynamic visual cards displaying a user's total, current, and longest activity streaks. The tool generates customizable SVG activity stat cards that can be embedded directly into profile overviews. It features a parameter-driven theme engine for modifying colors and borders, as well as localization support for translating labels and formatting dates. The system includes configurable st

This project is a frontend visualization library and gallery of interactive web examples. It provides a collection of implementations that demonstrate advanced visual effects through the use of stylesheets, canvas drawing surfaces, and three-dimensional graphics libraries. The collection specifically features implementations for visualizing artificial intelligence outputs and complex data patterns. It includes specialized galleries for three-dimensional scenes and spatial objects, as well as a showreel of stylistic motion effects and interface designs. The library covers a broad range of ren

Star-vector is a suite of vision-language systems designed to generate scalable vector graphics from text or image inputs. It utilizes a vision-language foundation model to treat the creation of visual elements as a structured code generation task. The system employs a multimodal architecture that maps visual patterns and shapes to corresponding structural elements in a vector code sequence. It incorporates a render-loop feedback mechanism and reinforcement learning to iteratively refine the fidelity of the generated graphics by comparing rendered outputs against target images. The project c

Magic UI is a copy-paste UI framework and React animated library providing a collection of interactive, visually dynamic interface components. It serves as a design engineering toolkit that bridges high-fidelity design and production code by offering ready-made components for direct integration into web applications. The library focuses on animated UI development and the implementation of interactive components, utilizing a copy-paste distribution model. This approach allows for rapid prototyping and full local customization without the need to install heavy dependencies. The components are

Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface elements. It provides a collection of custom element components and reusable HTML tags that encapsulate style and behavior to work across any JavaScript framework or plain HTML pages. The system is designed as a themable UI component system, utilizing CSS variables to manage visual themes and dark mode support. This allows for the implementation of custom design systems and a consistent visual language across web environments. The library covers broader capabilities in accessible int

Lit is a library for building lightweight, interoperable web components. It provides a base class that leverages native browser APIs to encapsulate state, logic, and styles, allowing developers to create custom elements that function consistently across any modern web project. The framework distinguishes itself through a reactive property system that automatically triggers efficient, batched DOM updates. By utilizing tagged template literals, it defines declarative UI structures that are compiled into optimized update instructions. Its architecture emphasizes modularity through a reactive con

This project is a Java-based toolkit that integrates the OpenCV computer vision library into the Processing creative coding environment. It provides a programming interface designed to facilitate the inclusion of real-time image analysis and computer vision algorithms within interactive art installations and visual design projects. The library distinguishes itself by wrapping low-level C++ routines into a managed environment, allowing users to perform complex visual tasks through a simplified interface. It supports high-performance operations by sharing raw pixel data between the host environ

This project is a creative coding showcase and interactive 3D portfolio template. It utilizes JavaScript and ThreeJS to render a navigable browser environment for presenting professional projects and digital artwork. The project implements a WebGL interactive gallery and immersive digital showcases. These environments use hardware-accelerated graphics to provide 3D navigation and creative web animations. The technical implementation includes a 3D scene with camera movement and lighting, supported by GLTF model loading and raycaster-based interaction. The architecture employs an entity-compon

Graphite is a node-based visual design environment that integrates vector illustration, raster image processing, and motion graphics generation into a single platform. It utilizes a functional reactive pipeline and a data-flow execution model to propagate state changes through a graph of interconnected nodes, allowing users to construct complex, automated design workflows. The platform distinguishes itself through a context-aware evaluation engine that injects runtime metadata—such as coordinate data and loop indices—directly into the node graph. This enables the creation of procedural geomet

Feather is an open-source collection of minimal vector graphics designed on a standardized 24x24 grid for use in web and design projects. It provides a set of lightweight SVG assets intended to maintain visual consistency across digital user interfaces. The library supports visual parity between design software and production code through a dedicated design tool component library. This ensures that icons used in mockups remain consistent with the final implementation. Integration capabilities include embedding icons via inline markup, image tags, or CSS backgrounds. The project also provides

gg is a Go 2D graphics library and vector graphics engine designed for programmatic image generation. It provides a canvas rendering API to create custom 2D shapes, paths, and visual assets, which can be exported as PNG and JPG files. The toolkit enables the construction of complex geometry using Bezier curves and custom paths. It supports a variety of rendering operations, including filling and stroking paths, applying linear and radial gradients, and utilizing surface patterns. The library covers a broad range of capabilities, including text rendering with word wrapping and dimension measu

jss is a CSS-in-JS styling library and dynamic style engine that allows for the authoring of CSS properties as JavaScript objects. It functions as a tool for defining visual rules programmatically to manage application appearance and bind styles to JavaScript data. The project distinguishes itself through a specialized implementation of container queries, which adjust element layouts based on the dimensions of parent containers. It also acts as a CSS animation orchestrator, creating scoped keyframe sequences and transitions controlled via JavaScript logic. The library provides capabilities f

This project is an advanced CSS learning curriculum consisting of starter files and final projects. It provides a collection of real-world implementations and a project gallery designed for mastering modern layout and styling techniques. The curriculum focuses on a modular approach to stylesheets using Sass variables and architecture. It emphasizes the block-element-modifier naming convention to create maintainable and reusable CSS. The material covers several core capability areas, including responsive web design using CSS Grid, Flexbox, and media queries. It also includes the development o