Welcome to today’s tutorial. In today’s tutorial, we will create a geometric art generator. To create this project we need HTML, CSS and Vanilla Javascript. This project is well suited for javascript beginners and intermediates.
I have a playlist of 45+ javascript project tutorials on my youtube channel. If you are interested in learning how to create them check out the playlist here.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. If you would like you can check it here down below. Also, I post lots of CSS and Javascript tutorials on my channel regularly. So be sure to subscribe to my channel so you don’t miss any of them.
Project Folder Structure:
Now before we start to code, let us see how our project folder structure looks like. Our project folder is called – Geometric Art Generator. This folder consists of three files. They are index.html, style.css and script.js. These files are the HTML document, the stylesheet and the javascript file respectively.
HTML:
We begin with the HTML code. Now copy the code below and paste it into your HTML file. The HTML code consists of a wrapper. Within this wrapper, we have a div with the class container and a button. This container further consists of 20 div tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Geometric Art Generator</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<button id="btn">Generate</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Let us style this generator with CSS. Copy the code that has been provided to you below and paste it into your CSS file.
We start by removing unwanted margins and paddings from all the elements. We further centre the wrapper using transforms.
In the next step, we use the calc() to set the height and width of the container. The dimensions are set relative to the viewport minimum value. This ensures that the container stays in a 4:5 ratio even when the browser is resized.
Other Tutorials You Might Like:
- Calculator Using HTML, CSS and Javascript
- Check Internet Connection Status With Javascript
- Washi Tape Notes Using CSS
Next, we set a height and width of 100% for all the div elements inside the container. Also, we style the button as per our choice. Further, we create classes for different shapes use clip-path.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.container {
background-color: #000000;
height: calc(15vmin * 5);
width: calc(15vmin * 4);
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 15px;
gap: 10px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(90, 90, 180, 0.4);
}
.container div {
position: relative;
height: 100%;
width: 100%;
}
button {
width: 100%;
margin-top: 30px;
background-color: #000000;
padding: 18px 0;
border: none;
outline: none;
cursor: pointer;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 3.5vmin;
border-radius: 5px;
}
.quad-circle-1 {
clip-path: circle(100% at 0 0);
}
.quad-circle-2 {
clip-path: circle(100% at 100% 0);
}
.quad-circle-3 {
clip-path: circle(100% at 100% 100%);
}
.quad-circle-4 {
clip-path: circle(100% at 0 100%);
}
.triangle-1 {
clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.triangle-2 {
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.triangle-3 {
clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.triangle-4 {
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.circle {
border-radius: 50%;
}
Javascript:
Let us add functionality to this generator using javascript. We create a const for the btn element. Next, we create an array called shapes that consists of class names of all the shapes we have created using CSS. After this, we create another array which is called colors. The colors array consists of 4 different color. You can change them to the colours of your choice.
Lastly, we create a constant called boxes for all the div elements inside the container.
We create a generatePattern(). This function is triggered by the click event on the button and by the load event on the document window.
This function iterates through all the boxes. It then creates variable i that selects a random shape from the shapes array. It also creates variable j. This variable selected random color from the colors array.
Now using the classList method we add the shape class to the boxes. And finally using the style property we set the background color of the box to the randomly selected shape.
const btn = document.getElementById("btn");
const shapes = [
"quad-circle-1",
"quad-circle-2",
"quad-circle-3",
"quad-circle-4",
"triangle-1",
"triangle-2",
"triangle-3",
"triangle-4",
"circle",
];
const colors = ["#01d2fd", "#ffc700", "#fe9f12", "#06d0c7"];
const boxes = document.querySelectorAll(".container div");
let generatePattern = () => {
boxes.forEach((box) => {
box.className = "";
let i = Math.floor(Math.random() * shapes.length);
let j = Math.floor(Math.random() * colors.length);
box.classList.add(shapes[i]);
box.style.backgroundColor = colors[j];
});
};
btn.addEventListener("click", generatePattern);
window.addEventListener("load", generatePattern);
We are now done with our tutorial. If you have any problems while creating this code, you can download the source code by clicking on the download button. Also, don’t forget to drop your feedback and suggestions in the comments below.
