[Solved] How to create geometric shapes in html

by

Introduction

Creating geometric shapes in HTML can be a great way to add visual interest to your webpages. With the help of HTML and CSS, you can create a variety of shapes, including squares, rectangles, circles, and triangles. In this article, we will discuss how to create geometric shapes in HTML and provide some examples of how to do so. We will also discuss how to style these shapes with CSS to make them look even more attractive. By the end of this article, you should have a better understanding of how to create and style geometric shapes in HTML.

Solution

To create geometric shapes in HTML, you can use the SVG (Scalable Vector Graphics) element. SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

To create a basic shape, you can use the element and the shape elements within it. For example, to create a rectangle, you can use the element.

You can also use the element to create a circle, the element to create a polygon, and the element to create more complex shapes.

For more information on creating shapes with SVG, you can refer to the official SVG documentation.


I’m sure there are more elegant ways to accomplish what you’re looking for, but it can be accomplished using SVG, z-Index, Opacity and Clipping.

Run the code and I think you’ll see it matches. The colors might not be exact but they’re close enough to show you what goes where. You can also separate the Styles from the HTML and put in a CSS file, but it was just faster for me to build it this way.

I hope this helps.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#col1 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 3;
}
#col2 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 1;
}
#col3 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -2;
}
#col3a {
    opacity: 0.90;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 1;
}
#col4 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -3;
}
#col4a {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 4;
}
#col5 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -4;
}
#col6 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -5;
}
#col7 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed; 
    display: block;
    z-index: -6;
}
#col8 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -7;
}
</style>
</head>
<body>
<div id="col1">
<svg height="1000" width="1000">
  <circle cx="0" cy="0" r="100" fill="#ffffff" />
  <circle cx="0" cy="200" r="100" fill="#ffffff" />
  <circle cx="0" cy="400" r="100" fill="#ffffff" />
  <circle cx="0" cy="600" r="100" fill="#ffffff" />
  <circle cx="0" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col2">
<svg height="1000" width="1000">
  <circle cx="100" cy="100" r="100" fill="#aba31a" />
  <circle cx="100" cy="300" r="100" fill="#aba31a" />
  <circle cx="100" cy="500" r="100" fill="#aba31a" />
  <circle cx="100" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col3">
<svg height="1000" width="1000">
  <circle cx="200" cy="0" r="100" fill="#ffffff" />
  <circle cx="200" cy="200" r="100" fill="#ffffff" />
  <circle cx="200" cy="400" r="100" fill="#ffffff" />
  <circle cx="200" cy="600" r="100" fill="#ffffff" />
  <circle cx="200" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="200" cy="200" r="100" fill="#326e78" />
  <circle cx="200" cy="400" r="100" fill="#326e78" />
  <circle cx="200" cy="600" r="100" fill="#326e78" />
  <circle cx="200" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col4">
<svg height="1000" width="1000">
  <circle cx="300" cy="100" r="100" fill="#aba31a" />
  <circle cx="300" cy="300" r="100" fill="#aba31a" />
  <circle cx="300" cy="500" r="100" fill="#aba31a" />
  <circle cx="300" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
  <defs>
    <clipPath id="clip1">
      <circle cx="200" cy="0" r="100" />
      <circle cx="200" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="100" r="100" fill="#ffffff" clip-path="url(#clip1)" />
  <defs>
    <clipPath id="clip2">
      <circle cx="200" cy="200" r="100" />
      <circle cx="200" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="300" r="100" fill="#ffffff" clip-path="url(#clip2)" />
  <defs>
    <clipPath id="clip3">
      <circle cx="200" cy="400" r="100" />
      <circle cx="200" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="500" r="100" fill="#ffffff" clip-path="url(#clip3)" />
  <defs>
    <clipPath id="clip4">
      <circle cx="200" cy="600" r="100" />
      <circle cx="200" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="700" r="100" fill="#ffffff" clip-path="url(#clip4)" />
  <defs>
    <clipPath id="clip5">
      <circle cx="200" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="900" r="100" fill="#ffffff" clip-path="url(#clip5)" />
</svg>
</div>
<div id="col5">
<svg height="1000" width="1000">
  <circle cx="400" cy="0" r="100" fill="#ffffff" />
  <circle cx="400" cy="200" r="100" fill="#ffffff" />
  <circle cx="400" cy="400" r="100" fill="#ffffff" />
  <circle cx="400" cy="600" r="100" fill="#ffffff" />
  <circle cx="400" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="400" cy="200" r="100" fill="#326e78" />
  <circle cx="400" cy="400" r="100" fill="#326e78" />
  <circle cx="400" cy="600" r="100" fill="#326e78" />
  <circle cx="400" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col6">
<svg height="1000" width="1000">
  <circle cx="500" cy="100" r="100" fill="#aba31a" />
  <circle cx="500" cy="300" r="100" fill="#aba31a" />
  <circle cx="500" cy="500" r="100" fill="#aba31a" />
  <circle cx="500" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
  <defs>
    <clipPath id="clip6">
      <circle cx="400" cy="0" r="100" />
      <circle cx="400" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="100" r="100" fill="#ffffff" clip-path="url(#clip6)" />
  <defs>
    <clipPath id="clip7">
      <circle cx="400" cy="200" r="100" />
      <circle cx="400" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="300" r="100" fill="#ffffff" clip-path="url(#clip7)" />
  <defs>
    <clipPath id="clip8">
      <circle cx="400" cy="400" r="100" />
      <circle cx="400" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="500" r="100" fill="#ffffff" clip-path="url(#clip8)" />
  <defs>
    <clipPath id="clip9">
      <circle cx="400" cy="600" r="100" />
      <circle cx="400" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="700" r="100" fill="#ffffff" clip-path="url(#clip9)" />
  <defs>
    <clipPath id="clip10">
      <circle cx="400" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="900" r="100" fill="#ffffff" clip-path="url(#clip10)" />
</svg>
</div>
<div id="col7">
<svg height="1000" width="1000">
  <circle cx="600" cy="0" r="100" fill="#ffffff" />
  <circle cx="600" cy="200" r="100" fill="#ffffff" />
  <circle cx="600" cy="400" r="100" fill="#ffffff" />
  <circle cx="600" cy="600" r="100" fill="#ffffff" />
  <circle cx="600" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="600" cy="200" r="100" fill="#326e78" />
  <circle cx="600" cy="400" r="100" fill="#326e78" />
  <circle cx="600" cy="600" r="100" fill="#326e78" />
  <circle cx="600" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col8">
<svg height="1000" width="1000">
  <circle cx="700" cy="100" r="100" fill="#aba31a" />
  <circle cx="700" cy="300" r="100" fill="#aba31a" />
  <circle cx="700" cy="500" r="100" fill="#aba31a" />
  <circle cx="700" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
  <defs>
    <clipPath id="clip11">
      <circle cx="600" cy="0" r="100" />
      <circle cx="600" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="100" r="100" fill="#ffffff" clip-path="url(#clip11)" />
  <defs>
    <clipPath id="clip12">
      <circle cx="600" cy="200" r="100" />
      <circle cx="600" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="300" r="100" fill="#ffffff" clip-path="url(#clip12)" />
  <defs>
    <clipPath id="clip13">
      <circle cx="600" cy="400" r="100" />
      <circle cx="600" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="500" r="100" fill="#ffffff" clip-path="url(#clip13)" />
  <defs>
    <clipPath id="clip14">
      <circle cx="600" cy="600" r="100" />
      <circle cx="600" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="700" r="100" fill="#ffffff" clip-path="url(#clip14)" />
  <defs>
    <clipPath id="clip15">
      <circle cx="600" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="900" r="100" fill="#ffffff" clip-path="url(#clip15)" />
</svg>
</div>  
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="800" cy="200" r="100" fill="#326e78" />
  <circle cx="800" cy="400" r="100" fill="#326e78" />
  <circle cx="800" cy="600" r="100" fill="#326e78" />
  <circle cx="800" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col1">
<svg height="1000" width="1000">
  <circle cx="900" cy="100" r="100" fill="#ffffff" />
  <circle cx="900" cy="300" r="100" fill="#ffffff" />
  <circle cx="900" cy="500" r="100" fill="#ffffff" />
  <circle cx="900" cy="700" r="100" fill="#ffffff" />
  <circle cx="900" cy="900" r="100" fill="#ffffff" />
</svg>
</div>
</body>
</html>

2

solved How to create geometric shapes in html


Creating geometric shapes in HTML is a relatively simple process. All you need to do is use the appropriate HTML tags and attributes. In this article, we will discuss how to create basic shapes such as squares, rectangles, circles, and triangles using HTML.

Creating Squares and Rectangles

To create a square or rectangle, you will need to use the <div> tag. This tag is used to define a division or section in an HTML document. To create a square or rectangle, you will need to set the width and height attributes of the <div> tag. For example, to create a square with a width of 200px and a height of 200px, you would use the following code:

<div style="width: 200px; height: 200px;"></div>

Creating Circles

To create a circle, you will need to use the <circle> tag. This tag is used to define a circle in an HTML document. To create a circle, you will need to set the cx and cy attributes of the <circle> tag. The cx attribute defines the x-coordinate of the center of the circle, while the cy attribute defines the y-coordinate of the center of the circle. For example, to create a circle with a center at (100,100) and a radius of 50px, you would use the following code:

<circle cx="100" cy="100" r="50"></circle>

Creating Triangles

To create a triangle, you will need to use the <polygon> tag. This tag is used to define a polygon in an HTML document. To create a triangle, you will need to set the points attribute of the <polygon> tag. The points attribute defines the x- and y-coordinates of the vertices of the triangle. For example, to create a triangle with vertices at (100,100), (200,100), and (150,200), you would use the following code:

<polygon points="100,100 200,100 150,200"></polygon>

As you can see, creating geometric shapes in HTML is a relatively simple process. All you need to do is use the appropriate HTML tags and attributes. With a little bit of practice, you should be able to create any shape you need.