Masking HTML rows and columns in an interlacing design

Question

I have this design that consists of columns and rows that intersect (interlace) to produce something similar to this image:

enter image description here

How can I solve this matter by the use of Masks or any other option? It's a must to have the design as (rows and columns) due to the design restrictions and parameters.

Each row represent an animation of a background color from X to Y or Y to X, and each column represents an animation from top to bottom or bottom to top with attention to html mask

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  justify-items: center;
}

.columns-container,
.rows-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.rows-container {
  flex-direction: column;
}

.columns-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#bg-container {
  width: 50%;
  height: 50%;
  margin: auto;
  position: relative;
}

.anim-row-1 {
  flex: 1 1 213px;
}

.anim-row-2 {
  flex: 0 1 175px;
}

.anim-row-3 {
  flex: 1 1 213px;
}

.anim-column-1 {
  flex: 1 1 188px;
}

.anim-column-2 {
  flex: 0 1 154px;
}

.anim-column-3 {
  flex: 1 1 188px;
}

<div id="bg-container">
  <div class="rows-container">
    <div class="anim-row-1">
      <svg width="100%" height="100%" FILL="none" xmlns="http://www.w3.org/2000/svg">
                <rect fill="blue" width="100%" height="100%" />
            </svg>
    </div>
    <div class="anim-row-2">
      <svg width="100%" height="100%" FILL="none" xmlns="http://www.w3.org/2000/svg">
                <rect fill="red" width="100%" height="100%" />
            </svg>
    </div>
    <div class="anim-row-3">
      <svg width="100%" height="100%" FILL="none" xmlns="http://www.w3.org/2000/svg">
                <rect fill="yellow" width="100%" height="100%" />
            </svg>
    </div>
  </div>
  <div class="columns-container">
    <div class="anim-column-1">
      <svg width="100%" height="100%" FILL="none" xmlns="http://www.w3.org/2000/svg">
                <rect fill="purple" width="100%" height="100%" />
            </svg>
    </div>
    <div class="anim-column-2">
      <svg width="100%" height="100%" FILL="none" xmlns="http://www.w3.org/2000/svg">
                <rect fill="pink" width="100%" height="100%" />
            </svg>
    </div>
    <div class="anim-column-3">
      <svg width="100%" height="100%" FILL="none" xmlns="http://www.w3.org/2000/svg">
                <rect fill="green" width="100%" height="100%" />
            </svg>
    </div>
  </div>
</div>

Could you attach that image? Then we can have a look at what you want to achieve. — Adam, Sep 02 '22 at 23:04

score 0 · Answer 1 · answered Sep 02 '22 at 23:57

Grid was made for this application. More info here

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 390px;
  width: 300px;
}

.blue {
  background-color: #0000FE;
}

.pink {
  background-color: #FFBFCD;
}

.red {
  background-color: #FF0200;
}

.yellow {
  background-color: #FFFF00;
}

.purple {
  background-color: #810081;
}

.green {
  background-color: #008103;
}

<div class='container'>
  <div class="blue"></div>
  <div class="pink"></div>
  <div class="blue"></div>

  <div class="purple"></div>
  <div class="red"></div>
  <div class="green"></div>

  <div class="yellow"></div>
  <div class="pink"></div>
  <div class="yellow"></div>
</div>

I must say that each row represent an animation of a background color from X to Y or Y to X, and each column represents an animation from top to bottom or bottom to top with attention to html mask — Al Shammaa, Sep 04 '22 at 03:17

score -1 · Answer 2 · answered Sep 02 '22 at 23:30

i propose this solution using html tables:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 0px;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <td style="background-color:blue;"> </td>
    <td style="background-color:pink;"> </td>
    <td style="background-color:blue;"> </td>
  </tr>
  <tr>
    <td style="background-color:purple;"> </td>
    <td style="background-color:red;"> </td>
    <td style="background-color:green;"> </td>
  </tr>
  <tr>
    <td style="background-color:yellow;"> </td>
    <td style="background-color:pink;"> </td>
    <td style="background-color:yellow;"> </td>
  </tr>
</table>
</body>
</html>

Masking HTML rows and columns in an interlacing design

2 Answers2