Package Exports

photon-sphere
photon-sphere/dist/photon-sphere.es.js
photon-sphere/dist/photon-sphere.js
photon-sphere/dist/photon-sphere.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (photon-sphere) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Photon Sphere

SVG tools for generate geometric shapes path based on circular arcs

Installation

Via npm

npm install photon-sphere

or manual download, you can found the zip file in the releases

Usage

Quick Start

import PhotonSphere from 'photon-sphere.es.js';

const paths = new PhotonSphere({
    radius: 300,
    widths: 20,
    shapes: 'uniform',
});

Full Usage

import PhotonSphere from 'photon-sphere.es.js';

const paths = new PhotonSphere({
    morphingShape: true,
    radius: 300,
    widths: [20],
    shapes: ['uniform'],
    arcDasharray: [90, 0],
    align: 'face-out',
    attributes: {
        fills: ['red', 'blue']
    }
});

Shapes list

uniform
rounded
edge
reverse-edge
double-edge
reverse-double-edge
bevelled-edge
uniform-iontail
uniform-antitail
top-bevelled-iontail
top-bevelled-antitail
bottom-bevelled-iontail
bottom-bevelled-antitail
comet
reverse-comet
meteor
reverse-meteor

API Options

Property	Type	Description	Required	Default Value
radius	Number	Circle radius	Yes	-
widths	Number\|Array	Shape width	Yes	-
shapes	String\|Array	Arc shapes that already listed previously	Yes	`uniform`
arcDasharray	Array	It is like stroke-dasharray attribute that defining the pattern of arc shape and gaps	No	-
align	String	When the shapes have different size of width, it will determines where the shapes will be placed. there is `face-out`, `center` and `face-in`	No	`face-out`
morphingShape	Boolean	Used when you want animate one shape to another shape. Please read the Morphing Limitations section	No	false
attributes	Object<any\|Array>	Additional options that will be generated along with the path property	No	-

Best Practices

Consider to using this library as a tool for generating paths to be used in static code, rather than directly on runtime process. If you insist, try to using it with Web Worker as performance advice, especially while doing mass processing.

Draw Pattern Visualization

Morphing Limitations

Try not to morph shapes that have different Arc angle sizes, as animating SVG code is such a complex task without using any graphical tools.

License

MIT