Auto-generated mesh with triangles

Developer
Kevin Weber
Size
3,307 Kb
Views
12,144
  1. Auto-generated mesh with triangles Previews
  2. Auto-generated mesh with triangles HTML Codes
  3. Auto-generated mesh with triangles CSS Codes
  4. Auto-generated mesh with triangles JS Codes

How do I make an auto-generated mesh with triangles?

This script randomly generates a static mesh on page load. It is based on: http://codepen.io/zessx/pen/ZGBMXZ. What is a auto-generated mesh with triangles? How do you make a auto-generated mesh with triangles? This script and codes were developed by Kevin Weber on 20 November 2022, Sunday.

Auto-generated mesh with triangles Previews
IQ Test

Auto-generated mesh with triangles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto-generated mesh with triangles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="poly-bg"></div> <script src="js/index.js"></script>
</body>
</html>

Auto-generated mesh with triangles - Script Codes CSS Codes

#poly-bg { background: radial-gradient(ellipse at center, #2196f3 20%, #010c14 100%); overflow: hidden;
}

Auto-generated mesh with triangles - Script Codes JS Codes

// BASED ON: https://codepen.io/zessx/pen/ZGBMXZ
/*global $ */
(function () { 'use strict'; var refreshDuration = 10000; var refreshTimeout; var numPointsX; var numPointsY; var unitWidth; var unitHeight; var points; var y; var x; var i; var n; function onLoad() { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('width', window.innerWidth); svg.setAttribute('height', window.innerHeight); var initElement = document.querySelector('#poly-bg'); if (!initElement) { return; } initElement.appendChild(svg); var unitSize = (window.innerWidth + window.innerHeight) / 20; numPointsX = Math.ceil(window.innerWidth / unitSize) + 1; numPointsY = Math.ceil(window.innerHeight / unitSize) + 1; unitWidth = Math.ceil(window.innerWidth / (numPointsX - 1)); unitHeight = Math.ceil(window.innerHeight / (numPointsY - 1)); points = []; for (y = 0; y < numPointsY; y++) { for (x = 0; x < numPointsX; x++) { points.push({ x: unitWidth * x, y: unitHeight * y, originX: unitWidth * x, originY: unitHeight * y }); } } randomize(); for (i = 0; i < points.length; i++) { if (points[i].originX != unitWidth * (numPointsX - 1) && points[i].originY != unitHeight * (numPointsY - 1)) { var topLeftX = points[i].x; var topLeftY = points[i].y; var topRightX = points[i + 1].x; var topRightY = points[i + 1].y; var bottomLeftX = points[i + numPointsX].x; var bottomLeftY = points[i + numPointsX].y; var bottomRightX = points[i + numPointsX + 1].x; var bottomRightY = points[i + numPointsX + 1].y; var rando = Math.floor(Math.random() * 2); for (n = 0; n < 2; n++) { var polygon = document.createElementNS(svg.namespaceURI, 'polygon'); if (rando == 0) { if (n == 0) { polygon.point1 = i; polygon.point2 = i + numPointsX; polygon.point3 = i + numPointsX + 1; polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + bottomRightX + ',' + bottomRightY); } else if (n == 1) { polygon.point1 = i; polygon.point2 = i + 1; polygon.point3 = i + numPointsX + 1; polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY); } } else if (rando == 1) { if (n == 0) { polygon.point1 = i; polygon.point2 = i + numPointsX; polygon.point3 = i + 1; polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY); } else if (n == 1) { polygon.point1 = i + numPointsX; polygon.point2 = i + 1; polygon.point3 = i + numPointsX + 1; polygon.setAttribute('points', bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY); } } // INFIELD: INJECT SECOND COLOR var randomized = Math.random() / 3; var color; if (randomized > 0.28) { // Add green color = 'rgba(51,113,30,' + (randomized * 0.75) + ')'; // Add orange //color = 'rgba(226,118,66,' + (randomized / 2) + ')'; } else if (randomized > 0.24) { // Get rid of too dark polygons color = 'rgba(0,0,0,' + (randomized * 0.7) + ')'; } else { color = 'rgba(0,0,0,' + randomized + ')'; } polygon.setAttribute('fill', color); var animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); animate.setAttribute('fill', 'freeze'); animate.setAttribute('attributeName', 'points'); animate.setAttribute('dur', refreshDuration + 'ms'); animate.setAttribute('calcMode', 'linear'); polygon.appendChild(animate); svg.appendChild(polygon); } } } // INFIELD: UNCOMMENT THE FOLLOWING LINE TO ANIMATE THE BG // refresh(); } function randomize() { var i; for (i = 0; i < points.length; i++) { if (points[i].originX != 0 && points[i].originX != unitWidth * (numPointsX - 1)) { points[i].x = points[i].originX + Math.random() * unitWidth - unitWidth / 2; } if (points[i].originY != 0 && points[i].originY != unitHeight * (numPointsY - 1)) { points[i].y = points[i].originY + Math.random() * unitHeight - unitHeight / 2; } } } function refresh() { var i; randomize(); for (i = 0; i < document.querySelector('#poly-bg svg').childNodes.length; i += 1) { var polygon = document.querySelector('#poly-bg svg').childNodes[i]; var animate = polygon.childNodes[0]; if (animate.getAttribute('to')) { animate.setAttribute('from', animate.getAttribute('to')); } animate.setAttribute('to', points[polygon.point1].x + ',' + points[polygon.point1].y + ' ' + points[polygon.point2].x + ',' + points[polygon.point2].y + ' ' + points[polygon.point3].x + ',' + points[polygon.point3].y); animate.beginElement(); } refreshTimeout = setTimeout(function () { refresh(); }, refreshDuration); } function onResize() { document.querySelector('#poly-bg svg').remove(); clearTimeout(refreshTimeout); onLoad(); } window.onload = onLoad; window.onresize = onResize;
}());
Auto-generated mesh with triangles - Script Codes
Auto-generated mesh with triangles - Script Codes
Home Page Home
Developer Kevin Weber
Username kevinweber
Uploaded November 20, 2022
Rating 3
Size 3,307 Kb
Views 12,144
Do you need developer help for Auto-generated mesh with triangles?

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!

Kevin Weber (kevinweber) Script Codes
Name
SqueezeText demo
Simple Pulsating Button
Animated Video Play Button by Adobe
CSS triangles
Zoom background cover image on hover
Fill circle from bottom to top in percent
CSS-only link confirm dialog
Text with Background Image
Logo icon and text animation
Change link color from left to right
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!