Just for fun. Intending to put some animations up at some time. Anything to do with circles on this page.
This is rough and in progress. I want to at some point add extra features, such as overlap of arcs, variable radius, etc.
To change thickness of arcs, click on red lines in canvas on right, or change numbers in drop down boxes below. Alphabet letters already made can be obtained by typing in a capital letter. At the bottom, svg can be cut and paste into file of your choice and opened in a browser.
Letter idea from Erik and Marty Demaine
Type a capital letter: | ||||||||||||||||||||||||||||||||||||
svg data for an arc clicked on above: | ||||||||||||||||||||||||||||||||||||
<g fill="none" ><path id = "edge50-5" d=" M startx starty A midptx midpty a b c endx endy M endx endy Z" stroke="magenta" stroke-width="3" stroke-linecap="round" /></g ></td> | ||||||||||||||||||||||||||||||||||||
thicknesses matrix as javascript: | ||||||||||||||||||||||||||||||||||||
thicknesses matrix as javascript: | ||||||||||||||||||||||||||||||||||||
Thicknesses of lines: | ||||||||||||||||||||||||||||||||||||
|
The svg for this picture:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="threecircles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="750px" height="700px" viewBox="0 0 750 700" enable-background="new 0 0 750 700" xml:space="preserve">
</svg>