explaingit

jonobr1/two.js

8,620JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

JavaScript library for drawing 2D shapes and animations in the browser using one set of instructions that works with SVG, Canvas, or WebGL without changing your code.

Mindmap

mindmap
  root((two.js))
    What it does
      2D shape drawing
      Animation loop
      Renderer switching
    Renderers
      SVG
      Canvas
      WebGL
    Environments
      Browser
      Node.js server
    Audience
      Web developers
      Creative coders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build an animated logo or interactive graphic for a website without learning separate SVG or Canvas APIs.

USE CASE 2

Add a spinning or bouncing animation to a React component using the ES6 module import.

USE CASE 3

Generate PNG image files on a server with Node.js using the same drawing code that runs in the browser.

USE CASE 4

Prototype a 2D visualization that can switch between SVG and WebGL rendering without rewriting drawing logic.

Tech stack

JavaScriptSVGCanvasWebGLNode.js

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Two.js is a JavaScript library for drawing two-dimensional shapes and animations in a web browser. The core idea is that you write one set of drawing instructions and Two.js handles the actual rendering in whichever technology you choose: SVG (the vector format browsers use natively), HTML5 Canvas, or WebGL (the GPU-accelerated graphics layer). Switching between those three output modes does not require changing your drawing code. To use it, you include the library in an HTML page, create a Two instance, and then use its methods to make shapes. The README shows a short example where a rectangle is drawn in the center of the screen and then rotated slightly on every frame, producing a spinning animation. The library manages the animation loop for you, you just write what should change on each frame. The library can also run on a server (outside of a browser) using a companion package called Node Canvas. In that mode, you can use the same drawing API to produce image files, which is useful for generating graphics automatically without a browser involved. Two.js can be installed from npm, downloaded as a single prebuilt file, or compiled from source if you want a smaller file by including only the renderers you need. As of version 0.7.5 it supports ES6 module imports, so it fits into modern JavaScript build setups using tools like webpack or esbuild, as well as frameworks like React. The project has been maintained since 2012. Its documentation lives on a companion website generated from the source code and from Markdown files in the repository. The library is available on npm under the name two.js.

Copy-paste prompts

Prompt 1
Using two.js, create a bouncing ball animation inside a div on my webpage, show me the full HTML and JS.
Prompt 2
How do I use two.js with React to draw an animated SVG shape that plays when the component mounts?
Prompt 3
Write a Node.js script using two.js and node-canvas to generate a PNG file of a bar chart from an array of numbers.
Prompt 4
Show me how to switch my existing two.js sketch from SVG renderer to WebGL renderer and what I need to change.
Open on GitHub → Explain another repo

← jonobr1 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.