Experimenting with CSS

Vasarely in colour

Victor Vasarely painting, 1963

Digital version of a painting created by Victor Vasarely in 1963.

It is too complex to do with just CSS. I needed a bunch of class names in the HTML for easier targeting via CSS. I figured out the patterns in the artwork first, convert these into PHP to create the required HTML with class names, and finally adding the CSS. The last part was the easiest.

There are three different patterns:

The result is below. No images, just code. I made a special effort to make this responsive as well, so it should scale nicely wether you’re reading this on your phone or your desktop.

This is the demo of the related blog post.

css

									
										
/**
 * ------------------------------------------------------------------------------------------------- 
 * Layout
 * -------------------------------------------------------------------------------------------------
 */

.vasarelycol { width: 75%; float: left; }

.vasarelycol__row {
  clear: both;
  width: 100%;
  display: block;
  float: left; 
}

.vasarelycol__cube {
  float: left;
  width: 5%;
  height: 0;
  padding-bottom: 5%; 
}

.vasarelycol__circle {
  height: 0;
  border-radius: 50%; 
}

/**
 * ------------------------------------------------------------------------------------------------- 
 * Background colours
 * -------------------------------------------------------------------------------------------------
 */

.vasarelycol__cube.gradient-1 { background: #ccc; }
.vasarelycol__cube.gradient-2 { background: #bbb; }
.vasarelycol__cube.gradient-3 { background: #aaa; }
.vasarelycol__cube.gradient-4 { background: #999; }
.vasarelycol__cube.gradient-5 { background: #777; }
.vasarelycol__cube.gradient-6 { background: #666; }
.vasarelycol__cube.gradient-7 { background: #555; }
.vasarelycol__cube.gradient-8 { background: #444; }

.purple .vasarelycol__circle { background: #6b4f89; }
.violet .vasarelycol__circle { background: #3d3e6a; }
.violet-indigo .vasarelycol__circle { background: #4365bf; }
.indigo .vasarelycol__circle { background: #2b6697; }
.indigo-blue .vasarelycol__circle { background: #5e96af; }
.blue .vasarelycol__circle { background: #96b2e2; }
.blue-green .vasarelycol__circle { background: #275344; }
.green .vasarelycol__circle { background: #388849; }
.green-yellow .vasarelycol__circle { background: #79c05a; }
.yellow .vasarelycol__circle { background: #f0d800; }
.yellow-orange .vasarelycol__circle { background: #da9424; }
.orange .vasarelycol__circle { background: #cf4528; }
.orange-red .vasarelycol__circle { background: #da2f35; }
.red .vasarelycol__circle { background: #a92324; }

/**
 * ------------------------------------------------------------------------------------------------- 
 * Circle sizes
 * -------------------------------------------------------------------------------------------------
 */
 
.small .vasarelycol__circle {
  width: 30%;
  padding-bottom: 30%;
  margin: 35%; 
}

.medium .vasarelycol__circle {
  width: 50%;
  padding-bottom: 50%;
  margin: 25%; 
}

.large .vasarelycol__circle {
  width: 70%;
  padding-bottom: 70%;
  margin: 15%; 
}

.extra-large .vasarelycol__circle {
  width: 90%;
  padding-bottom: 90%;
  margin: 5%; 
}

/**
 * ------------------------------------------------------------------------------------------------- 
 * Circle skews
 * -------------------------------------------------------------------------------------------------
 */
 
.small-skewed .vasarelycol__circle {
  width: 30%;
  padding-bottom: 80%;
  margin: 10% 35%; 
}

.medium-skewed .vasarelycol__circle {
  width: 50%;
  padding-bottom: 80%;
  margin: 10% 25%; 
}

.large-skewed .vasarelycol__circle {
  width: 70%;
  padding-bottom: 80%;
  margin: 10% 15%; 
}

/**
 * ------------------------------------------------------------------------------------------------- 
 * Circle slants
 * -------------------------------------------------------------------------------------------------
 */

.right .vasarelycol__circle {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); 
}

.level .vasarelycol__circle {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); 
}

.left .vasarelycol__circle {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); 
}
	    							
	    						

html

									
										
<section class="vasarelycol">
   <div class="vasarelycol__row 1">
         <div class="vasarelycol__cube 1 gradient-8 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-5 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-6 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-7 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-8 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-1 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-2 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-3 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-4 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-5 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-6 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-7 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-8 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-1 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-2 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-3 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-4 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-5 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-6 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-7 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 2">
         <div class="vasarelycol__cube 1 gradient-7 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-4 large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-1 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-2 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-3 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-4 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-5 large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-6 large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-7 large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-8 large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-1 large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-2 large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-3 large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-4 large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-5 large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-6 large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-7 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-8 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-1 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-8 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 3">
         <div class="vasarelycol__cube 1 gradient-6 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-3 large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-8  small-skewed up violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-5  small-skewed level blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-6  extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-7  large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-8  medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-1  small violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-2  small-skewed right purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-3  small-skewed right red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-4  small orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-5  medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-6  large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-7  extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-8  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-1  small-skewed level green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-2  small-skewed level blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-3  extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-2 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-1 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 4">
         <div class="vasarelycol__cube 1 gradient-5 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-2 large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-7  small-skewed level indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-4  small-skewed up blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-1  extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-2  large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-3  medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-4  small orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-5  small-skewed right orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-6  small-skewed right yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-7  small yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-8  medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-1  large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-2  extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-3  extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-4  small-skewed level indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-5  small-skewed level indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-4  extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-3 large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-2 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 5">
         <div class="vasarelycol__cube 1 gradient-4 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-1 large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-6  medium-skewed level indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-3  medium-skewed up green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-8  extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-5  extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-6  extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-7  extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-8  extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-1  extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-2  extra-large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-3  extra-large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-4  extra-large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-5  extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-6  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-7  medium-skewed level green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-6  medium-skewed level violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-5  extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-4 large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-3 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 6">
         <div class="vasarelycol__cube 1 gradient-3 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-8 large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-5  large-skewed level blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-2  large-skewed up green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-7  extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-4 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-1 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-2 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-3 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-4 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-5 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-6 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-7 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-8 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-1 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-8  medium-skewed level blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-7  medium-skewed level violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-6  extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-5 large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-4 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 7">
         <div class="vasarelycol__cube 1 gradient-2 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-7 large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-4  extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-1  extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-6  extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-3 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-8 extra-large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-5 extra-large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-6 extra-large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-7 extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-8 extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-1 extra-large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-2 extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-3 extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-2 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-1  large-skewed level blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-8  large-skewed level purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-7  extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-6 large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-5 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 8">
         <div class="vasarelycol__cube 1 gradient-1 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-6 large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-3  large-skewed level green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-8  large-skewed up yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-5  extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-2 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-7 extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-4 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-1 large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-2 large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-3 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-4 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-5 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-4 extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-3 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-2  large-skewed level indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-1  large-skewed level red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-8  extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-7 large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-6 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 9">
         <div class="vasarelycol__cube 1 gradient-8 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-5 large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-2  medium-skewed level green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-7  medium-skewed up orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-4  extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-1 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-6 extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-3 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-8 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-5 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-6 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-7 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-6 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-5 extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-4 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-3  small-skewed up indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-2  small-skewed up orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-1  extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-8 large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-7 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 10">
         <div class="vasarelycol__cube 1 gradient-7 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-4 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-1  small-skewed level yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-6  small-skewed up orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-3  extra-large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-8 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-5 extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-2 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-7 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-4 small violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-1 small blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-8 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-7 large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-6 extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-5 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-4  small-skewed up violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-3  small-skewed up orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-2  extra-large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-1 large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-8 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 11">
         <div class="vasarelycol__cube 1 gradient-6 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-3 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-8  small-skewed up yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-5  small-skewed level red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-2  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-7 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-4 extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-1 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-6 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-3 small indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-2 small indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-1 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-8 large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-7 extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-6 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-5  medium-skewed up violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-4  medium-skewed up yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-3  extra-large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-2 large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-1 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 12">
         <div class="vasarelycol__cube 1 gradient-5 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-2 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-7  medium-skewed up orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-4  medium-skewed level purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-1  extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-6 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-3 extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-8 large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-5 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-4 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-3 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-2 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-1 large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-8 extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-7 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-6  large-skewed up purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-5  large-skewed up yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-4  extra-large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-3 large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-2 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 13">
         <div class="vasarelycol__cube 1 gradient-4 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-1 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-6  large-skewed up orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-3  large-skewed level violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-8  extra-large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-5 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-2 extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-7 large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-6 large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-5 large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-4 large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-3 large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-2 large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-1 extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-8 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-7  extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-6  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-5  extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-4 large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-3 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 14">
         <div class="vasarelycol__cube 1 gradient-3 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-8 large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-5  extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-2  extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-7  extra-large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-4 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-1 extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-8 extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-7 extra-large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-6 extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-5 extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-4 extra-large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-3 extra-large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-2 extra-large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-1 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-8  large-skewed right orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-7  large-skewed left green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-6  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-5 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-4 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 15">
         <div class="vasarelycol__cube 1 gradient-2 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-7 large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-4  extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-1  extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-6  extra-large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-3 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-2 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-1 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-8 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-7 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-6 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-5 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-4 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-3 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-2 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-1  medium-skewed right orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-8  medium-skewed left blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-7  extra-large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-6 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-5 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 16">
         <div class="vasarelycol__cube 1 gradient-1 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-6 large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-3  small-skewed left violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-8  small-skewed right indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-5  medium-skewed right red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-4  large-skewed right purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-3  extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-2  large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-1  medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-8  small indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-7  medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-6  large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-5  extra-large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-4  large-skewed right green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-3  medium-skewed right yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-2  small-skewed right yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-1  small-skewed left blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-8  extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-7 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-6 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 17">
         <div class="vasarelycol__cube 1 gradient-8 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-5 large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-2  small-skewed right violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-7  small-skewed left blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-6  medium-skewed left blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-5  large-skewed left green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-4  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-3  large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-2  medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-1  small orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-8  medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-7  large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-6  extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-5  large-skewed left violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-4  medium-skewed left violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-3  small-skewed left indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-2  small-skewed right indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-1  extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-8 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-7 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 18">
         <div class="vasarelycol__cube 1 gradient-7 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-4 large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-1  extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-8  extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-7  extra-large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-6  extra-large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-5  extra-large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-4  extra-large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-3  extra-large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-2  extra-large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-1  extra-large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-8  extra-large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-7  extra-large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-6  extra-large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-5  extra-large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-4  extra-large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-3  extra-large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-2  extra-large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-1 large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-8 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 19">
         <div class="vasarelycol__cube 1 gradient-6 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-3 large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-2 large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-1 large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-8 large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-7 large orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-6 large orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-5 large red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-4 large purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-3 large violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-2 large violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-1 large indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-8 large indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-7 large blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-6 large blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-5 large green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-4 large green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-3 large yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-2 large yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-1 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
      <div class="vasarelycol__row 20">
         <div class="vasarelycol__cube 1 gradient-5 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 2 gradient-4 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 3 gradient-3 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 4 gradient-2 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 5 gradient-1 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 6 gradient-8 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 7 gradient-7 medium yellow">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 8 gradient-6 medium yellow-orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 9 gradient-5 medium orange">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 10 gradient-4 medium orange-red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 11 gradient-3 medium red">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 12 gradient-2 medium purple">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 13 gradient-1 medium violet">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 14 gradient-8 medium violet-indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 15 gradient-7 medium indigo">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 16 gradient-6 medium indigo-blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 17 gradient-5 medium blue">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 18 gradient-4 medium blue-green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 19 gradient-3 medium green">
         <div class="vasarelycol__circle"></div>
      </div>
            <div class="vasarelycol__cube 20 gradient-2 medium green-yellow">
         <div class="vasarelycol__circle"></div>
      </div>
         </div>
   </section>