[Solved] How to create geometric shapes in html

by


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