pi-r-fun.com

SVG Polygon, Ellipse, Circle & Text Generator

Experiment with SVG

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.

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

Optional Text

SVG Markup

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