Skip to content

Instantly share code, notes, and snippets.

@olizilla olizilla/index.html
Created Dec 8, 2012

What would you like to do?
SVG sine wave
<meta charset="utf-8">
background: #222;
<svg id='svg' width="100%" height="300" xmlns="">
<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">
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);
function removePoints(num){
var points = document.getElementsByTagName('circle');
for (var i=0; i < num && i < points.length; i++){
var point = points[i];
function val(id){
var node = document.getElementById(id);
return parseInt(node.value);
var count = 1;
drawPoint(count, count, 'lime');
drawPoint(count, count -10, 'red' );
if (count > 150){
count ++
}, 20)

This comment has been minimized.

Copy link

dalisoft commented Jan 18, 2017

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.