A modern JavaScript (TypeScript) suite of ESM modules for rendering 2D graphics using Scalable Vector Graphics (SVG) in the browser.
Live Demo of Block on a Ramp in STEMCstudio
- Cartesian (y increasing upwards), SVG (y increasing downwards), and other Coordinate Systems.
- Fine-Grained Reactivity for efficient updating.
- Dynamic diagram updating using reactive position, attitude, and scale properties to link shapes and text together.
- Geometric Algebra enabled multivectors for shape position and attitude properties providing coordinate-free and coordinate-based manipulation.
- Accurate (automatically generated) type definitions and API documentation.
- ESM, System, CommonJS, and UMD distribution formats.
- Modular package organization so that you only have to download what you need.
All packages are published together with the same version number.
A book is in the works.
In the meantime, a search of @g20 in the STEMCarXiv (STEMCstudio archive) at STEMCstudio should produce many working examples.
The core library that renders SVG. Required.
The SVG librray for creating SVG in the browser.
The shared reactive signals library. Required. You will only need to use this directly if you are creating your own shape extensions.
The HTML Canvas rendering library. Optional. Facilitates the generation of png images.
Live Demo of CanvasView in STEMCstudio
Hint: Launch the Program from the toolbar then right-click the output to obtain an image.
Provides functions for computing circle and line intersections. Optional.
Live Demo of Euclid's Elements Construction in STEMCstudio
Provides Linear and Radial Gradients. Optional. Gradients are instances of ColorProvider(s), which can be used for shape fill and stroke properties. You may extend @g20 with custom ColorProvider(s).
Live Demo of Linear and Radial Gradients in STEMCstudio
Provides RegularPolygon, RoundedRectangle, and Star shapes. Optional. Shapes such as these are extensions of the Path class. You may extend @g20 with custom Path based classes.
Live Demo of Graphics shapes in STEMCstudio
Provides a coordinate grid (Grid) and coordinate axes (Axes). Optional. The Axes and Grid classes extends Group and provide examples of extending @g20 with custom shapes based upon composition of existing shapes.
Live Demo of Grid in STEMCstudio
Provides a Player for controlling animation frame start, and pause. Optional.
Live Demo of Player in STEMCstudio
Mock SVG DOM for Unit Testing
A bundle containing most of the modules described here especially designed for use in web pages without a module loader. The Universal Module Definition is supported.