SHARE CODE



  • UPDATED July 18, 2017
    This is the place where you can share code. Initially it was SVG code. But what is that? No body seems to use it any more, since it can now be embedded in HTML5 which also has CANVAS. So you might see HTML5 code posted here. Also now Java Script is popular, so you will see how to implement that also. Have any questions, post them here. :grinning:

    EDIT October 31, 2017
    Start out with small snippets of code. Use Basic or SVG or C or HTML. SVG or HTML doesn't cost and doesn't need a compiler and doesn't need its own dashboard (workspace). Any browser will do. Take these code samples and add and subtract values to get the effect of what the code does. SVG uses < T E X T > to write stuff. Not all that great; but still, you can print "Hello World." Better yet, use HTML5 code. You'll be making your own webpages before you blink an eye 3 times. Any problems, give me a holler. Good Luck!



  • This post is deleted!


  • This post is deleted!


  • This post is deleted!


  • Don't use BBCode here.
    Use Markdown! Read http://commonmark.org/help/



  • Use 3 backticks on a single line to start and end a code block.
    It works as you can see!

    <!DOCTYPE html>
    <html lang="en-GB">
    <head>
    	<title>Share Code | Vivaldi Forum</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta name="content-type" content="text/html; charset=UTF-8" />
    	<meta name="apple-mobile-web-app-capable" content="yes" />
    	<meta name="mobile-web-app-capable" content="yes" />
    	<meta property="og:site_name" content="Vivaldi Forum" />
    	<meta name="keywords" />
    	<meta name="msapplication-badge" content="frequency=30; polling-uri=https://forum.vivaldi.net/sitemap.xml" />
    	<meta name="msapplication-square150x150logo" content="/uploads/system/site-logo.png" />
    	<meta name="title" content="Share Code" />
    	<meta name="description" />
    	<meta property="og:title" content="Share Code" />
    	<meta property="og:description" />
    	<meta property="og:type" content="article" />
    	<meta property="og:url" content="https://forum.vivaldi.net/topic/544/share-code/2" />
    	<meta property="og:image" content="https://login.vivaldi.net/profile/avatar/MoonDawg/fb08d62df85e05bbe4239f1e4cc9c5ce_square.png" />
    	<meta property="og:image:url" content="https://login.vivaldi.net/profile/avatar/MoonDawg/fb08d62df85e05bbe4239f1e4cc9c5ce_square.png" />
    	<meta property="article:published_time" content="2014-09-01T19:25:26.000Z" />
    	<meta property="article:modified_time" content="2017-02-13T09:04:38.232Z" />
    	<meta property="article:section" content="Chit-Chat" />
    	<link rel="stylesheet" type="text/css" href="/stylesheet.css?v=9c7e47a2-e3c3-44d2-9ceb-880ec592e290" />
    	
    	<link rel="icon" type="image/x-icon" href="/favicon.ico?v=9c7e47a2-e3c3-44d2-9ceb-880ec592e290" />
    	<link rel="manifest" href="/manifest.json" />
    	<link rel="apple-touch-icon" href="/apple-touch-icon" />
    	<link rel="icon" sizes="36x36" href="/uploads/system/touchicon-36.png" />
    	<link rel="icon" sizes="48x48" href="/uploads/system/touchicon-48.png" />
    	<link rel="icon" sizes="72x72" href="/uploads/system/touchicon-72.png" />
    	<link rel="icon" sizes="96x96" href="/uploads/system/touchicon-96.png" />
    	<link rel="icon" sizes="144x144" href="/uploads/system/touchicon-144.png" />
    	<link rel="icon" sizes="192x192" href="/uploads/system/touchicon-192.png" />
    


  • This post is deleted!


  • @MoonDawg

    <!doctype html><title>Vivaldi - V</title><meta charset=utf-8>
    <html><body>
    
    <h1>DRAW ME, VIVALDI - V</h1>
    <h2>You can change 6 fill colors and/or 1 stroke color to your favorite color(s).</h2>
    <h2>You can make all colors the same or different.</h2>
    <h2>Just copy and save code as V.html in a text editor to make changes.</h2>
    <h2>Then open html file in any browser.</h2>
    
    <svg width='600' height='600' >
    <!-- Left Rectangle - Wide -->
    <path d='M 190 145 97 200 261 485 354 431'  fill='red' />
    <!-- Right Rectangle - Thin -->
    <path d='M 354 484 519 197 482 179 318 463' fill='red' /> 
    <!-- Just a Patch -->
    <path d='M 270 340 400 340 335 470'         fill='red' />
    <!-- Collar - Leave fill 'none' -->
    <path d='M 436.25 180 A50 50 0 0,1 250 288' fill='none' stroke='red' stroke-width='38' />
    <!-- Top Left Circle-->
    <circle cx='143' cy='172' r='54' fill='blue' />
    <!-- Top Right Circle -->
    <circle cx='471' cy='172' r='54' fill='blue' />
    <!-- Bottom Center Circle-->
    <circle cx='307' cy='456' r='54' fill='blue' />                                   
    </svg></body></html>
    


  • This post is deleted!


  • This post is deleted!



  • Moderator

    @MoonDawg - Unfortunately, that would require giving everyone time-unlimited edit powers, which the community devs have decided against at this point.



  • Here is the HTML code of the 'Fractal' image in 'Art Gallery' that I wish to share with you.

    <!DOCTYPE html><html lang='en'><head><meta charset='utf-8'><title>Fractal</title>
    
    <!--
    NOTES on how to set up code:
    1. Copy and save code in a text file.
    2. Change text file extension from .txt to .html (html_name.html) 
    3. Open html_name.html file in your Vivaldi browser.
    -->
    
    <style>
    canvas   { background:#fff; display:inline; }
    body     { width:800px; }
    </style>
    </head>
    
    <body><canvas id='C1' width='500' height='500'></canvas></body>
    
    <script>
    w       = 500             // Canvas width
    h       = 500             // Canvas height
    x       = 0               // Starting x point of image
    y       = 0               // Starting y point of image
    
    context = document.getElementById('C1').getContext('2d')    // Get canvas
    imgd    = context.createImageData(w,h)                      // Create an ImageData object.
    pix     = imgd.data
    n       = pix.length                                        // n = w*h*4
    
    A       = new Array(3)
    colors  = new Array('00 00 00','FF FF FF','00 FF FF','00 00 FF','8A 2B E2','5F 9E A0','64 95 ED','00 FF FF','00 00 8B','00 8B 8B','48 3D 8B','00 CE D1','00 BF FF','1E 90 FF','AD D8 E6','E0 FF FF','87 CE FA','B0 C4 DE','00 00 CD','7B 68 EE','48 D1 CC','19 19 70','00 00 80','AF EE EE','B0 E0 E6','41 69 E1','87 CE EB','6A 5A CD','46 82 B4','40 E0 D0')
    num     = colors.length
    
    max_iteration = 200
    
    for(c=0;c<w;c++)          // Column
    { 
    for(r=0;r<h;r++)          // Row 
    {
    i = (w*r*4)+(c*4)         // One pixel at a time
    
    // Try these first
    x1 = 0
    y1 = 0
    x0 = c*.008-2             
    y0 = r*.008-2
    
    // Try these second
    //x1 = 0
    //y1 = 0
    //x0 = c*.001
    //y0 = r*.001
    
    // Try these third
    //x1 = c*.008-2
    //y1 = r*.008-2
    //x0 = -1
    //y0 = 0
    
    // Try these fourth
    //x1 = c*.001
    //y1 = r*.001
    //x0 = -1
    //y0 = 0
    
    iteration = 0
    
    // Mandelbrot Set
    // --------------
    // f(z) = z^2 + c where z is a complex number a+bi
    //
    // (a+bi)^2 + c = a^2+2abi-b^2 + c  =  a^2-b^2+c  +  2abi+c
    //                                    -----------   -----------
    //                                    x component   i component
    
    while ( (x1*x1 + y1*y1) <= (2*2)  &&  iteration < max_iteration )
    {                              
    xtemp = x1*x1 - y1*y1 + x0           // x component    
    y1 = 2*x1*y1 + y0                    // i component
    x1 = xtemp                     
    iteration++
    }
    
    col = Math.round( iteration % num )
    if ( iteration == max_iteration ) color = colors[0]
    else color = colors[col]
    
    A        = color.split(' ')
    pix[i+0] = parseInt(A[0],16);         // the red channel
    pix[i+1] = parseInt(A[1],16);         // the green channel
    pix[i+2] = parseInt(A[2],16);         // the blue channel
    pix[i+3] = 255;                       // the alpha channel
    }}
    
    context.putImageData(imgd, x, y)      // Draw the ImageData object starting at the given (x,y) coordinates.
    
    </script>
    </html>
    


  • I used Vivaldi to open this SVG file. Initially, it shows a blue blank page.
    SO RELOAD the page inorder to show the image. NOW, RELOAD AGAIN TO GET THE NEXT RANDOM IMAGE.

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    
    <rect x='0' y='0' width='100%' height='100%' fill='cornflowerblue' opacity='.5' />
    
    <!--
    NOTE: 
    I used Vivaldi to open this SVG file. Initially, it shows a blue blank page. 
    SO RELOAD the page inorder to show the image. NOW, RELOAD AGAIN TO GET THE NEXT RANDOM IMAGE.
    -->
    
    <script><![CDATA[
    
    colors='red blue green yellow'
    color=colors.split(' ')
    
    numpaths = 4                             // Number of pathways
    numcurvs = 8                             // Number of Q-curves (really 5)
    
    for(i=0;i<numpaths;i++)                  // Build pathways
    {
    str = ''                                 // Fresh start each go round
    
    a = innerWidth                           // Full screen width
    b = innerHeight
    
    x = new Array()
    y = new Array()
    
    p = new Array()
    q = new Array()
    
    m = new Array()
    n = new Array()
    
    for(k=0;k<numcurvs;k++)                  // Build Q-curves strung together. 
    {
    x[k] = Math.floor(Math.random()*a)       // xy array is random
    y[k] = Math.floor(Math.random()*b)
    
    p[k]=x[k]
    q[k]=y[k]
    
    m[k]=(x[k-1]+x[k])/2
    n[k]=(y[k-1]+y[k])/2
    
    if(k>=3)                                 // Don't use k = 0, 1 or  2 because of the use of arrays. See below.
    {
    str = str + ' M' + m[k-2]+' '+n[k-2]+' Q'+p[k-2]+' '+q[k-2]+' '+m[k-1]+' '+n[k-1]
    }}
    
    cur = document.createElementNS('http://www.w3.org/2000/svg','path')
    cur.setAttribute('stroke',color[i%color.length])
    cur.setAttribute('stroke-width',3)
    cur.setAttribute('fill',color[i%color.length])
    cur.setAttribute('opacity',.6)
    cur.setAttribute('d',str)
    document.documentElement.appendChild(cur)
    }
    ]]></script>
    </svg>
    


  • @MoonDawg It always shows blue for me, no amount of reloading seemed to fix it.
    Neverming mistakenly saved it with an html extension, instead of SVG, now it is working.

    Pretty cool, would make a fine always-changing background for a webpage



  • @duarte.framos

    Glad you got it to work. Try increasing the
    numpaths = 4 // Number of pathways
    numcurvs = 8 // Number of Q-curves (really 5)

    You could change the colors around. Here are some extras you can use. Especially if you increase the number of Q-curves.

    hotpink gold cyan purple fuchsia pink cornflower blue

    EDIT

    Try adding this "horrible" filter before the "NOTE"

    <filter id="F1" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%" >
    
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    
    <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
    
          <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                              specularExponent="20" lighting-color="#bbbbbb"  
                              result="specOut">
            <fePointLight x="-5000" y="-10000" z="20000"/>
          </feSpecularLighting>
    
          <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    
          <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                       k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
    
          <feMerge>
            <feMergeNode in="offsetBlur"/>
            <feMergeNode in="litPaint"/>
          </feMerge>
    
    </filter>
    

    Then add cur.setAttribute('filter','url(#F1)') into the 'path' script, which is needed to call the filter.



  • Magic Soccer Ball

    <svg onload='go()' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <g id='Ball' transform='scale(.75)' >
    
    <!-- Base Circle -->
    <circle cx='400' cy='400' r='325' fill='gray' stroke='black' stroke-width='1' />
    
    <!-- Center Pentagon -->
    <polygon id='CP' points='327 500, 473 500, 518 363, 400 278, 283 363' fill='none'
    stroke='black' stroke-width='3' />
    
    <g id='A' >
    <!-- Inner Hexagons -->
    <polygon id='IH' points='327 500, 473 500, 534 581, 469 668, 329 668, 270 584' fill='none' 
    stroke='black' stroke-width='3' />
    
    <!-- Outer Hexagons -->
    <path id='OH' d='M275 700, L329 668, 470 668, 525 700, M525 700 Q400 750, 275 700' fill='none' 
    stroke='black' stroke-width='3' />
    
    <!-- Outer Pentagons -->
    <path id='OP' d='M525 700, L470 668, 535 580, 632.5 550, 646.5 612, M646.5 612 Q596 672, 525 700' fill='none' 
    stroke='black' stroke-width='3' />
    </g>
    
    <use x='0' y='0' xlink:href='#A' transform='rotate(72,400,400) ' />
    <use x='0' y='0' xlink:href='#A' transform='rotate(144,400,400)' />
    <use x='0' y='0' xlink:href='#A' transform='rotate(216,400,400)' />
    <use x='0' y='0' xlink:href='#A' transform='rotate(288,400,400)' />
    </g>
    
    <script><![CDATA[ 
    
    colors = new Array('aqua', 'aquamarine', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dodgerblue', 'firebrick', 'forestgreen', 'fuchsia', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'hotpink', 'indianred', 'indigo', 'lawngreen', 'lime', 'limegreen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'navy', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'peru', 'pink', 'purple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'sienna', 'skyblue', 'slateblue', 'slategray', 'springgreen', 'steelblue', 'teal', 'tomato', 'turquoise', 'violet', 'wheat', 'yellow', 'yellowgreen')
    
    i=0
    function go()
    {
    cp =  document.getElementById('CP')
    cp.setAttribute('fill',colors[Math.floor(Math.random()*colors.length)])
    cp =  document.getElementById('IH')
    cp.setAttribute('fill',colors[Math.floor(Math.random()*colors.length)])
    oh =  document.getElementById('OH')
    oh.setAttribute('fill',colors[Math.floor(Math.random()*colors.length)])
    cp =  document.getElementById('OP')
    cp.setAttribute('fill',colors[Math.floor(Math.random()*colors.length)])
    
    i++
    tout=setTimeout('go()',1000)
    if(i==100)clearTimeout(tout)
    }
    ]]></script>
    </svg>
    


  • Matrix Rain

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <style><![CDATA[ 
     text { cursor:pointer; font-size:30px; font-family:courier new; font-weight:bold; text-anchor:start; word-spacing:0px; 
            letter-spacing:0px; }
    ]]></style>
    
    <rect x='0' y='0' width='100%' height='100%' fill='black' onclick='stop_go()' /> // Background color with stop/go function
    
    <script><![CDATA[
    // width='800' height='2000' // Not used 
    //
    // Discrepancies From Original:
    // 1. No mixing-up of letters as it rains.
    // 2. Only the first letter is white.
    // 3. Only 36 columns and rows are implemented.
    //
    
    lets = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ♥1234567890/?><;{}[]\)(*&^%$#@!♥œ∑®†¥øπ«åß∂ƒ©' // Characters used
    let  = lets.split('')
    x    = 900
    y    = 900
    step = 25
    c    = 0
    k    = 0                                                                         // Number of columns is 36=900/25.
    
    //==========================================================================================================================
    
    for(col=5; col<x; col+=step)                                                     // This part builds the columns of characters
    {
    c++
    grp = document.createElementNS('http://www.w3.org/2000/svg','g')
    grp.setAttribute('id','C'+c)
    //alert(k)
    k=0
    for(row=step; row<y+step; row+=step)                                             // Number of rows is 36=900/36.
    {
    k++
    tt = document.createTextNode(let[Math.floor(Math.random()*let.length)])
    tx = document.createElementNS('http://www.w3.org/2000/svg','text')
    tx.setAttribute('x',col)
    tx.setAttribute('y',row)
    if(k==y/step) tx.setAttribute('fill','white')                                    // Last in, first out
    else tx.setAttribute('fill','lime')
    tx.appendChild(tt)
    grp.appendChild(tx)
    document.documentElement.appendChild(grp)
    }
    
    //==========================================================================================================================
    
    ani = document.createElementNS('http://www.w3.org/2000/svg','animateMotion')     // This part controls the movement
    ani.setAttributeNS('http://www.w3.org/1999/xlink','href','#C'+c)
    ani.setAttribute('path','M0 -800 0 800')
    
    dur=Math.ceil(Math.random()*12)                             
    if(dur>3) ani.setAttribute('dur',dur)
    else {dur=3; ani.setAttribute('dur',dur)}
    //alert(c+'...'+dur)                                                             // Used to check duration per column
    
    beg=Math.ceil(Math.random()*12)
    if(beg>2) ani.setAttribute('begin',beg)
    else {beg=2; ani.setAttribute('begin',beg)}
    ani.setAttribute('begin',0)
    
    ani.setAttribute('repeatCount','indefinite')
    document.documentElement.appendChild(ani)
    
    //==========================================================================================================================
    
    ani = document.createElementNS('http://www.w3.org/2000/svg','animate')           // This part controls the brightness
    ani.setAttributeNS('http://www.w3.org/1999/xlink','href','#C'+c)
    ani.setAttribute('attributeName','opacity')
    ani.setAttribute('values','1;.6;.4;.6;1;')
    ani.setAttribute('dur','7s')
    
    beg=Math.ceil(Math.random()*10)
    if(beg>2) ani.setAttribute('begin',beg)
    else {beg=2; ani.setAttribute('begin',beg)}
    
    ani.setAttribute('repeatCount','indefinite')
    document.documentElement.appendChild(ani)
    }
    
    dog=true
    function stop_go(){
    if(dog){ document.documentElement.pauseAnimations(); dog=false; }
    else { document.documentElement.unpauseAnimations(); dog=true; }}
    
    ]]></script>
    </svg>
    

Log in to reply
 

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