How do I create more sides to a polygon - SVG

Question

How do I create more sides to a polygon to make a Hexagon...

Answer 1

Argh !
It seems to the SoloLearn website as a bug: my code type on app is "web", but on web page it appears ( and open ) as "c++" :(
I'll would try to correct...

Whatever, you can look at https://code.sololearn.com/W97381dA23Ip/#html in addition ( it's a starting project, from wich I extract the previous snippet )

Answer 2

New ( interactive ) version of my SVG polygons generator, with improvments:

https://code.sololearn.com/WFoLMH3mo91T/#html

- interactive settings ( always basic parameters radius and number of vertices )
- new parameter: choice between <path> or <polygon> tag to generate
- new parameter: formatting precision ( nb max digits after floating point )

Answer 3

What do you means by "more sides" ? SVG's polygons ( <path> tag ) have no limit:

<path d="M 100,0 L 50.000000000000014,86.60254037844386 L -49.99999999999998,86.60254037844388 L -100,1.2246467991473532e-14 L -50.00000000000004,-86.60254037844385 L 49.999999999999936,-86.6025403784439 Z"/>

Above is an hexagon, radius 100, centered on svg origin ( top left -- with an id attribut, could be set as <defs> and <use> for transforms )...
I write a little script to generate it ;) ( https://code.sololearn.com/W6u7XyB817ff/#html )

Answer 4

Nope: it's just quiet simple, and directly output the poliygon code, without querying user from parameters... If you want to use it, edit the JS code ( instructions on comments in the HTML code ;) )

Answer 5

Well, the js snippet his just for auto-generate the tag: here's is implementation with <path> tag, who's like the <polygon> tag must be a child of a <svg> tag...
So, the <path> tag can easyly be converted in a <polygon> one:

<polygone points="100,0 50.000000000000014,86.60254037844386 -49.99999999999998,86.60254037844388 -100,1.2246467991473532e-14 -50.00000000000004,-86.60254037844385 49.999999999999936,-86.6025403784439"/>

( retrive the letters, and replace "d" attribute by "points" )

Answer 6

I found my answer - https://code.sololearn.com/WB2s0n09GUxC

I started here - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

Answer 7

Solved the buggy display on browser ( web site code playground ) by recreation of the project, link edited in previous post...

Answer 8

your code has some kind of bug... because all I can see is your code on the output

Answer 9

I just wanted HTML code, not javascript...
Using the polygon tag

Answer 10

When said sides I wanted to say points... polygon points... How that works I couldn't understand on the tutorial...