duplicates - Creating multiple random Cricles in SVG -


hey trying create pattern of multiple circles of different colour , each time created rotated slightly, here example of trying achieve: http://etc.usf.edu/clipart/42900/42923/circle-29_42923.htm

i have created svg create circle in correct spacing not sure how duplicate circle using svg, if can me appreciated, here fragment of code far:

multiple circles

<svg x="100" >     <svg height="500" width="500">       <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="transparent" />      </svg> </svg> 

i have created design mention in link. have used javascript achieve this.

here fiddle , check :- http://jsfiddle.net/abaff/

steps:-

1) first created 'main circle' , around going create rings of circle.

2) use 'path' create circle. reason find exact points on circular path.

3) start created circle on points found out in step 2.

check below code:-

html code:-

<svg id="mainsvg" width="1000" height="600">         <path id="smallcircle" fill="none" stroke="red"               d="               m 200, 200               m -75, 0               75,75 0 1,0 150,0               75,75 0 1,0 -150,0               "               />          <path id="largecircle" fill="none" stroke="green"               d="               m 500, 200               m -150, 0               150,150 0 1,0 300,0               150,150 0 1,0 -300,0               "               />         </svg> 

javascript code:-

function path2array (path) {                 var pointsarray = new array();                 (var = 0; < path.gettotallength(); i++) {                     var point = path.getpointatlength(i);                     var cordinatesxy = {                         x: point.x,                         y: point.y                     }                     pointsarray.push(cordinatesxy);                 }                 return pointsarray;             };              var mainsvg=document.getelementbyid('mainsvg');                           function createcirclering(radius,gape,parent){                 var maincircle=document.getelementbyid(parent);                 var points=path2array(maincircle);                 var counter=0;                 var circle;                 for(var point in points){                     counter++;                     if(counter%gape===0){                         point=points[point];                         circle=document.createelementns("http://www.w3.org/2000/svg", "circle");                         circle.setattribute("cx", point.x);                         circle.setattribute("cy", point.y);                         circle.setattribute("r",  radius);                         circle.setattribute("fill", "none");                         circle.setattribute("stroke", "black");                                         mainsvg.appendchild(circle);                     }                 }             }              createcirclering(10,5,'smallcircle');             createcirclering(50,10,'largecircle'); 

Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -