pi-r-fun.com
SVG Polygon, Ellipse, Circle & Text Generator
Experiment with SVG
This is a svg regular polygon, circle, ellipse and text generator. The svg polygons, ellipses, circles and text appears on the svg canvas, the svg text markup appears in the textarea.
The border color is the text color. The X origin and Y origin is the center of the poygons, circles, ellipses and the start of text strings.
To stack shapes, start with largest and work down to the smallest.
The circle function and text function ignores the number of sides and rotational offset.
The SVG Generator provides only limited options with regards to shape, size, color and location but the svg textarea text can be modified and redrawn.
The JavaScript program uses a cartesian coordinate system and a counter clockwise rotation variable (0.00-1.00) for the trigonometry needed to create the polygon points and the ellipse transfom rotate. The polygon points are converted to the screen coordinate points required by the svg polygon. The ellipse requires a eccentricity value from 0 to 1.
It is difficult to modify the svg polygon screen coordinate points but it is not too difficult to modify the svg text and svg circles.


600X600 SVG Canvas
fill color
black: blue: green: yellow:   red: pink:
orange: grey: maroon: teal: purple: aqua:
border line or text color
black: blue: green: yellow:   red: pink:
orange: grey: maroon: teal: purple: aqua:
border line width
2: 4: 6: 8: 10: 12:
number of polygon sides
3: 4: 5: 6: 7: 8:
hypotenuse/radius length
5: 10: 25: 50: 100: 250:
x origin, screen coordinate
100: 200: 300: 400: 500: 600:
y origin, screen coordinate
100: 200: 300: 400: 500: 600:
polygon & ellipse rotational offset
.00: .16: .25: .125: .33: .10:
.50: .2: -.25: -.125: -.33: -.10:
ellipse eccentricity
0: .25: .33: .5: .66: .85:








Optional Text
SVG Markup


svg

home unit circle