Polygon background generator
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 - 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();
};
Developer | Maksim Surguy |
Username | msurguy |
Uploaded | September 12, 2022 |
Rating | 4.5 |
Size | 3,963 Kb |
Views | 26,312 |
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!
Name | Size |
Simplest Parallax effect ever. | 1,930 Kb |
Polygon background generator | 3,963 Kb |
Sortable Grid UI JS | 5,157 Kb |
Ladda Bootstrap 3 | 3,476 Kb |
Interactive card | 7,540 Kb |
Sort algorithms illustrated | 8,214 Kb |
Bootstrap - flat ui buttons | 3,982 Kb |
USA using webfont stately | 2,579 Kb |
Avatar Blur | 17,935 Kb |
Mesmerizing Delaunay | 4,925 Kb |
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!
Name | Username | Size |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Welcome | Nakome | 6,076 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Css or Czz.. | Judag | 4,111 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Flip test | Madhes | 1,635 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!