Javascript and SVG Animation gr. color by SOFTWARE RVG

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="Software RVG HTML Editor (www.software-rv.com)"> <meta name="dcterms.created" content="sรก., 30 abr. 2016 17:56:54 GMT"> <meta name="description" content="javascript_wave_colors_developed_by_SoftwareRVG"> <meta name="keywords" content="javascript,colors,3d,develop`ment,Software,RVG"> <title>JAVASCRIPT WAVE COLORS </title> <style type="text/css"> <!-- body { color:#000000; background-color:#FFFFFF; background-image:url('https://ciencias6tocca2015.files.wordpress.com/2015/08/atomo.gif'); background-repeat:repeat; } a { color:#0000FF; } a:visited { color:#800080; } a:hover { color:#008000; } a:active { color:#FF0000; } --> </style> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body itemscope itemtype="http://schema.org/CreativeWork"> <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="google" value="notranslate"> <title>CodePen - orb</title> <style> <style> * { margin: 0; padding: 0; border: 0; background: #000 } canvas { position: relative; top:50%; left:50%; margin-left:-50vmin; width:100vmin; height:100vmin; overflow:hidden; } </style> </style> </head> <body> <canvas ></canvas> <script> <style> * { margin: 0; padding: 0; border: 0; background: #000 } canvas { position: relative; top:50%; left:50%; margin-left:-50vmin; width:100vmin; height:100vmin; overflow:hidden; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body> <canvas width="400" height="400"></canvas> <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script> <script> var canvas,ctx,max,p,count; window.onload=function(){ var a,b,r; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); max=80; count=150; p=[]; r=0; for(a=0;a<max;a++){ p.push([Math.cos(r),Math.sin(r),0]); r+=Math.PI*2/max; } for(a=0;a<max;a++)p.push([0,p[a][0],p[a][1]]); for(a=0;a<max;a++)p.push([p[a][1],0,p[a][0]]); rus(); }; function rus(){ var a,b,c,d,e,s,tim,p2,xp,yp,xp2,yp2,x,y,z,x1,y1,z1; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle="rgba(0,0,0,0.03)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; tim=count/5; for(e=0;e<3;e++){ tim*=1.7; s=1-e/3; a=tim/59; yp=Math.cos(a); yp2=Math.sin(a); a=tim/23; xp=Math.cos(a); xp2=Math.sin(a); p2=[]; for(a=0;a<p.length;a++){ x=p[a][0];y=p[a][1];z=p[a][2]; y1=y*yp+z*yp2; z1=y*yp2-z*yp; x1=x*xp+z1*xp2; z=x*xp2-z1*xp; z1=Math.pow(2,z*s); x=x1*z1; y=y1*z1; p2.push([x,y,z]); } s*=120; for(d=0;d<3;d++){ for(a=0;a<max;a++){ b=p2[d*max+a]; c=p2[((a+1)%max)+d*max]; ctx.beginPath(); ctx.strokeStyle="hsla("+((a/max*360)|0)+",70%,60%,0.15)"; ctx.lineWidth=Math.pow(6,b[2]); ctx.lineTo(b[0]*s+200,b[1]*s+200); ctx.lineTo(c[0]*s+200,c[1]*s+200); ctx.stroke(); } } } count++; requestAnimationFrame(rus); } </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> <style> /* Main styles */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:800); .text { fill: url(#gr-radial); } /* Other styles */ html, body { height: 100%; }body{background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%); body header { background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%); background: #222 linear-gradient(90deg, #222 50%, #272727 50%); background-size: .2em 100%; font: 0.1em/0 Open Sans, Impact; text-transform: uppercase; margin: 0; } body footer { background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%); background: #222 linear-gradient(90deg, #222 50%, #272727 50%); background-size: .2em 100%; font: 2.1em/1 Open Sans, Impact; text-transform: uppercase; margin: 0; } svg { position: absolute; width: 100%; height: 100%; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body> <footer> <svg viewBox="0 0 600 300"> <!-- Gradient --> <radialGradient id="gr-radial" cx=50%" cy="100%" r="70%" > <!-- Animation for radius of gradient --> <animate attributeName="r" values="0%;150%;100%;0%" dur="5s" repeatCount="indefinite" /> <!-- Animation for colors of stop-color --> <stop stop-color="#FFFf00" offset="2"> <animate attributeName="stop-color" values="#0000FF;#ffff00;#00FF00;#FF0000;#00FF00;#0000FF;#FFFF00;#00FF00;#FF0000;#0000FF;#FFFF00;#FF0000" dur="20s" repeatCount="indefinite" /> </stop> <stop stop-color="rgba(55,55,55,0)" offset="100%"/> </radialGradient> <!-- Text --> <text text-anchor="middle" x="50%" y="25%" dy=".35em" class="text" > SOFTWARE RVG </text> </footer> </svg> </script> <svg viewBox="0 0 600 300"> <!-- Gradient --> <radialGradient id="gr-radial" cx=50%" cy="100%" r="70%" > <!-- Animation for radius of gradient --> <animate attributeName="r" values="0%;150%;100%;0%" dur="5s" repeatCount="indefinite" /> <!-- Animation for colors of stop-color --> <stop stop-color="#FFFf00" offset="2"> <animate attributeName="stop-color" values="#0000FF;#ffff00;#00FF00;#FF0000;#00FF00;#0000FF;#FFFF00;#00FF00;#FF0000;#0000FF;#FFFF00;#FF0000" dur="20s" repeatCount="indefinite" /> </stop> <stop stop-color="rgba(55,55,55,0)" offset="100%"/> </radialGradient> <!-- Text --> <text text-anchor="middle" x="50%" y="35%" dy=".40em" class="text" > DESIGNS SOLUTIONS </text> </footer> </svg> </script> </body> </html> </body> </html>
Javascript development animation on stages with time of ejecution movement colors opening and closing a circle gradiant colors. Added as footer an SVG animation gradiant colors with a gif image as background added , all developed as a set for Rober Villar from SOFTWARE RVG

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.