https://github.com/curvenote/svg

Reactive SVG web-components for building explorable explanations
https://github.com/curvenote/svg

explorable-explanations interactive-visualizations scientific-visualization svg web-components

Last synced: 3 months ago
JSON representation

Reactive SVG web-components for building explorable explanations

• Host: GitHub
• URL: https://github.com/curvenote/svg
• Owner: curvenote
• License: mit
• Created: 2020-04-17T18:58:11.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T04:45:36.000Z (almost 3 years ago)
• Last Synced: 2025-07-07T11:09:05.969Z (3 months ago)
• Topics: explorable-explanations, interactive-visualizations, scientific-visualization, svg, web-components
• Language: TypeScript
• Homepage: https://curvenote.dev/svg
• Size: 2.53 MB
• Stars: 7
• Watchers: 2
• Forks: 4
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# @curvenote/svg

[![Ink-Basic on npm](https://img.shields.io/npm/v/@curvenote/svg.svg)](https://www.npmjs.com/package/@curvenote/svg)

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/svg/blob/master/LICENSE)

[![Documentation](https://img.shields.io/badge/curvenote.dev-Docs-green)](https://curvenote.dev)

The goal of `@curvenote/svg` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides basic charting and diagram capabilities through basic, reactive SVG graphics.

![Radius](images/radius.gif)

```html

  

  

  

  

```

## Getting Started

`@curvenote/svg` is based on web-components, which creates custom HTML tags so that they can make writing documents easier.

To get started, copy the built javascript file to the head of your page:

```html

```

You can also download the [latest release](https://github.com/curvenote/svg/releases) from GitHub. If you are running this without a web server, ensure the script has `charset="utf-8"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@curvenote/svg):

```bash

>> npm install @curvenote/svg

```

You should then be able to extend the package as you see fit:

```javascript

import components from '@curvenote/svg';

```

Note that the npm module does not setup the [@curvenote/runtime](https://github.com/curvenote/runtime) store, nor does it register the components. See the [curvenote.ts](/curvenote.ts) file for what the built package does to `setup` the store and `register` the components.

## Documentation

See https://curvenote.dev for full documentation.

## Basic Components

- r-svg-chart

- r-svg-text

- r-svg-path

- r-svg-eqn

- r-svg-circle

- r-svg-image

- r-svg-node