Polygon background generator

Developer
Maksim Surguy
Size
3,963 Kb
Views
26,312
  1. Polygon background generator Previews
  2. Polygon background generator HTML Codes
  3. Polygon background generator CSS Codes
  4. Polygon background generator JS Codes

How do I make an polygon background generator?

Create beautiful polygons with this tool. What is a polygon background generator? How do you make a polygon background generator? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.

Polygon background generator Previews
IQ Test

Polygon background generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Polygon background generator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="container"> <ul id="links" class="links"> <li><a class="who" href="https://twitter.com/msurguy" target="_blank">by msurguy</a></li> </ul>
</div>
<canvas class="trianglecanvas"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Polygon background generator - Script Codes CSS Codes

 body,
html { margin: 0; padding: 0; height: 100%;
}
canvas { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { font-family: "Open Sans", serif; font-smoothing: antialiased; font-weight: normal; background: #151618; color: #FFF; margin: 0;
}
a { transition: color 0.2s ease-out; text-decoration: none; color: #FBB;
}
a:hover { color: #444;
}
.overlay { pointer-events: none; position: absolute; height: 100%; width: 100%; left: 0; top: 0;
}
.container { position: absolute; height: 100%; width: 100%;
}
.links { position: absolute; list-style: none; width: 120px; bottom: 40px; right: 20px; padding: 0; margin: 0;
}
.links li { border-bottom: #222 1px solid; border-bottom: rgba(255, 255, 255, 0.1) 1px solid;
}
.links li a { transition: opacity 0.2s ease-out; font-smoothing: subpixel-antialiased; text-transform: uppercase; text-align: right; padding: 0.25em 0; letter-spacing: 2px; font-size: 12px; display: block; width: 100%; opacity: 0.8; color: #FFF;
}
.links li a:hover { opacity: 1;
}
.links li .who:before { opacity: 0.5; content: '@'; float: left;
}
.links li .source:before { opacity: 0.5; content: '{}'; float: left;
}
.links li .blog:before { opacity: 0.5; content: '&'; float: left;
}
.hide { opacity: 0;

Polygon background generator - Script Codes JS Codes

// Defaults
var TRIANGLE_SIZE = 40;
var OPACITY_VARIATION = 0.4;
var colorHue = 50;
var colorSaturation = 50;
var colorValue = 50;
var newCanvas, canvasEl, canvasData;
var downloadImage = function() { downloadCanvas(canvasEl);
};
// Determine screen pixel ratio (Retina/Non-Retina)
var backingScale = function() { if ('devicePixelRatio' in window) { if (window.devicePixelRatio > 1) { return window.devicePixelRatio; } } return 1;
};
var scaleFactor = backingScale();
/* UTIL FUNCTIONS */
function HSVtoRGB(h, s, v) { var r, g, b, i, f, p, q, t; if (h && s === undefined && v === undefined) { s = h.s, v = h.v, h = h.h; } i = Math.floor(h * 6); f = h * 6 - i; p = v * (1 - s); q = v * (1 - f * s); t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: r = v, g = t, b = p; break; case 1: r = q, g = v, b = p; break; case 2: r = p, g = v, b = t; break; case 3: r = p, g = q, b = v; break; case 4: r = t, g = p, b = v; break; case 5: r = v, g = p, b = q; break; } return "#" + ((1 << 24) + (Math.floor(r * 255) << 16) + (Math.floor(g * 255) << 8) + Math.floor(b * 255)).toString(16).slice(1);
}
function heightOf(side) { return strip((((Math.sqrt(3)) / 2) * side));
}
function randomOpacity() { return (Math.random() * OPACITY_VARIATION);
}
function half(value) { return strip(value / 2);
}
function layCanvas(canvas) { var canvasContext = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; if (scaleFactor > 1) { canvas.width = canvas.width * scaleFactor; canvas.height = canvas.height * scaleFactor; canvasContext = canvas.getContext("2d"); } return [canvas, canvasContext];
}
function strip(number) { return (parseFloat(number.toPrecision(12)));
}
function downloadCanvas(canvas) { window.open(canvas.toDataURL('image/jpeg'), '_blank');
}
/* END OF UTIL FUNCTIONS */
var triangleCanvas = (function() { "use strict"; function triangleCanvas(canvasElm, side) { var canvasObject = layCanvas(canvasElm); this.canvas = canvasObject[0]; this.canvasContext = canvasObject[1]; this.side = side * scaleFactor; this.height = heightOf(this.side); this.canvasWidth = this.canvas.width; this.canvasHeight = this.canvas.height; this.clear(); this.draw(); } triangleCanvas.prototype.clear = function() { this.canvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight); }; triangleCanvas.prototype.draw = function() { var totalDrawnWidth = 0; while (totalDrawnWidth < this.canvasWidth) { totalDrawnWidth = totalDrawnWidth + this.height; this.drawColumn(totalDrawnWidth, -half(this.side)); totalDrawnWidth = totalDrawnWidth + this.height; this.drawColumn(totalDrawnWidth, -this.side); } }; triangleCanvas.prototype.drawColumn = function(startX, startY) { var columnHeight = startY; while (columnHeight < this.canvasHeight) { columnHeight = columnHeight + half(this.side); this.triangle(startX, columnHeight, "right"); columnHeight = columnHeight + half(this.side); this.triangle(startX, columnHeight, "left"); } }; triangleCanvas.prototype.triangle = function(currentX, currentY, direction) { var color = "rgba(0,0,0," + randomOpacity() + ")"; var horizontal, startPoint; this.canvasContext.fillStyle = color; var moveToX, moveToY; switch (direction) { case "left": horizontal = -this.height; startPoint = currentX - this.height; break; case "right": horizontal = this.height; startPoint = currentX; break; } this.canvasContext.beginPath(); this.canvasContext.moveTo(startPoint, currentY); moveToY = currentY + half(this.side); moveToX = startPoint - horizontal; this.canvasContext.lineTo(moveToX, moveToY); moveToY = moveToY - this.side; this.canvasContext.lineTo(moveToX, moveToY); this.canvasContext.closePath(); this.canvasContext.fill(); this.canvasContext.save(); }; return triangleCanvas;
})();
function regenerateTriangles() { newCanvas = new triangleCanvas(canvasEl, TRIANGLE_SIZE); canvasData = newCanvas.canvasContext.getImageData(0, 0, newCanvas.canvasWidth, newCanvas.canvasHeight); colorize();
}
function colorize() { var currentCanvas = newCanvas; var ctx = currentCanvas.canvasContext; var w = currentCanvas.canvasWidth; var h = currentCanvas.canvasHeight; var compositeOperation = ctx.globalCompositeOperation; ctx.clearRect(0, 0, w, h); //get the current ImageData for the canvas. ctx.putImageData(canvasData, 0, 0); //set to draw behind current content ctx.globalCompositeOperation = "destination-over"; //set background color ctx.fillStyle = HSVtoRGB(colorHue / 100, colorSaturation / 100, colorValue / 100); ctx.fillRect(0, 0, w, h); //reset the globalCompositeOperation to what it was ctx.globalCompositeOperation = compositeOperation;
}
window.onload = function() { canvasEl = document.getElementsByClassName("trianglecanvas")[0]; var gui = new dat.GUI(); gui.add(this, 'colorHue', 0, 100).name('Hue').onChange(function(newValue) { colorHue = newValue; colorize(); }); gui.add(this, 'colorSaturation', 0, 100).name('Saturation').onChange(function(newValue) { colorSaturation = newValue; colorize(); }); gui.add(this, 'colorValue', 0, 100).name('Value').onChange(function(newValue) { colorValue = newValue; colorize(); }); gui.add(this, 'TRIANGLE_SIZE', 5, 100).name('Size').onChange(function(newValue) { TRIANGLE_SIZE = newValue; regenerateTriangles(); colorize(); }); gui.add(this, 'OPACITY_VARIATION', 0, 1).name('Variation').onChange(function(newValue) { OPACITY_VARIATION = newValue; regenerateTriangles(); colorize(); }); gui.add(this, 'downloadImage').name('Download'); // Kick off regenerateTriangles();
};
Polygon background generator - Script Codes
Polygon background generator - Script Codes
Home Page Home
Developer Maksim Surguy
Username msurguy
Uploaded September 12, 2022
Rating 4.5
Size 3,963 Kb
Views 26,312
Do you need developer help for Polygon background generator?

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!

Maksim Surguy (msurguy) Script Codes
Name
Sortable Grid UI JS
Avatar Blur
Triangle pattern generator
Simplest Parallax effect ever.
Sort algorithms illustrated
USA using webfont stately
Bootstrap login flipper
Mesmerizing Delaunay
Dynamic SVG poster
Bootstrap - shop item
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!