SVG Share Code



  • Re: Share Code

    This is a place to share SVG code.



  • This post is deleted!


  • This post is deleted!


  • 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!

  • Moderator

    @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!


  • Moderator

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


  • Hi-Card Wins

    I watched tutorials on how to build an app – a card game called War. I wanted to load the app on my iPhone but at the end, I realized I couldn’t plus the app didn’t use a full deck of playing cards. So, I made a SVG version which was alot simpler employing Unicode playing cards (& # 127137; to & # 127198;) with Aces at the low end and an extra face card (Cavalier) in a non-depleting deck. Since, the game is not like the real card game, I changed its name to Hi-Card Wins.

    NOTES on how to set up and run code:

    1. Copy and save code in a text file.
    2. Change text file extension from '.txt' to '.svg'.
    3. Open file_name.svg in your Vivaldi browser.
    4. Click on red knob (lower center) to activate.
    <svg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <style type='text/css' ><![CDATA[
    
    text       { font-size:20px; font-family:georgia; font-weight:normal; text-anchor:start; }
    text.score { font-size:100px; font-family:georgia; font-weight:bold; fill:red; text-anchor:middle; 
                 stroke:white; stroke-width:2; }
    
    ]]></style>
    
    <rect x='50' y='20' rx='20' ry='20' width='760' height='760' fill='cornflowerblue' /> <!-- Background -->
    
    <defs><rect id='W1' x='200' y='211' rx='10' ry='10' width='210' height='289' fill='white' /></defs>
    <text class='score' x='0' y='0' transform='translate(305 440) scale(3.25)'> 🂠 </text>
    
    <defs><rect id='W2' x='450' y='211' rx='10' ry='10' width='210' height='289' fill='white' /></defs>
    <text class='score' x='0' y='0' transform='translate(555 440) scale(3.25)'> 🂠 </text>
    
    <text class='score' x='425' y='130' > Hi-Card Wins </text>
    
    <text class='score' x='300' y='600' id='N3' > 0 </text>
    <text class='score' x='550' y='600' id='M3' > 0 </text>
    
    <text class='score' x='300' y='700' id='N4' > 0 </text>
    <text class='score' x='550' y='700' id='M4' > 0 </text>
    
    <circle cx='425' cy='625' r='25' fill='red' stroke='white' stroke-width='4' onclick='go()' /> <!-- Go Button -->
    
    <script><![CDATA[
    
    cards = '🂠 🂡 🂢 🂣 🂤 🂥 🂦 🂧 🂨 🂩 🂪 🂫 🂬 🂭 🂮 🂱 🂲 🂳 🂴 🂵 🂶 🂷 🂸 🂹 🂺 🂻 🂼 🂽 🂾 🃁 🃂 🃃 🃄 🃅 🃆 🃇 🃈 🃉 🃊 🃋 🃌 🃍 🃎 🃑 🃒 🃓 🃔 🃕 🃖 🃗 🃘 🃙 🃚 🃛 🃜 🃝 🃞'
    card = cards.split(' ')
    
    N=M=0
    
    function go(evt) 
    {
    //------------------------------------------------------------------------------
    // Cover left side card for next deal
    
    u = document.createElementNS('http://www.w3.org/2000/svg','use')
    u.setAttribute('x',0)
    u.setAttribute('y',0)
    u.setAttributeNS('http://www.w3.org/1999/xlink','href','#W1')
    document.documentElement.appendChild(u)
    
    //------------------------------------------------------------------------------
    // Deal left side card
    
    do{n = Math.ceil(Math.random()*100)}
    while(n<1 || n>56)                                               // was 14; 14*4=56; 4 extras; ace low card
    
    nd = document.createTextNode(card[n])
    t = document.createElementNS('http://www.w3.org/2000/svg','text')
    t.setAttribute('x',0)
    t.setAttribute('y',0)
    t.setAttribute('font-size',100)
    
    if (n>14 && n<43) t.setAttribute('fill','red')
    else  t.setAttribute('fill','black')
    
    t.setAttribute('transform','translate(180 450) scale(18)')
    t.appendChild(nd)
    document.documentElement.appendChild(t)
    
    //------------------------------------------------------------------------------
    // Cover right side card for next deal
    
    u = document.createElementNS('http://www.w3.org/2000/svg','use')
    u.setAttribute('x',0)
    u.setAttribute('y',0)
    u.setAttributeNS('http://www.w3.org/1999/xlink','href','#W2')
    document.documentElement.appendChild(u)
    
    //------------------------------------------------------------------------------
    // Deal right side card
    
    do{m = Math.ceil(Math.random()*100)}
    while(m<1 || m>56)
    
    nd = document.createTextNode(card[m])
    t = document.createElementNS('http://www.w3.org/2000/svg','text')
    t.setAttribute('x',0)
    t.setAttribute('y',0)
    t.setAttribute('font-size',100)
    
    if (m>14 && m<43) t.setAttribute('fill','red')
    else  t.setAttribute('fill','black')
    
    t.setAttribute('transform','translate(430 450) scale(18)')
    t.appendChild(nd)
    document.documentElement.appendChild(t)
    
    //------------------------------------------------------------------------------
    // Equalize suits - cards have same value
    
    if (n<=14)          { n=n    }
    if (n>14 && n<=28)  { n=n-14 }
    if (n>28 && n<=42)  { n=n-28 }
    if (n>42)           { n=n-42 } 
    
    if (m<=14)          { m=m    }
    if (m>14 && m<=28)  { m=m-14 }
    if (m>28 && m<=42)  { m=m-28 }
    if (m>42)           { m=m-42 }
    
    //------------------------------------------------------------------------------
    // Post winner or draw and show accum scores
    
    if(n>m)
    { 
    document.getElementById("N3").firstChild.nodeValue = 1 
    document.getElementById("M3").firstChild.nodeValue = 0
    N++
    document.getElementById("N4").firstChild.nodeValue = N 
    }
    else if(m>n)
    { 
    document.getElementById("N3").firstChild.nodeValue = 0 
    document.getElementById("M3").firstChild.nodeValue = 1
    M++
    document.getElementById("M4").firstChild.nodeValue = M
    }
    else
    { 
    document.getElementById("N3").firstChild.nodeValue = 0 
    document.getElementById("M3").firstChild.nodeValue = 0
    }
    
    }
    
    ]]></script>
    </svg>
    

    Demo

    https://flic.kr/p/GSSfiM

    Demo



  • @moondawg Works, why is Ace the lowest card though?



  • @luetage
    No special reason. Just move the Ace card to the last per suit.

    cards = '🂠 🂢 🂣 🂤 🂥 🂦 🂧 🂨 🂩 🂪 🂫 🂬 🂭 🂮 🂡 🂲 🂳 🂴 🂵 🂶 🂷 🂸 🂹 🂺 🂻 🂼 🂽 🂾 🂱 🃂 🃃 🃄 🃅 🃆 🃇 🃈 🃉 🃊 🃋 🃌 🃍 🃎 🃁 🃒 🃓 🃔 🃕 🃖 🃗 🃘 🃙 🃚 🃛 🃜 🃝 🃞 🃑'
    


  • Problem: None of the high unicode characters show up in W7, see screenshot
    0_1525352453902_c1f91795-f876-4f08-b99b-ff95d8db6a30.png



  • @quhno You gotta update your unicode. It's an old version.



  • @luetage Sorry, but that answer is not correct in many ways.

    It was no question about how to solve that problem on my side, in fact it was no question at all.
    "Update unicode", which might have been a sloppy attempt to write: "Install fonts that support the glyphs", is no valid solution.
    I only wanted to mention that the combination of default W7 and default Vivaldi has a huge problem with it, nothing else, not even that someone here should fix it. Sorry for being not explicit enough in the previous post.

    Problem
    rant:
    It is a problem of Vivaldi - or, more precise - Chromium in general with font replacement. There are open and confirmed bugs about it since many years in the Chromium bug tracker, but sadly the Chromium authors never bothered to fix their totally broken implementation for W7 and partially for newer Win systems too. They didn't bother while W7 was still the latest MS OS and even now they give a s**t about it, despite W7 is still installed on roughly 40% of all desktop/laptop computers worldwide. No thanks to them.
    /rant

    Explanation

    • The font actually used for the code blocks here on the website is Consolas, the font suggested in the code block is Georgia, which both do not contain the necessary glyphs in the versions that come with W7.
    • If the browser would have worked correctly, it should and would have looked up similar fonts.
    • If it had done that, it would have found DejaVu sans (and some other fonts) on my machine, which contain the necessary glyphs, and it would have inserted the correct symbols, like e.g. Firefox does (but Firefox has a really good font handling since ages. Only old Opera was close to it, the rest of the browsers simply suck at it.)

    Solutions for the problem would have been:

    • provide a custom webfont as fallback (most compatible solution if done right)
    • give a stack of fonts that contain the glyphs ordered by the likelihood of installation on the different operating systems. This goes for the forum page and for the working code. (smallest but not a 100% solution)
    • go full SVG and replace the glyphs with the svg outlines

    I really do not blame MoonDawg or the forum setup for it.
    It is a nice piece of code and does what it should on W10 and some other operating systems (provided the necessary font is installed) and everybody who wants to make it work everywhere should consider one of the above solutions.

    Additionally it is nothing for the Vivaldi Devs to fix - and they would not even need to bother with it, if the Chromium authors had done their homework.



  • So in conclusion: MoonDawg shouldn't fix it, Vivaldi shouldn't fix it, the chromium devs won't care about an operating system that's nearly 9 years old and you don't seem to care enough to implement one of the solutions and post them here. Seems like a dead end to me ^^



  • @luetage Well the chromium authors should care because of 40%, because other browsers can do it, because the newer systems up to W10 still suffer with it, while not in this example but with other code points in the BMP, with regards to x-height, ligatures, font-variant-alternates within the same font (those are W3C specification violations since ages too) etc. pp.
    In simple words: Because the whole font engine it is sloppy coded and partly broken beyond belief.

    (I think we should stop this part of the discussion now before it gets completely OT or move it to a different topic of its own)



  • Try this Anglo Saxon Runes translator. Copy and save. Change extension to .svg and run in your browser. It asks you to enter a phrase. Caps or lower case doesn't matter. Output is
    0_1538937829184_Output.png

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <style type='text/css' ><![CDATA[
    text { font-size:50px; font-family:courier new; font-weight:bold; text-anchor:start; fill:blue; }
    ]]></style>
    
    <text x='10' y='100'> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z </text>
    <text x='10' y='200'> ᚫ ᛒ ᚳ ᛞ ᛠ ᚠ ᚷ ᚺ ᛡ J K ᛚ ᛗ ᛀ ᚩ ᛈ Q ᚱ ᛋ ᛏ ᚢ V ᚹ X ᚣ Z </text>
    
    <script><![CDATA[
    
    a    = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',' ')
    b    = new Array('ᚫ','ᛒ','ᚳ','ᛞ','ᛠ','ᚠ','ᚷ','ᚺ','ᛡ','J','K','ᛚ','ᛗ','ᛀ','ᚩ','ᛈ','Q','ᚱ','ᛋ','ᛏ','ᚢ','V','ᚹ','X','ᚣ','Z',' ')
    word = prompt('PLEASE ENTER PHRASE: ','vivaldi is here to stay')
    word = word.toUpperCase()
    w    = word.split('')
    
    for(k=0;k<w.length;k++) w[k] = word.charAt(k)                        // Put capital word letters into array w
    
    for(i=0;i<w.length;i++)
    {
    for(j=0;j<26;j++)
    {
    if(w[i]==a[j])                                                       // Check each letter in array w against array a
    {
    tt = document.createTextNode(a[j])
    tx = document.createElementNS('http://www.w3.org/2000/svg','text')
    tx.setAttribute('x',10+(i*50))
    tx.setAttribute('y',300)
    tx.appendChild(tt)
    document.documentElement.appendChild(tx)
    
    tt = document.createTextNode(b[j])
    tx = document.createElementNS('http://www.w3.org/2000/svg','text')   // print corresponding rune in array b
    tx.setAttribute('x',10+(i*50))
    tx.setAttribute('y',400)
    tx.appendChild(tt)
    document.documentElement.appendChild(tx)
    }}}
    
    ]]></script>
    </svg>
    

Log in to reply
 

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