Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
SVG sine wave
<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>
@dalisoft

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?

https://bl.ocks.org/olizilla/4240271

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.