JS-SVG: Examples & Library

Experiment with SVG

Experiment with SVG

600X600 SVG Canvas

click here to view svg markup

The javascript svg functions can be downloaded in .txt format. Save as .html if you wish to experiment with them.
The functions require the location of the cartesian 0,0 on the screen system an the rotational offset as an angle between 0 and 1.0 in a counter clockwise rotation.
This combination simplifies sizing and rotation of polygons.

All of the JavaScript svg functions are included in the svgShapes function. There is a function for regular polygons and a function for irregular polygons. The irregular polygon function requires a two dimensional polar coordinate array of distance and angle pairs. The pi-r-fun ellipse function requires a rotational offset between 0 and 1.0 and an eccentricty parameter between 0 and 1. An ellipse with an eccentricity of 0 is a circle.

Function calls are placed at the bottom of the svgShape function. svgShape function requires div id, svg width and svg height parameters.

The html requires an empty div tag pair with an id.

This version includes a JavaScript nameSpace variable that is the opening svg tag. This variable facilities the use of svg gradients.

All of the JavaScript svg functions are included in the svgShapes function. There is a function for regular polygons and a function for irregular polygons. The irregular polygon function requires a two dimensional polar coordinate array of distance and angle pairs. The pi-r-fun ellipse function requires a rotational offset between 0 and 1.0 and an eccentricty parameter between 0 and 1. An ellipse with an eccentricity of 0 is a circle.

Function calls are placed at the bottom of the svgShape function. svgShape function requires div id, svg width and svg height parameters.

The html requires an empty div tag pair with an id.

This version includes a JavaScript nameSpace variable that is the opening svg tag. This variable facilities the use of svg gradients.