Pretty circle animation

Rotating gradient lines

by rob Davis

HTML

<body>
    <div>
        <canvas id="canvasId" width="500" height="500"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:white;  width:500px; height:500px }

JavaScript

var context = document.getElementById('canvasId').getContext("2d");

var startx = 0;
var starty = 250;
var endx = 0;
var endy = 0;

// Create fill gradient
var gradient = context.createLinearGradient(0,0,250,250);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(1, "#0000ff");
context.strokeStyle=gradient;
context.moveTo(startx,starty);
context.lineWidth = 5;
context.lineJoin = "round";	
context.lineTo(endx,endy);
	
context.moveTo(startx+10,starty+10);	
context.lineTo(endx+10,endy+10);

    var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }

        function drawRandomlyColoredRectangle() {  
            incrementAngle();
            context.save();                
            context.translate(250,250);
            context.rotate(convertToRadians(angle));
var gradient1 = context.createLinearGradient(0,0,250,250);
gradient1.addColorStop(0, "#ff0000");
gradient1.addColorStop(1, "#0000ff");
context.strokeStyle=gradient1;

			context.moveTo(startx,starty);
			context.lineWidth = 1;
			context.lineJoin = "round";	
			context.lineTo(endx,endy);
			context.stroke();
			context.rotate(-convertToRadians(angle));
			context.translate(-250,-250);			
            context.restore();
        }

		drawRandomlyColoredRectangle();
        setInterval(drawRandomlyColoredRectangle, 5);