SVG Share Code



  • Re: Share Code

    <svg onload='go()' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    
    <rect x='0' y='0' width='600' height='600' fill='white' stroke='black' stroke-width='1' onclick='go()' />
    
    <script><![CDATA[
    // onload='go()' onclick='go()' function go(){}
    
    x = 300
    y = 300
    colors = 'red yellow blue lime purple cyan fuchsia orange navy green hotpink cornflowerblue teal pink lawngreen'
    color  = colors.split(' ')
    
    function go(){
    for (i=0;i<3;i++)                     // number of times
    {
    for (j=0;j<1000;j+=2)                  // radial lines
    {
    c=Math.PI*j/180
    a=x+Math.cos(c*c*j)*290               // controls width
    b=y+Math.sin(c)*290                   // controls height
    l = document.createElementNS('http://www.w3.org/2000/svg','line')   
    l.setAttribute('x1',x)
    l.setAttribute('y1',y)
    l.setAttribute('x2',a)
    l.setAttribute('y2',b)
    cola = Math.floor(Math.random()*color.length)
    l.setAttribute('stroke',color[cola])
    l.setAttribute('stroke-width',2)
    l.setAttribute('stroke-linecap','round')
    document.documentElement.appendChild(l)
    }}
    }
    ]]></script>
    </svg>
    

    See below the image (Warp Drive) for this code.



  • @MoonDawg 0_1487715784570_Radials5.png
    :art: Warp Drive :art:



  • @MoonDawg Second line "rect" set up for onclick to change color.



  • <svg viewBox='0 -1850 2500 2500' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <polygon id='Pg1' points='0 600, 9.375 581.25, 18.75 600' /> <!-- No color declared -->
    
    <g id='G1'>
    <use xlink:href='#Pg1' x='0' y='0' transform='translate(0 0)'          fill='blue' /> <!-- Color declared -->
    <use xlink:href='#Pg1' x='0' y='0' transform='translate(9.375 -18.75)' fill='red'  />
    <use xlink:href='#Pg1' x='0' y='0' transform='translate(18.75 0)'      fill='green'/>
    </g>
    
    <g id='G2'>
    <use xlink:href='#G1' x='0' y='0' transform='translate(0 0)'         /> <!-- Color not work from here to end -->
    <use xlink:href='#G1' x='0' y='0' transform='translate(18.75 -37.5)' />
    <use xlink:href='#G1' x='0' y='0' transform='translate(37.5 0)'      />
    </g>
    
    <g id='G3'>
    <use xlink:href='#G2' x='0' y='0' transform='translate(0 0)' />
    <use xlink:href='#G2' x='0' y='0' transform='translate(37.5 -75)' />
    <use xlink:href='#G2' x='0' y='0' transform='translate(75 0)' />
    </g>
    
    <g id='G4'>
    <use xlink:href='#G3' x='0' y='0' transform='translate(0 0)' />
    <use xlink:href='#G3' x='0' y='0' transform='translate(75 -150)' />
    <use xlink:href='#G3' x='0' y='0' transform='translate(150 0)' />
    </g>
    
    <g id='G5'>
    <use xlink:href='#G4' x='0' y='0' transform='translate(0 0)' />
    <use xlink:href='#G4' x='0' y='0' transform='translate(150 -300)' />
    <use xlink:href='#G4' x='0' y='0' transform='translate(300 0)' />
    </g>
    
    <g id='G6'>
    <use xlink:href='#G5' x='0' y='0' transform='translate(0 0)' />
    <use xlink:href='#G5' x='0' y='0' transform='translate(300 -600)' />
    <use xlink:href='#G5' x='0' y='0' transform='translate(600 0)' />
    </g>
    
    <g id='G7'>
    <use xlink:href='#G6' x='0' y='0' transform='translate(0 0)' />
    <use xlink:href='#G6' x='0' y='0' transform='translate(600 -1200)' />
    <use xlink:href='#G6' x='0' y='0' transform='translate(1200 0)' />
    </g>
    
    </svg>
    

    See ART GALLERY to view image (Triangles) rendered by this SVG code. :) Enjoy! ;)


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.