Follow the lines

Developer
Aitor
Size
2,645 Kb
Views
26,312
  1. Follow the lines Previews
  2. Follow the lines HTML Codes
  3. Follow the lines JS Codes

How do I make an follow the lines?

What is a follow the lines? How do you make a follow the lines? This script and codes were developed by Aitor on 16 September 2022, Friday.

Follow the lines Previews
IQ Test

Follow the lines - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Follow the lines</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<canvas width="640" height="640"></canvas> <script src="js/index.js"></script>
</body>
</html>

Follow the lines - Script Codes JS Codes

"use strict";
var canvas = document.querySelector("canvas"), context = canvas.getContext("2d");
var arcs = [0, 500, 100, 50, 300], arca = [0, 0, 0, 0, 0];
function render() { var cx = canvas.width * 0.5, cy = canvas.height * 0.5, LINES = 360; context.fillStyle = "rgba(0,0,0,0.1)"; context.fillRect(0, 0, canvas.width, canvas.height); for (var index = 0; index < LINES; index++) { var angle = Math.random() * Math.PI * 2; context.beginPath(); context.moveTo(cx, cy); context.lineTo(cx + Math.cos(angle) * Math.max(canvas.width, canvas.height), cy + Math.sin(angle) * Math.max(canvas.width, canvas.height)); context.strokeStyle = "rgba(255,255,255,0.5)"; context.stroke(); } for (var index = 0; index < arcs.length; index++) { arca[index] = (arca[index] += 0.1) % 20; arcs[index] = arcs[index] + arca[index]; if (arcs[index] > Math.max(canvas.width, canvas.height)) { arca[index] = 0; arcs[index] = 0; } context.beginPath(); context.arc(cx, cy, arcs[index], 0, Math.PI * 2); context.stroke(); } window.requestAnimationFrame(render);
}
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize);
render();
resize();
Follow the lines - Script Codes
Follow the lines - Script Codes
Home Page Home
Developer Aitor
Username AzazelN28
Uploaded September 16, 2022
Rating 3.5
Size 2,645 Kb
Views 26,312
Do you need developer help for Follow the lines?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aitor (AzazelN28) Script Codes
Name
Date Input
Countdown
Superformula
Asteroids
Dancing Text
AudioContext Concept
Loader
Clock
Romboids
Physics 101
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!