Created
December 8, 2012 13:25
-
-
Save olizilla/4240271 to your computer and use it in GitHub Desktop.
SVG sine wave
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body{ | |
| margin:0; | |
| background: #222; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg id='svg' width="100%" height="300" xmlns="http://www.w3.org/2000/svg"> | |
| </svg> | |
| <input id="a" type="range" value="8" min='1' max="20" step="1"> | |
| <input id="b" type="range" value="100" min='40' max="140" step="10"> | |
| <input id="c" type="range" value="4" min='1' max="20" step="0.5"> | |
| <script> | |
| var svg = document.getElementById('svg'); | |
| var svgns = svg.getAttribute('xmlns'); | |
| var height = svg.getAttribute('height'); | |
| function drawPoint(a, b, color){ | |
| var x = (a * val('a')) % window.innerWidth; | |
| var y = (height / 2) + Math.sin(b / 8 ) * val('b'); | |
| var r = val('c') * (Math.random() * Math.random()); | |
| var circle = document.createElementNS(svgns, 'circle'); | |
| circle.setAttribute('cx', x); | |
| circle.setAttribute('cy', y); | |
| circle.setAttribute('r', r); | |
| circle.setAttribute('fill', color); | |
| svg.appendChild(circle); | |
| } | |
| function removePoints(num){ | |
| var points = document.getElementsByTagName('circle'); | |
| for (var i=0; i < num && i < points.length; i++){ | |
| var point = points[i]; | |
| svg.removeChild(point) | |
| } | |
| } | |
| function val(id){ | |
| var node = document.getElementById(id); | |
| return parseInt(node.value); | |
| } | |
| var count = 1; | |
| setInterval(function(){ | |
| drawPoint(count, count, 'lime'); | |
| drawPoint(count, count -10, 'red' ); | |
| if (count > 150){ | |
| removePoints(2) | |
| } | |
| count ++ | |
| }, 20) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @olizilla.
Can you help me to make this not dot lined, a curved sinewave animation. Is this possible? You no added license, so i should contact to you?
https://bl.ocks.org/olizilla/4240271