SVG Share Code



  • Re: Share Code

    0_1499258759235_Seal copy 2.png

    <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.



  • 0_1499262137317_Seal.png

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



  • 0_1499262062786_Seal.png

    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!


  • @MoonDawg

    Nice. I edited the maze SVG a little bit to work in a jsfiddle (including a bit of jQuery to get position of the element; some other options are listed here.)
    https://jsfiddle.net/0stLqa2q/

    Edit:
    jsfiddle for the warp: https://jsfiddle.net/z5qvpere/
    jsfiddle for the Sierpinski Triangle: https://jsfiddle.net/2dekkh7L/



  • @Isildur I did not know about jsfiddle. Looks like fun. Will have to check it out. Thanks!



  • @MoonDawg
    You may also want to try out http://codepen.io/ and http://jsbin.com/ , which are similar. Here is a feature comparison table of the three, although it may be a bit outdated.

    There are others as well. Here someone compares the above ones and a few more.



  • 0_1499261976331_Seal.png

    MAKING A MOLE HILL OUT OF A MOUNTAIN

    I start out with a simple SVG Q-curve first thing. Then follow it up with 6 SVG elements.
    The rest is Javascript: point syntax, 3 points, get element IDs and Barycentric equations. What you see is what you get: No libraries; No links. Doesn't need to be compiled. Copy and save code with an svg extension and open svgname.svg file in your Vivaldi browser. Purpose is to demonstrate Barycentric equations with Bezier curves.
    Youtube has info on Bezier curves using Barycentric equations.

    <svg onload='go()' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <!-- Quad Path -->
    
         <path d='M100,500 Q300,100 500,500' fill='none' stroke='green' stroke-width='3' />
    
    <!-- Leg Lines -->
    
         <line x1='100' y1='500' x2='300' y2='100' stroke='black' stroke-width='3' />
    
         <line x1='300' y1='100' x2='500' y2='500' stroke='black' stroke-width='3' />
    
    <!-- Red Line -->
    
         <line id='L1' x1='500' y1='500' x2='300' y2='100' stroke='red' stroke-width='2' />
    
    <!-- Yellow and Blue Circles -->
    
         <circle id='C1' cx='500' cy='500' r='10' fill='yellow' stroke='black' stroke-width='1' />
    
         <circle id='C2' cx='300' cy='100' r='10' fill='blue' stroke='red' stroke-width='1' />
    
    <!-- Lime Circle -->
    
         <circle id='C3' cx='300' cy='100' r='10' fill='lime' stroke='green' stroke-width='1' />
    
    
    <script><![CDATA[
    
    function Point(x, y) {                // Javascript syntax for a point
      this.x = x
      this.y = y }
    
    var P0 = new Point(100, 500)          // Three xy points used here
    var P1 = new Point(300, 100)
    var P2 = new Point(500, 500)
    
    var  t = 0
    
    function go()
    {
    x1 = t*P0.x + (1-t)*P1.x              // Barycentric equations for Yellow Circle
    y1 = t*P0.y + (1-t)*P1.y
    
    cir = document.getElementById('C1')
    cir.setAttribute('cx',x1)
    cir.setAttribute('cy',y1)
    
    x2 = t*P1.x + (1-t)*P2.x              // Barycentric equations for Blue Circle
    y2 = t*P1.y + (1-t)*P2.y
    
    cir = document.getElementById('C2')
    cir.setAttribute('cx',x2)
    cir.setAttribute('cy',y2)
    
    cir = document.getElementById('L1')   // Red Line
    cir.setAttribute('x1',x1)
    cir.setAttribute('y1',y1)
    cir.setAttribute('x2',x2)
    cir.setAttribute('y2',y2)
    
    x3 = Math.pow(1 - t, 2) * P2.x + (1 - t) * 2 * t * P1.x + t * t * P0.x   // Barycentric equations for Lime Circle
    y3 = Math.pow(1 - t, 2) * P2.y + (1 - t) * 2 * t * P1.y + t * t * P0.y
    
    cir = document.getElementById('C3')
    cir.setAttribute('cx',x3)
    cir.setAttribute('cy',y3)
    
    t+=.1
    tout = setTimeout('go()',500)
    if (t>=1) t=0                         // Set up to repeat. ClearTimeout(tout) is not used.
    }
    
    ]]></script>
    </svg>
    

Log in to reply
 

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