Pastel dots net

Developer
Gabi
Size
2,415 Kb
Views
6,072
  1. Pastel dots net Previews
  2. Pastel dots net HTML Codes
  3. Pastel dots net CSS Codes
  4. Pastel dots net JS Codes

How do I make an pastel dots net?

What is a pastel dots net? How do you make a pastel dots net? This script and codes were developed by Gabi on 23 December 2022, Friday.

Pastel dots net Previews
IQ Test

Pastel dots net - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pastel dots net</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Please hover over the canvas</h1>
<canvas id = 'c' width="500" height="500"></canvas> <script src="js/index.js"></script>
</body>
</html>

Pastel dots net - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Gabriela:400normal);
body { margin: 0; overflow: hidden; background: black;
}
h1 { text-align: center; color: white; font-family: 'Gabriela' !important; font-style: normal; font-weight: 400; font-size:30px; margin:1em;
}
canvas { display: block; margin: 0 auto;
}

Pastel dots net - Script Codes JS Codes

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width;
var ch = c.height;
var step = 30;
var dotR = 1;
var T = .01;
var grd = ctx.createLinearGradient(0, 0, c.width, 0);
grd.addColorStop(0, "hsl(300,100%,75%)");
grd.addColorStop("0.3", "hsl(203,100%,75%)");
grd.addColorStop("0.6", "hsl(84,100%,75%)");
grd.addColorStop("0.8", "hsl(60,100%,75%)");
grd.addColorStop(1, "hsl(0,100%,75%)");
ctx.fillStyle = grd;
function DrawCurves() { ctx.beginPath(); for (var l = -cw; l <= 2 * cw; l += step) { /*ctx.moveTo(l,0);// aquí empieza la curva	ctx.quadraticCurveTo(cX,cY,l,ch);	ctx.stroke();*/ for (var t = 0; t <= 1; t += T) { var x = (1 - t) * (1 - t) * l + 2 * (1 - t) * t * cX + t * t * l; var y = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * cY + t * t * ch; ctx.moveTo(x + dotR, y); ctx.arc(x, y, dotR, 0, 2 * Math.PI); } } for (var b = -ch; b <= 2 * ch; b += step) { /*ctx.moveTo(0,b);// aquí empieza la curva	ctx.quadraticCurveTo(cX,cY,cw,0);	ctx.stroke();*/ for (var t1 = 0; t1 <= 1; t1 += T) { var x = (1 - t1) * (1 - t1) * 0 + 2 * (1 - t1) * t1 * cX + t1 * t1 * cw; var y = (1 - t1) * (1 - t1) * b + 2 * (1 - t1) * t1 * cY + t1 * t1 * b; ctx.moveTo(x + dotR, y); ctx.arc(x, y, dotR, 0, 2 * Math.PI); } } ctx.fill();
}
function oMousePos(canvas, evt) { var ClientRect = canvas.getBoundingClientRect(); return { //objeto x: Math.round(evt.clientX - ClientRect.left), y: Math.round(evt.clientY - ClientRect.top) }
}
c.addEventListener("mousemove", function(evt) { ctx.clearRect(0, 0, cw, ch); var mousePos = oMousePos(c, evt); cX = mousePos.x; cY = mousePos.y; DrawCurves();
}, false);
window.addEventListener("load", function(evt) { cX = cw / 2; cY = ch / 2; DrawCurves();
}, false);
c.addEventListener("mouseleave", function(evt) { ctx.clearRect(0, 0, cw, ch); cX = cw / 2; cY = ch / 2; DrawCurves();
}, false);
Pastel dots net - Script Codes
Pastel dots net - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded December 23, 2022
Rating 4
Size 2,415 Kb
Views 6,072
Do you need developer help for Pastel dots net?

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!

Gabi (enxaneta) Script Codes
Name
CSS only star rating
Rift
Broken English
Squiggly lines
Holy Cow Mandala
Sine wave ice cream
Sakura
Animated SVG Turbulence Filter
Sphere Within Sphere
Fat worm
Create amazing web content 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!