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! ;)



  • Here is a little maze to pass the time away. Sometimes there isn't an open path between green square and red square, so just reload and try again. Enjoy! :)

    POST YOUR RESULTS IN THE REPLIES!

    <svg onmousemove='show(evt)' 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='#def' stroke='blue' stroke-width='4' />
    
    <script><![CDATA[
    
    function show(evt)
    {
    cir = evt.target.ownerDocument.createElementNS('http://www.w3.org/2000/svg','circle');
    cir.setAttribute('cx',evt.clientX);
    cir.setAttribute('cy',evt.clientY);
    cir.setAttribute('r',2);
    cir.setAttribute('fill','red');
    evt.target.ownerDocument.documentElement.appendChild(cir);
    }
    
    codes = '\u2501 \u2503 \u2513 \u2517 \u2523 \u252B \u2533 \u253B \u254B \u2501'
    cc = codes.split(' ')
    
    for(r=0; r<630; r+=30) 
    {
    for(c=0; c<600; c+=30) 
    {
    a = Math.floor(Math.random()*10)
    switch (a)
    {
    case 0 : j=0; break;
    case 1 : j=1; break;
    case 2 : j=2; break;
    case 3 : j=3; break;
    case 4 : j=4; break;
    case 5 : j=5; break;
    case 6 : j=6; break;
    case 7 : j=7; break;
    case 8 : j=8; break;
    case 9 : j=9; break;
    }
    n = document.createTextNode(cc[j])
    t = document.createElementNS('http://www.w3.org/2000/svg','text')
    t.setAttribute('x',c)
    t.setAttribute('y',r-3)
    t.setAttribute('font-family','courier')
    t.setAttribute('font-size',30)
    t.setAttribute('font-weight','bold')
    t.setAttribute('fill','blue')
    t.appendChild(n)
    document.documentElement.appendChild(t)
    }}
    
    ]]></script>
    
    <rect x='0'   y='0'   width='17' height='17' fill='lime' />
    
    <rect x='583' y='583' width='17' height='17' fill='red' />
    
    </svg>
    

    0_1493576405714_Maze.png
    :art: Maze :art:



  • This post is deleted!

Log in to reply
 

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