Colored Wall

Developer
Gianluca Guarini
Size
2,551 Kb
Views
20,240
  1. Colored Wall Previews
  2. Colored Wall HTML Codes
  3. Colored Wall CSS Codes
  4. Colored Wall JS Codes

How do I make an colored wall?

Nothing too complicated, just some lines drawn randomly in a canvas. What is a colored wall? How do you make a colored wall? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

Colored Wall Previews
IQ Test

Colored Wall - Script Codes HTML Codes

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

Colored Wall - Script Codes CSS Codes

@import "compass/css3";

Colored Wall - Script Codes JS Codes

/**
*
* Author: Gianluca Guarini
* Contact: [email protected]
* Website: http://www.gianlucaguarini.com/
* Twitter: @gianlucaguarini
*
* Copyright (c) 2013 Gianluca Guarini
*
*/
// Constants
var LINES = 500,	LINES_MAX_HEIGHT = 60,	LINES_MAX_WIDTH = 1,	LINES_MAX_DISTANCE = 2.5,	LINES_SPREAD = 60,	COLOR_PALETTE = [	['1BE049','1BE091','67E01B','ABE01B','1BE0C6'],	['E01B56','E01B32','E01BC6','641385','A6077B'],	['DB9421','EB9336','7F9900','990300','6B452D'],	['146AC7','148DA8','097B7D','522EBF','7E2EBF']	];
var canvas = document.querySelectorAll('canvas')[0],	ctx = canvas.getContext('2d'),	linesDirection = ['horizontal','vertical'];
var createLines = function () {	var i = LINES,	colorPalette = COLOR_PALETTE[~~(Math.random() * 4)];	// draw the background	ctx.globalAlpha = 0.35;	ctx.rect(0, 0, canvas.width, canvas.height);	ctx.fillStyle = '#'+colorPalette[0];	ctx.fill();	while (i--) {	var spread = ~~(Math.random() * LINES_SPREAD),	color = colorPalette[~~(Math.random() * 5)],	height = Math.random() * LINES_MAX_HEIGHT,	x = ~~(Math.random() * canvas.width),	y = ~~(Math.random() * canvas.height),	direction = linesDirection[~~(Math.random() * 2)];	while (spread--) {	var distance = spread * LINES_MAX_DISTANCE;	x += (direction === 'horizontal' ? distance : 0);	y += (direction === 'horizontal' ? 0 : distance);	ctx.save();	ctx.beginPath();	ctx.globalAlpha = Math.random();	ctx.strokeStyle = '#' + color;	ctx.moveTo(x, y);	ctx.lineWidth = Math.random() * LINES_MAX_WIDTH;	ctx.lineTo(x + (direction === 'vertical' ? height : 0),y + (direction === 'vertical' ? 0 : height));	ctx.stroke();	ctx.closePath();	ctx.restore();	}	}
};
var setViewport = function () {	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	createLines();
};
var init = function () {	setViewport();
};
window.onresize = setViewport;
init();
Colored Wall - Script Codes
Colored Wall - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3
Size 2,551 Kb
Views 20,240
Do you need developer help for Colored Wall?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
Css3D Wall
Appletv
Find your mouse cursor
Riot simple movies live search
Tocca.js
The Best Flash Site Ever
Blurred Scrollable Overlay
3D Box-shadow
A Pen by Gianluca Guarini
Fancy 404
Create amazing captions 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!