SVG Share Code - New Game



  • OBJECT is to rearrange sliders to spell out a phrase.
    Manually click on any slider to move the slider to the empty space.

    <svg onmousedown='omd(evt)'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <!--
    NOTES on how to run code:
    1. Copy and save code to any text file.
    2. Change extension .txt to .svg (Filename.svg)
    3. Open .svg file in your Vivaldi browser.
    NOTES on game procedure:
    1. OBJECT is to rearrange sliders to spell out a phrase.
    2. Manually click on any slider to move the slider to the empty space. 
    -->
    
    <style type='text/css' ><![CDATA[
    text   { font-size:125px; font-family:georgia; font-weight:bold; fill:crimson; text-anchor:middle; stroke:white; stroke-width:2;}
    rect#A { fill:cornflowerblue; opacity:.75}
    ]]></style>
    
    <g transform='translate(15 15)' > <!-- Needed to move puzzle right and down for border. -->
    
    <!-- Background -->
    <rect x='-5' y='-5' width='1410' height='610' fill='lightgray' stroke='black' stroke-width='10' />
    
    <!-- Top Row -->
    <g id='1' transform='translate(0 0)' onclick='go(1)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >r</text>
    </g>
    
    <g id='2' transform='translate(200 0)' onclick='go(2)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >is</text>
    </g>
    
    <g id='3' transform='translate(400 0)' onclick='go(3)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >r</text>
    </g>
    
    <g id='4' transform='translate(600 0)' onclick='go(4)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >t!</text>
    </g>
    
    <g id='5' transform='translate(800 0)' onclick='go(5)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >o</text>
    </g>
    
    <g id='6' transform='translate(1000 0)' onclick='go(6)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >r</text>
    </g>
    
    <g id='7' transform='translate(1200 0)' onclick='go(7)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >B</text>
    </g>
    
    
    <!-- Second Row -->
    <g id='8' transform='translate(0 200)' onclick='go(8)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >i</text>
    </g>
    
    <g id='9' transform='translate(200 200)' onclick='go(9)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >a</text>
    </g>
    
    <g id='10' transform='translate(400 200)' onclick='go(10)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >l</text>
    </g>
    
    <g id='11' transform='translate(600 200)' onclick='go(11)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >a</text>
    </g>
    
    <g id='12' transform='translate(800 200)' onclick='go(12)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >v</text>
    </g>
    
    <g id='13' transform='translate(1000 200)' onclick='go(13)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >i</text>
    </g>
    
    <g id='14' transform='translate(1200 200)' onclick='go(14)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >V</text>
    </g>
    
    
    <!-- Third Row -->
    <g id='15' transform='translate(0 400)' onclick='go(15)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >e</text>
    </g>
    
    <g id='16' transform='translate(200 400)' onclick='go(16)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >s</text>
    </g>
    
    <g id='17' transform='translate(400 400)' onclick='go(17)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >d</text>
    </g>
    
    <g id='18' transform='translate(600 400)' onclick='go(18)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >G</text>
    </g>
    
    <g id='19' transform='translate(800 400)' onclick='go(19)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >w</text>
    </g>
    
    <g id='20' transform='translate(1000 400)' onclick='go(20)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >e</text>
    </g>
    
    </g>
    
    <script><![CDATA[
    
    //blocked = 1
    r0 = c0 = 0                   // row and column
    
    A    = new Array(3)
    A[0] = new Array(1,8, 15)   // column 1
    A[1] = new Array(2,9, 16)   // column 2
    A[2] = new Array(3,10,17)   // column 3
    A[3] = new Array(4,11,18)   // column 4
    A[4] = new Array(5,12,19)   // column 5
    A[5] = new Array(6,13,20)   // column 6
    A[6] = new Array(7,14, 0)   // column 7
    
    // Click on slider to be moved to empty space.
    
    function omd(evt)             // Used to id slider to be moved by row and col.
    { 
    x=evt.clientX
    y=evt.clientY
    if (x>0    && x<200)  c0=0
    if (x>200  && x<400)  c0=1
    if (x>400  && x<600)  c0=2
    if (x>600  && x<800)  c0=3
    if (x>800  && x<1000) c0=4
    if (x>1000 && x<1200) c0=5
    if (x>1200 && x<1400) c0=6
    
    if (y>0    && y<200)  r0=0
    if (y>200  && y<400)  r0=1
    if (y>400  && y<600)  r0=2
    }
    
    function go(slider_id)       // Manually move slider to empty space
    {
    for(r=0;r<3;r++)
    {
    for(c=0;c<7;c++)
    {
    if(A[c][r]==0)
    {
    c1=c
    r1=r
    xx=c*200
    yy=r*200
    }}}
    
    u = document.getElementById(slider_id)
    u.setAttribute('transform','translate('+xx+' '+yy+')')
    A[c1][r1]=slider_id
    A[c0][r0]=0
    }
    
    ]]></script>
    </svg>
    


  • Same idea, less code!

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <!--
    NOTES on how to run code:
    1. Copy and save code to a text file.
    2. Change extension .txt to .svg (Filename.svg)
    3. Open .svg file in your Vivaldi browser.
    NOTES on game procedure:
    1. OBJECT is to rearrange sliders to spell out a phrase.
    2. Manually click on any slider to move the slider to the empty space.
    NOTES misc:
    1. This code contains no links. 
    -->
    
    <style type='text/css' ><![CDATA[
    text.A {font-size:40px; font-family:arial; font-weight:bold; fill:white; text-anchor:start; }
    text.B {font-size:18px; font-family:arial; font-weight:bold; fill:black; text-anchor:start; }
    ]]></style>
    
    <rect x='50' y='100' width='750' height='50' fill='lightgray' stroke='black' stroke-width='2' />
    
    <script><![CDATA[
    
    text='DWLASOVRIBVIRE'
    T=text.split('')
    TL=T.length                                         // 14
    
    A = new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,0)   // slider ids
    AL=A.length                                         // 15
    
    w=50     // width
    h=50     // height
    r=10     // radius
    y=100
    cz=0     // zero pos
    cs=0     // sid pos   
    sid=0    // slider id
      
    for(i=1;i<TL+1;i++)                                 // Configure 14 text sliders 1-14
    {
    grp = document.createElementNS('http://www.w3.org/2000/svg','g')
    grp.setAttribute('id',i)
    grp.setAttribute('transform','translate('+(i*w)+' '+y+')')
    grp.setAttribute('onclick','go(this.id)')
    
    rec = document.createElementNS('http://www.w3.org/2000/svg','rect')
    rec.setAttribute('x',0)
    rec.setAttribute('y',0)
    rec.setAttribute('rx',r)
    rec.setAttribute('ry',r)
    rec.setAttribute('width',w)
    rec.setAttribute('height',h)
    rec.setAttribute('fill','red')
    rec.setAttribute('stroke','black')
    rec.setAttribute('stroke-width','1')
    grp.appendChild(rec)
    
    tt = document.createTextNode(T[i-1])
    tx = document.createElementNS('http://www.w3.org/2000/svg','text')
    tx.setAttribute('class','A')
    tx.setAttribute('x',9)
    tx.setAttribute('y',34)
    tx.appendChild(tt)
    grp.appendChild(tx)
    
    tt = document.createTextNode(i)
    tx = document.createElementNS('http://www.w3.org/2000/svg','text')
    tx.setAttribute('class','B')
    tx.setAttribute('x',25)
    tx.setAttribute('y',48)
    tx.appendChild(tt)
    grp.appendChild(tx)
    
    document.documentElement.appendChild(grp)
    }
    
    function go(sid)             // Manually move slider ids to empty space
    {
    for(c=0;c<AL;c++)            // Search all positions in array A,
    {
    if(A[c]==0)                  // For zero.
    {
    cz=c                         // Save old position of zero.
    }}
    for(c=0;c<AL;c++)            // Search all positions in array A,
    {
    if(A[c]==sid)                // For id.
    {
    cs=c                         // Save old position of slider_id.
    }}
    xx=cz*w+w
    yy=100
    u = document.getElementById(sid)
    u.setAttribute('transform','translate('+xx+' '+yy+')')
    A[cz]=sid                    // Move id to zero position
    A[cs]=0                      // Move zero to id position
    }
    ]]></script>
    </svg>
    


  • @MoonDawg

    Different idea, short code.

    <svg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <!--
    NOTES on how to run code:
    1. Copy and save code to a text file.
    2. Change extension .txt to .svg (Filename.svg)
    3. Open .svg file in your Vivaldi browser.
    NOTES misc:
    1. This code contains no links or java script.
    2. Short bit of code, fun to watch. 
    -->
    
    <g transform='translate(-350 -90) scale(1.3)'>
    <path id='Path' d='M485,110 L486,163 
             M486,163 A138,138 0 1,0 538,168 
             M538,168 L541,143 
             M541,143 A163,163 0 1,1 458,143 
             M458,143 L460,116 
             M460,116 A188,188 0 1,0 511,112 
             M511,112 L511,187 
             M511,187 A113,113 0 1,1 488,187 
             M488,187 L486,213 
             M486,213 A88,88 0 1,0 511,213 
             M511,213 L511,237 
             M511,237 A63,63 0 1,1 489,237 
             M489,237 L490,263 
             M490,263 A38,38 0 1,0 511,263 
             M511,263 L500,300' fill='none' stroke='lightgray' stroke-width='20' stroke-linejoin='round' stroke-linecap='round' />
    
    <circle cx='0' cy='0' r='10' fill='red' >       
     <animateMotion begin='0s' dur='60s' fill='freeze' repeatCount='1' >        
      <mpath xlink:href='#Path' />
     </animateMotion >   
    </circle >
    <circle cx='0' cy='0' r='10' fill='yellow' >       
     <animateMotion begin='5s' dur='55s' fill='freeze' repeatCount='1' >        
      <mpath xlink:href='#Path' />
     </animateMotion >   
    </circle >
    <circle cx='0' cy='0' r='10' fill='blue' >       
     <animateMotion begin='10s' dur='50s' fill='freeze' repeatCount='1' >        
      <mpath xlink:href='#Path' />
     </animateMotion >   
    </circle >
    <circle cx='0' cy='0' r='10' fill='lime' >       
     <animateMotion begin='15s' dur='45s' fill='freeze' repeatCount='1' >        
      <mpath xlink:href='#Path' />
     </animateMotion >   
    </circle >
    </g>
    </svg>
    
    

    Don't be afraid to change the start time (begin) or duration (dur) or repeatCount in the lines "animateMotion begin='0s' dur='60s' fill='freeze' repeatCount='1' ". Try and add additional colored circles. To change the circle color, change its fill. :art:


  • Vivaldi Translator

    @MoonDawg
    Ha... I like that animated maze.


Log in to reply
 

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