This code snippet helps you create an animated polygon background. It uses the Geometryangle JavaScript library to generate animated shapes on the webpage. You can adjust different things like mesh, lights, lines, and vertex to control how the 3D background looks.
The mesh property controls the size, depth, color, and movement of the surface where the 3D effect is shown. The lights property controls the lighting and how many light sources there are, and the line property controls how the lines that connect the vertices in the mesh look.
How to Create Animated Polygon Background
First of all, create a div element with a class name “background” in which the polygon shapes will be rendered.
<div class="background"></div> <div class="overlay"></div>
After that, add the following CSS styles into your project.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');
}
body {
font-family: 'Open Sans', sans-serif;
}
.background {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
}
Load the jQuery and GeometryAngle JS by adding the following CDN links before closing the body tag:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Interactive-Polygon-Background-Geometryangle/geometryangle.js'></script>
Finally, initialize the polygon shapes by defining the mesh properties in the jQuery document ready function.
$(document).ready(function(){
$('.background').Geometryangle({
// handle transparent colors
mesh:{
width: 1.2,
height: 1.2,
// How far should the mesh vary into z-space.
depth: 10,
// Number of columns for the mesh.
columns: 12,
columns_auto: false,
// Number of rows for the mesh.
rows: 7,
rows_auto: true,
zoom: 1,
xRange: 0.8,
yRange: 0.1,
zRange: 3.0,
ambient: 'rgba(14, 9, 131, 1)',
diffuse: 'rgba(136, 12, 131, 1)',
background: 'rgb(241, 173, 27)',
speed: 0.0002,
fluctuationSpeed: .2,
fluctuationIntensity: 0,
onRender: function () {
},
floorPosition: false,
draw: true
},
lights: {
// How many light sources belong to this light.
count: 1,
xyScalar: 1,
// Position of light source.
zOffset: 100,
ambient: 'rgba(97,0,94, 1)',
diffuse: 'rgba(97,18,94, 1)',
speed: 0.001,
gravity: 100,
// Dampening of light's movements.
dampening: 0.95,
minLimit: 10,
maxLimit: null,
minDistance: 20,
maxDistance: 400,
autopilot: false,
draw: false, //show circle
bounds: FSS.Vector3.create(),
step: FSS.Vector3.create(
Math.randomInRange(0.2, 1.0),
Math.randomInRange(0.2, 1.0),
Math.randomInRange(0.2, 1.0)
)
},
// specify the thickness, color, stroke, etc.
line: {
fill: "rgba(0, 0, 0, 0)",
thickness: 1,
fluctuationIntensity: 0,
fluctuationSpeed: 0.5,
draw: false
},
// Set the point attributes for the vertex.
vertex: {
// Radius of vertice circle.
radius: 0,
fill: "rgba(0, 0, 0, 0)",
// Fluctuates opacity of vertex.
fluctuationSpeed: 0.5,
fluctuationIntensity: 0,
strokeWidth: 0,
strokeColor: "rgba(0, 0, 0, 0)",
// Instead of setting alpha channel to zero
// Set draw to false to avoid computing.
draw: false
}
});
});
That’s all! hopefully, you have successfully created an animated background. If you have any questions or suggestions, feel free to comment below.
