Twojs

Two.js is a lightweight JavaScript library for drawing and animating two-dimensional vector graphics in web browsers. It provides a small, observable API and a simple scene graph that lets developers compose shapes, groups, and transformations in a declarative style. The library is designed to be renderer-agnostic, offering multiple backends so graphics can be rendered with SVG or Canvas, depending on the needs of the project and the environment.

The core concept in Two.js is the scene graph. A root scene acts as a container for child nodes, which can include groups and various shape primitives. Common shape types include lines, rectangles, circles, ellipses, polygons, polylines, and text. Shapes expose properties for styling and transformation, such as fill color, stroke color, stroke width, and the ability to translate, rotate, and scale. Groups enable hierarchical transforms and better organization of complex drawings.

Animation and interactivity are supported through the library’s update loop. Two.js integrates with the browser’s animation frame system, allowing properties to be animated over time and enabling interactive graphics for demonstrations, art, or educational content. Since rendering can use either SVG or Canvas, the library provides flexibility: SVG offers high-fidelity vector rendering suitable for scalable graphics, while Canvas can provide faster raster rendering for many objects or animation.

Two.js is commonly used for quick sketches, data visualizations, and small browser-based graphics projects where a simple API for vector drawing is preferred over lower-level Canvas or SVG manipulation. It is an open-source project with documentation and examples that illustrate how to create, style, and animate 2D graphics across compatible browsers.