Geometric Pattern Mask

Developer
Val Head
Size
2,527 Kb
Views
26,312
  1. Geometric Pattern Mask Previews
  2. Geometric Pattern Mask HTML Codes
  3. Geometric Pattern Mask CSS Codes
  4. Geometric Pattern Mask JS Codes

How do I make an geometric pattern mask?

CSS mask over a canvas pattern. Yay, masks!. What is a geometric pattern mask? How do you make a geometric pattern mask? This script and codes were developed by Val Head on 07 August 2022, Sunday.

Geometric Pattern Mask Previews
IQ Test

Geometric Pattern Mask - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Geometric Pattern Mask</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div> <canvas id="type" width="655" height="125" />
</div>
<div class="shadow"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Geometric Pattern Mask - Script Codes CSS Codes

body { background: #2e292e; margin: 0; text-align:center;
}
#type { background:#f8fc8e;	-webkit-mask-image: url('https://dl.dropbox.com/u/1143870/geometric.png'); -webkit-mask-repeat: no-repeat;	position:absolute;	top:0;	left:0;
}
.wrap { position:relative; width:655px; margin:2em auto; }
.shadow { width:655px;	height:125px;	background:url('https://dl.dropbox.com/u/1143870/geo_innershadow.png') top left no-repeat;	position:absolute;	top:0	left:0;	}

Geometric Pattern Mask - Script Codes JS Codes

var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight,	HALF_WIDTH = window.innerWidth / 2,	HALF_HEIGHT = window.innerHeight / 2;
var colours =["rgba(255,162,153,.4)","rgba(236,252,142,.5)","rgba(157,248,180,.5)","rgba(151,241,153,.5)"],
squares=[],
MAX_SQUARES = 10;
var count=0,	width=30,	sX =0,	sY =0, canvas, c;
setupCanvas();
function setupCanvas() { canvas = document.getElementById("type"); c = canvas.getContext("2d"); draw();
}
function draw() { MAX_SQUARES = (SCREEN_WIDTH/width) * (SCREEN_HEIGHT/width);
for (i=0; i<MAX_SQUARES; i++){ sX = width *count; if (count > SCREEN_WIDTH/width) { count =0;	sX = 0	sY = sY + width;	}
var s = new SplitSquare(sX,sY,width);
squares.push(s); s.colour01 = colours[Math.round(randomRange(0,3))];
s.colour02 = colours[Math.round(randomRange(0,3))];
s.render(c);
count ++;
}
count =0;
setInterval(loop, 1000 / 10);
}
function loop () { for (i=0; i<MAX_SQUARES; i++){ s=squares[i];	s.colour01 = colours[Math.round(randomRange(0,3))];	s.colour02 = colours[Math.round(randomRange(0,3))];	s.render(c);	}	}
function randomRange(min, max) { return ((Math.random()*(max-min)) + min);
}
function SplitSquare(posx, posy, size) {	this.posX = posx;	this.posY = posy;	this.size = size;	this.colour01;	this.colour02;	this.render = function(c) {	c.fillStyle = this.colour02;	c.save();	c.translate(this.posX, this.posY);	c.beginPath();	c.moveTo(0, 0);	c.lineTo(0, this.size);	c.lineTo(this.size,this.size);	c.closePath();	c.fill();	c.fillStyle = this.colour01;	c.beginPath();	c.moveTo(0,0);	c.lineTo(this.size, 0);	c.lineTo(this.size, this.size);	c.closePath();	c.fill();	c.restore();	};
}
Geometric Pattern Mask - Script Codes
Geometric Pattern Mask - Script Codes
Home Page Home
Developer Val Head
Username valhead
Uploaded August 07, 2022
Rating 4.5
Size 2,527 Kb
Views 26,312
Do you need developer help for Geometric Pattern Mask?

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!

Val Head (valhead) Script Codes
Name
Net magazine demo - Step 3
Spring physics with CSS variables
Neon glow letters
Listening for CSS animation events
Net magazine example - Start
You are getting very sleepy...
Nav animation exercise - START
500 coffee cup icons
Steps Sprite Animation
3D dancing dots
Create amazing art & images 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!