API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 20th, 2012
540
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 16.57 KB | None | 0 0
raw download clone embed print report
  1. <?xml version="1.0" standalone="no"?>
  2. <svg xmlns="http://www.w3.org/2000/svg"
  3.      xmlns:xlink="http://www.w3.org/1999/xlink"
  4.      version="1.1" baseProfile="full" onload="init()" >
  5. <defs>
  6.     <filter id="fDropShadow" x="0" y="0" width="200%" height="200%">
  7.         <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
  8.         <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
  9.         <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
  10.         <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  11.     </filter>
  12.     <g id="tvFace" >
  13.         <path fill="#D8D8D8" stroke="#000000" stroke-miterlimit="10" d="M84,143.689c0,0-23.798,4.178-30.129,27.415   c-5.371,19.711,16.142-19.703,52.334-18.951c36.192,0.75,52.795-3.837,79.795,12.412c27,16.25-1.25-31.103-21.5-27.175   C144.25,141.316,84,143.689,84,143.689z"/>
  14.         <path fill="#D8D8D8" stroke="#000000" stroke-miterlimit="10" d="M45.924,88.232c0,0,9.039,2.68,4.436,14.507   c0,0-19.909,11.993-21.74,35.493l4.168,7l-1.008,8l-4.992-1l1.165-4.833l-3.494,10.333l-7.155-1.541l1.166-4.791l-1.166,2.916   L1,148.815C1,148.815,10.858,90.398,45.924,88.232z"/>
  15.         <path fill="#D8D8D8" stroke="#000000" stroke-miterlimit="10" d="M171,144.44c13.92-8.738,18.036-17.752,18.036-17.752   c1.875-17.125-9.286-76.373-9.286-76.373h-0.322c0,0-41.125-17.041-123.125,6.229L39.949,70.065c0,0-1.95,48.167,11.217,82   C51.167,152.064,116.25,164.814,171,144.44"/>
  16.         <ellipse transform="matrix(-0.1096 -0.994 0.994 -0.1096 -16.5655 157.7639)" stroke="#000000" stroke-miterlimit="10" cx="62.381" cy="86.302" rx="8.624" ry="4.438"/>
  17.         <ellipse transform="matrix(-0.1096 -0.994 0.994 -0.1096 73.8318 225.4342)" stroke="#000000" stroke-miterlimit="10" cx="137.892" cy="79.646" rx="8.624" ry="4.437"/>
  18.         <path stroke="#000000" stroke-miterlimit="10" d="M62.375,109.19c0,0,80.625-6.25,87-11.813c0,0,12.375,33.313,0,35.313   s-80.125,8-80.125,8S87.625,124.19,62.375,109.19z"/>
  19.         <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="62.875,109.601 72.998,121.565 80.098,108.02  "/>
  20.         <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="80.625,108.164 90.748,120.128 97.848,106.583  "/>
  21.         <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="97.635,106.409 108.257,117.932 114.775,104.098  "/>
  22.         <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="115.242,104.431 125.973,115.852 132.359,101.957  "/>
  23.         <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="132.193,101.822 143.497,112.678 149.16,98.473  "/>
  24.         <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M39.848,70.223c0,0,62.673-20.45,124.652-8.992   c0,0,9.095,64.809,9.015,73.159c-0.013,1.329,0.44,8.731-1.359,9.299"/>
  25.         <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="179.75" y1="50.315" x2="164.5" y2="61.232"/>
  26.         <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M128.5,50.315c0,0,6.584-40.583,39.584-48.083   s22.833,21.334,16.333,30.167"/>
  27.         <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="183.751" cy="34.732" r="4.833"/>
  28.         <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M78.167,55.773c0,0,3.5-48.375-29.833-40.708   c0,0-17.167,5.167-23.333,24.5"/>
  29.         <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="25" cy="41.232" r="4.333"/>
  30.         <path fill="#D8D8D8" stroke="#000000" stroke-miterlimit="10" d="M178,72.732c0,0-9.054,2.68-4.443,14.507   c0,0,19.942,11.993,21.776,35.493l-4.176,7l1.01,8l5-1L196,131.898l3.5,10.333l7.167-1.542l-1.167-4.792l1.167,2.917l16.333-5.5   C223,133.315,213.125,74.898,178,72.732z"/>
  31.         <path fill="#F16465" stroke="#000000" stroke-miterlimit="10" d="M120,121.565c0,0-46-5.713-49.664,19.027l43.931-4.11L120,121.565   z"/>
  32.         <path fill="#F16465" stroke="#000000" stroke-miterlimit="10" d="M100.065,137.812c0,0,47.888-4.708,49.31-5.122   c0,0,1.545-0.218,3.929-2.641c0,0,1.143-2.052,1.338-4.017c0,0,0.293-3.824,0.171-5.409c-0.123-1.585-0.342-3.455-0.342-3.455   l-0.466-2.946c0,0-45.379-3.208-53.004,18.842"/>
  33.         <ellipse transform="matrix(-0.3957 0.9184 -0.9184 -0.3957 213.9308 57.6762)" stroke="#000000" stroke-miterlimit="10" cx="87.99" cy="99.219" rx="2.451" ry="0.625"/>
  34.         <ellipse transform="matrix(0.5446 0.8387 -0.8387 0.5446 130.1501 -45.7421)" stroke="#000000" stroke-miterlimit="10" cx="107.194" cy="96.97" rx="2.451" ry="0.625"/>
  35.     </g>
  36.     <g id='buttons'>
  37.         <rect id="xkcd" x='0px' y='0px' width='200px' height='50px' fill='#AAAAAA' stroke='#D8D8D8' stroke-width='2px' >
  38.             <animate attributeName='fill' from='#ffffff' to='#cccccc' dur='0.3s' begin='xkcd.mouseover' fill='freeze'/>
  39.             <animate attributeName='fill' from='#cccccc' to='#aaaaaa' dur='0.3s' begin='xkcd.mouseout' fill='freeze'/>
  40.         </rect>
  41.         <a target="_blank" xlink:href="http://www.xkcd.com" >
  42.             <text x="60px" y="32px" font-size='25'>
  43.                 XKCD
  44.             </text>
  45.         </a>
  46.        
  47.         <rect id='moarCircles' x='400px' y='0px' width='200px' height='50px' fill='#aaaaaa' stroke='#D8D8D8' stroke-width='2px' onclick='circleGenerator(1)'>
  48.             <animate attributeName='fill' from='#ffffff' to='#cccccc' dur='0.3s' begin='moarCircles.mouseover' fill='freeze'/>
  49.             <animate attributeName='fill' from='#cccccc' to='#aaaaaa' dur='0.3s' begin='moarCircles.mouseout' fill='freeze'/>
  50.         </rect>
  51.         <text x="410px" y="32px" font-size='25' onclick='circleGenerator(1)'>
  52.             Click for circles!
  53.         </text>
  54.     </g>
  55.     <style type="text/css">
  56.         <![CDATA[
  57.             text{
  58.                 fill:black;
  59.                 font-family:sans-serif;
  60.             }
  61.             #tvFace{
  62.                 overflow:visible;
  63.             }
  64.         ]]>
  65.     </style>
  66. </defs>
  67.  
  68. <script type="text/javascript">
  69.  
  70.             <![CDATA[
  71.            var svgns="http://www.w3.org/2000/svg";
  72.            var xlinkns="http://www.w3.org/1999/xlink";
  73.            function softColorGen(){
  74.                var rgbArray=new Array();
  75.                for(j=0;j<3;j++){
  76.                    rgbArray[j]=Math.ceil(Math.random()*85)+170;
  77.                }
  78.                return 'rgb('+rgbArray.toString()+')';
  79.            }
  80.            function circleCreator(numOfCircles){
  81.                var cirArry = new Array();
  82.                for(i=0;i<numOfCircles;i++){
  83.                    var whichSide=Math.round(Math.random());
  84.                    var cirEle = document.createElementNS(svgns,'circle');
  85.                    var randRad = (Math.random()*90)+10;
  86.                    cirEle.setAttributeNS(null,'r',randRad+'px');
  87.                    if(whichSide==0){
  88.                        cirEle.setAttributeNS(null,'cx','0%');
  89.                    }else{
  90.                        cirEle.setAttributeNS(null,'cx','100%');
  91.                    }
  92.                    cirEle.setAttributeNS(null,'cy',Math.random()*100+'%');
  93.                    cirEle.setAttributeNS(null,'fill','none');
  94.                    cirEle.setAttributeNS(null,'stroke',softColorGen()+'');
  95.                    cirEle.setAttributeNS(null,'stroke-width',Math.random()*10+5);
  96.                    var animEle = document.createElementNS(svgns,'animate');
  97.                    animEle.setAttributeNS(null,'attributeName','cx');
  98.                    if(whichSide == 0){
  99.                        animEle.setAttributeNS(null,'from','-'+randRad+20+'px');
  100.                        animEle.setAttributeNS(null,'to','110%');
  101.                    }else{
  102.                        animEle.setAttributeNS(null,'from','110%');
  103.                        animEle.setAttributeNS(null,'to','-'+randRad+20+'px');
  104.                    }
  105.                    animEle.setAttributeNS(null,'dur',Math.random()*17+3+'s');
  106.                    animEle.setAttributeNS(null,'repeatCount','indefinite');
  107.                    animEle.setAttributeNS(null,'begin','indefinite');
  108.                    cirEle.appendChild(animEle);
  109.                    var defsEle = document.createElementNS(svgns,'defs');
  110.                    var filterEle = document.createElementNS(svgns,'filter');
  111.                    filterEle.setAttributeNS(null,'id','filter'+i);
  112.                    filterEle.setAttributeNS(null,'x','-75%');
  113.                    filterEle.setAttributeNS(null,'y','-75%');
  114.                    filterEle.setAttributeNS(null,'width','400%');
  115.                    filterEle.setAttributeNS(null,'height','400%');
  116.                    var fgbEle=document.createElementNS(svgns,'feGaussianBlur');
  117.                    fgbEle.setAttributeNS(null,'in','SourceGraphic');
  118.                    fgbEle.setAttributeNS(null,'stdDeviation','' + Math.floor(((randRad*(-1.0)+100)/10.0)));
  119.                    filterEle.appendChild(fgbEle);
  120.                    defsEle.appendChild(filterEle);
  121.                    document.getElementsByTagName('svg')[0].appendChild(defsEle);
  122.                    cirEle.setAttributeNS(null,'filter','url(#filter'+i+')');
  123.                    cirArry[i]=cirEle;
  124.                }
  125.                return cirArry;
  126.            }
  127.            function circleGenerator(numOfCircles){
  128.                var cirArray = new Array();
  129.                cirArray = circleCreator(numOfCircles);
  130.                var swapOccurred;
  131.                do{
  132.                    swapOccurred=false;
  133.                    for(i=0;i<cirArray.length-1;i++){
  134.                        var cur=parseFloat(cirArray[i].r.baseVal.value);
  135.                        var next=parseFloat(cirArray[i+1].r.baseVal.value);
  136.                        if(cur>next){
  137.                            var cirEleTemp = cirArray[i];
  138.                            cirArray[i]=cirArray[i+1];
  139.                            cirArray[i+1]=cirEleTemp;
  140.                            swapOccurred=true;
  141.                        }
  142.                    }
  143.                }while(swapOccurred);
  144.                for(i=0;i<cirArray.length;i++){
  145.                    document.getElementsByTagName('svg')[0].appendChild(cirArray[i]);
  146.                    var lastAnim=document.getElementsByTagName('animate').length-1;
  147.                    console.log(document.getElementsByTagName('animate')[lastAnim]);
  148.                    document.getElementsByTagName('animate')[lastAnim].beginElement();
  149.                }
  150.            }
  151.            function makeContent(){
  152.                var useEle = document.createElementNS(svgns,'use');
  153.                useEle.setAttributeNS(null,'x','200');
  154.                useEle.setAttributeNS(null,'y','200');
  155.                useEle.setAttribute('xlink:href','#tvFace');
  156.                document.getElementsByTagName('svg')[0].appendChild(useEle);
  157.                
  158.            }
  159.            function generatePage(){
  160.                 circleGenerator(7);
  161.                 //creates rect for the content to be placed on and a dropshadow is applied.
  162.                 var rect1Ele = document.createElementNS(svgns,'rect');
  163.                 rect1Ele.setAttributeNS(null,'x','10%');
  164.                 rect1Ele.setAttributeNS(null,'y','10%');
  165.                 rect1Ele.setAttributeNS(null,'rx','20');
  166.                 rect1Ele.setAttributeNS(null,'ry','20');
  167.                 rect1Ele.setAttributeNS(null,'width','80%');
  168.                 rect1Ele.setAttributeNS(null,'height','80%');
  169.                 rect1Ele.setAttributeNS(null,'fill','white');
  170.                 rect1Ele.setAttributeNS(null,'stroke-width','2px');
  171.                 rect1Ele.setAttributeNS(null,'filter','url(#fDropShadow)');
  172.                 document.getElementsByTagName('svg')[0].appendChild(rect1Ele);
  173.                 //another rectangle identical to the first is made but without a dropdshadow. this was done due to rendering issues with the dropshadow.
  174.                 var rect2Ele = document.createElementNS(svgns,'rect');
  175.                 rect2Ele.setAttributeNS(null,'x','10%');
  176.                 rect2Ele.setAttributeNS(null,'y','10%');
  177.                 rect2Ele.setAttributeNS(null,'rx','20');
  178.                 rect2Ele.setAttributeNS(null,'ry','20');
  179.                 rect2Ele.setAttributeNS(null,'width','80%');
  180.                 rect2Ele.setAttributeNS(null,'height','80%');
  181.                 rect2Ele.setAttributeNS(null,'fill','white');
  182.                 rect2Ele.setAttributeNS(null,'stroke-width','2px');
  183.                 rect2Ele.setAttributeNS(null,'stroke','#d8d8d8');
  184.                 document.getElementsByTagName('svg')[0].appendChild(rect2Ele);
  185.                 //creates <text>s
  186.                 var text1Ele = document.createElementNS(svgns,'text')
  187.                 text1Ele.setAttributeNS(null,'x','40%');
  188.                 text1Ele.setAttributeNS(null,'y','20%');
  189.                 text1Ele.setAttributeNS(null,'width','60%');
  190.                 text1Ele.setAttributeNS(null,'font-size','25');
  191.                 var textNode1 = document.createTextNode("This Could Have Been an Interesting Title");
  192.                 text1Ele.appendChild(textNode1);
  193.                 document.getElementsByTagName('svg')[0].appendChild(text1Ele);
  194.                 var rect3Ele = document.createElementNS(svgns,'rect');
  195.                 rect3Ele.setAttributeNS(null,'x','10%');
  196.                 rect3Ele.setAttributeNS(null,'y','30%');
  197.                 rect3Ele.setAttributeNS(null,'width','80%');
  198.                 rect3Ele.setAttributeNS(null,'height','10%');
  199.                 rect3Ele.setAttributeNS(null,'fill','white');
  200.                 rect3Ele.setAttributeNS(null,'stroke-width','2px');
  201.                 rect3Ele.setAttributeNS(null,'stroke','#d8d8d8');
  202.                 document.getElementsByTagName('svg')[0].appendChild(rect3Ele);
  203.                 var svg2Ele = document.createElementNS(svgns, 'svg');
  204.                 //<svg xmlns="http://www.w3.org/2000/svg" reserveAspectRatio="xMidYMid meet" viewBox="0 0 402 52" width="100%" height="10%">
  205.                 //svg2Ele.setAttributeNS(null,'reserveAspectRatio','xMidYMax meet');
  206.                 svg2Ele.setAttributeNS(null,'viewBox','0 0 602 52');
  207.                 svg2Ele.setAttributeNS(null,'width','80%');
  208.                 svg2Ele.setAttributeNS(null,'height','10%');
  209.                 svg2Ele.setAttributeNS(null,'y','30%');
  210.                 svg2Ele.setAttributeNS(null,'x','10%')
  211.                 var use1Ele = document.createElementNS(svgns,'use');
  212.                 use1Ele.setAttributeNS(null,'x','0');
  213.                 use1Ele.setAttributeNS(null,'y','0');
  214.                 use1Ele.setAttributeNS(xlinkns,'xlink:href','#buttons');
  215.                 svg2Ele.appendChild(use1Ele);
  216.                 document.getElementsByTagName('svg')[0].appendChild(svg2Ele);
  217.                 var switchEle = document.createElementNS(svgns,'switch');
  218.                 var forObjEle = document.createElementNS(svgns,'foreignObject');
  219.                 forObjEle.setAttributeNS(null,'x','20%');
  220.                 forObjEle.setAttributeNS(null,'y','50%');
  221.                 forObjEle.setAttributeNS(null,'width','60%');
  222.                
  223.                 forObjEle.setAttributeNS(null,'height','30%');
  224.                 var bodyEle = document.createElementNS(svgns,'body');
  225.                 bodyEle.setAttributeNS(null,'xmlns','http://www.w3.org/1999/xhtml');
  226.                 var divEle = document.createElementNS(svgns,'div');
  227.                 var text2Ele = document.createTextNode("I couldn't really think of actual content so I decided to focus on learning some things about SVG and getting some experience with it.");
  228.                 divEle.appendChild(text2Ele);
  229.                 bodyEle.appendChild(divEle);
  230.                 forObjEle.appendChild(bodyEle);
  231.                 document.getElementsByTagName('svg')[0].appendChild(forObjEle);
  232.                 document.getElementsByTagName('foreignObject')[0].removeAttributeNS(null,'xmlns');
  233.                 //the tv creature is displayed
  234.                 var svgEle=document.createElementNS(svgns,'svg');
  235.                 svgEle.setAttributeNS(null,'reserveAspectRatio','xMaxYMin meet');
  236.                 svgEle.setAttributeNS(null,'viewBox','0 0 224 197');
  237.                 svgEle.setAttributeNS(null,'x','80%');
  238.                 svgEle.setAttributeNS(null,'y','11%');
  239.                 svgEle.setAttributeNS(null,'width','10%');
  240.                 svgEle.setAttributeNS(null,'height','20%');
  241.                
  242.                
  243.                 var use2Ele = document.createElementNS(svgns,'use');
  244.                 use2Ele.setAttributeNS(null,'x','0');
  245.                 use2Ele.setAttributeNS(null,'y','0');
  246.                 use2Ele.setAttributeNS(xlinkns,'xlink:href','#tvFace');
  247.                 svgEle.appendChild(use2Ele);
  248.                 document.getElementsByTagName('svg')[0].appendChild(svgEle);
  249.            }
  250.            function init(){
  251.                generatePage();
  252.            }
  253.     ]]>
  254.     </script>
  255. </svg>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!