Box Shadow Patterns

Manan Tank shares a selection of fun patterns: “Each pattern is created using a single div, each square or circle is a shadow of a pseudo element”.

See the Pen Box Shadow Patterns by Manan Tank (@MananTank) on CodePen.

Created on March 31, 2020 Updated on April 2, 2020. A Pen by Manan Tank on CodePen. License.

.info
  h1  Box shadow Patterns
  p   Each pattern is created using a single div
  p   Each square or circle is a shadow of a pseudo element

.container
  - let i = 0;
  while i++ < 11
    .tile(class=`v${i}`)
    
.info
  h3  Possiblities are endless 
  p   Try creating your own pattern using the mixin

<div class="info">
  <h1> Box shadow Patterns</h1>
  <p>  Each pattern is created using a single div</p>
  <p>  Each square or circle is a shadow of a pseudo element</p>
</div>
<div class="container">
  <div class="tile v1"></div>
  <div class="tile v2"></div>
  <div class="tile v3"></div>
  <div class="tile v4"></div>
  <div class="tile v5"></div>
  <div class="tile v6"></div>
  <div class="tile v7"></div>
  <div class="tile v8"></div>
  <div class="tile v9"></div>
  <div class="tile v10"></div>
  <div class="tile v11"></div>
</div>
<div class="info">
  <h3> Possiblities are endless </h3>
  <p>  Try creating your own pattern using the mixin</p>
</div>

box-size = 200px // size of the element


// size is size of the shadow 
// color is color of the shadow 
// pad is the amount space the pattern should leave from all sides
// target is used to specify if the pattern should be created using the before or after psedo element, use the after to place one pattern over another pattern

// you can use this mixin at max two times for each div (one using target = before, ane using target = after)


shape-pattern(size, color, count, pad = 0, target = before)
  p-padding = ( ( box-size - (count * size) - 2*pad) / (count - 1) )
  step = size + p-padding
  
  shadows = null
  for i in 0...count
    for j in 0...count    
      shadow = (step*i) (step*j) color
      if shadows 
        shadows = shadows, shadow 
      else
        shadows = shadow  
  
  &
    position relative
  &::{target}
    content           ''
    position          absolute
    top               (size/2 + pad)
    left              @top
    transform         translate(-50%, -50%)
    background-color  color 
    width             size
    height            @width
    box-shadow        shadows
    {block}

// ------------------------------------------------------
    
.tile 
  width box-size
  height box-size
 
  
.v1 // squares
  shape-pattern(box-size/10, #55efc4, 5)
  
.v2 // dots
  +shape-pattern(box-size/10, #f368e0, 5)
    border-radius 50%

.v3 // squares and bigger dots
  shape-pattern(box-size/10, #1b9cfc, 5, box-size/30, 'after')
  +shape-pattern(box-size/6, #25ccf7, 4, box-size/10)
    border-radius 50%
    
.v4 // big circles on background 
  background #fc427b
  +shape-pattern(box-size/6, white, 6)
    border-radius 50%
    
.v5 // butterfly thingy
  background #686de0
  +shape-pattern(box-size/5, white, 5)
    border-radius 50%
  +shape-pattern(box-size/15, #686de0, 10, box-size/60, 'after')
    border-radius 50%
    
    
.v6 // butterlfly modified
  background #ff7675
  +shape-pattern(box-size/5, white, 5)
    border-radius 50%
  shape-pattern(box-size/15, #ff7675, 10, box-size/60, 'after')


.v7 // petals
  +shape-pattern(box-size/6, white, 5, box-size/48, 'after')
    border-radius 50%
  +shape-pattern(box-size/12, #be2edd, 10)
    border-radius 50%

.v8 // some weird pattern 
  +shape-pattern(box-size/10, #00a8ff, 5)
    border-radius 50%
  shape-pattern(box-size/15, #7ed6df, 10, box-size/30, 'after')
  

.v9 // box Mcboxyface
  shape-pattern(box-size/10, white, 5, box-size/20, 'after')
  shape-pattern(box-size/11, #9c88ff, 10)
  
  
.v10 // mix blend mode stuff
  +shape-pattern(box-size/10, #ff6b6b, 5, box-size/20, 'after')
    mix-blend-mode saturation
  shape-pattern(box-size/11, #f6e58d, 10)
    
// Try creating your own pattern here ---------------------------------

.v11 {
  // your pattern (you can write simple css, no need to write in Stylus)
  
  
}
// -------------------------------------------------------------------------

// inspired from  : https://codepen.io/sbstncp/pen/eYNbwya
// colors from    : https://codepen.io/aniketkudale/pen/BaNxomQ


*, *::before, *::after
  box-sizing border-box
  padding 0
  margin 0
  
  
body
  padding 0 (box-size/5)
  font-family Arial
  color #576574
  letter-spacing 0.1em

.info
  margin 3rem 0
  text-align center
  p
    font-size 0.8rem
    margin-bottom 0.5em
  h1, h3
    text-transform uppercase
    margin-bottom 0.5em
    
  
.container
  display grid
  grid-template-columns repeat(auto-fit, minmax(box-size, 1fr))
  grid-auto-rows box-size
  grid-gap (box-size/3)
  place-items center
  margin 4rem 0

.tile {
  width: 200px;
  height: 200px;
}
.v1 {
  position: relative;
}
.v1::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #55efc4;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #55efc4, 0px 45px #55efc4, 0px 90px #55efc4, 0px 135px #55efc4, 0px 180px #55efc4, 45px 0px #55efc4, 45px 45px #55efc4, 45px 90px #55efc4, 45px 135px #55efc4, 45px 180px #55efc4, 90px 0px #55efc4, 90px 45px #55efc4, 90px 90px #55efc4, 90px 135px #55efc4, 90px 180px #55efc4, 135px 0px #55efc4, 135px 45px #55efc4, 135px 90px #55efc4, 135px 135px #55efc4, 135px 180px #55efc4, 180px 0px #55efc4, 180px 45px #55efc4, 180px 90px #55efc4, 180px 135px #55efc4, 180px 180px #55efc4;
}
.v2 {
  position: relative;
}
.v2::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #f368e0;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #f368e0, 0px 45px #f368e0, 0px 90px #f368e0, 0px 135px #f368e0, 0px 180px #f368e0, 45px 0px #f368e0, 45px 45px #f368e0, 45px 90px #f368e0, 45px 135px #f368e0, 45px 180px #f368e0, 90px 0px #f368e0, 90px 45px #f368e0, 90px 90px #f368e0, 90px 135px #f368e0, 90px 180px #f368e0, 135px 0px #f368e0, 135px 45px #f368e0, 135px 90px #f368e0, 135px 135px #f368e0, 135px 180px #f368e0, 180px 0px #f368e0, 180px 45px #f368e0, 180px 90px #f368e0, 180px 135px #f368e0, 180px 180px #f368e0;
  border-radius: 50%;
}
.v3 {
  position: relative;
}
.v3::after {
  content: '';
  position: absolute;
  top: 16.666666666666668px;
  left: 16.666666666666668px;
  transform: translate(-50%, -50%);
  background-color: #1b9cfc;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #1b9cfc, 0px 41.66666666666667px #1b9cfc, 0px 83.33333333333334px #1b9cfc, 0px 125.00000000000001px #1b9cfc, 0px 166.66666666666669px #1b9cfc, 41.66666666666667px 0px #1b9cfc, 41.66666666666667px 41.66666666666667px #1b9cfc, 41.66666666666667px 83.33333333333334px #1b9cfc, 41.66666666666667px 125.00000000000001px #1b9cfc, 41.66666666666667px 166.66666666666669px #1b9cfc, 83.33333333333334px 0px #1b9cfc, 83.33333333333334px 41.66666666666667px #1b9cfc, 83.33333333333334px 83.33333333333334px #1b9cfc, 83.33333333333334px 125.00000000000001px #1b9cfc, 83.33333333333334px 166.66666666666669px #1b9cfc, 125.00000000000001px 0px #1b9cfc, 125.00000000000001px 41.66666666666667px #1b9cfc, 125.00000000000001px 83.33333333333334px #1b9cfc, 125.00000000000001px 125.00000000000001px #1b9cfc, 125.00000000000001px 166.66666666666669px #1b9cfc, 166.66666666666669px 0px #1b9cfc, 166.66666666666669px 41.66666666666667px #1b9cfc, 166.66666666666669px 83.33333333333334px #1b9cfc, 166.66666666666669px 125.00000000000001px #1b9cfc, 166.66666666666669px 166.66666666666669px #1b9cfc;
}
.v3 {
  position: relative;
}
.v3::before {
  content: '';
  position: absolute;
  top: 36.66666666666667px;
  left: 36.66666666666667px;
  transform: translate(-50%, -50%);
  background-color: #25ccf7;
  width: 33.333333333333336px;
  height: 33.333333333333336px;
  box-shadow: 0px 0px #25ccf7, 0px 42.22222222222222px #25ccf7, 0px 84.44444444444444px #25ccf7, 0px 126.66666666666666px #25ccf7, 42.22222222222222px 0px #25ccf7, 42.22222222222222px 42.22222222222222px #25ccf7, 42.22222222222222px 84.44444444444444px #25ccf7, 42.22222222222222px 126.66666666666666px #25ccf7, 84.44444444444444px 0px #25ccf7, 84.44444444444444px 42.22222222222222px #25ccf7, 84.44444444444444px 84.44444444444444px #25ccf7, 84.44444444444444px 126.66666666666666px #25ccf7, 126.66666666666666px 0px #25ccf7, 126.66666666666666px 42.22222222222222px #25ccf7, 126.66666666666666px 84.44444444444444px #25ccf7, 126.66666666666666px 126.66666666666666px #25ccf7;
  border-radius: 50%;
}
.v4 {
  background: #fc427b;
}
.v4 {
  position: relative;
}
.v4::before {
  content: '';
  position: absolute;
  top: 16.666666666666668px;
  left: 16.666666666666668px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 33.333333333333336px;
  height: 33.333333333333336px;
  box-shadow: 0px 0px #fff, 0px 33.333333333333336px #fff, 0px 66.66666666666667px #fff, 0px 100px #fff, 0px 133.33333333333334px #fff, 0px 166.66666666666669px #fff, 33.333333333333336px 0px #fff, 33.333333333333336px 33.333333333333336px #fff, 33.333333333333336px 66.66666666666667px #fff, 33.333333333333336px 100px #fff, 33.333333333333336px 133.33333333333334px #fff, 33.333333333333336px 166.66666666666669px #fff, 66.66666666666667px 0px #fff, 66.66666666666667px 33.333333333333336px #fff, 66.66666666666667px 66.66666666666667px #fff, 66.66666666666667px 100px #fff, 66.66666666666667px 133.33333333333334px #fff, 66.66666666666667px 166.66666666666669px #fff, 100px 0px #fff, 100px 33.333333333333336px #fff, 100px 66.66666666666667px #fff, 100px 100px #fff, 100px 133.33333333333334px #fff, 100px 166.66666666666669px #fff, 133.33333333333334px 0px #fff, 133.33333333333334px 33.333333333333336px #fff, 133.33333333333334px 66.66666666666667px #fff, 133.33333333333334px 100px #fff, 133.33333333333334px 133.33333333333334px #fff, 133.33333333333334px 166.66666666666669px #fff, 166.66666666666669px 0px #fff, 166.66666666666669px 33.333333333333336px #fff, 166.66666666666669px 66.66666666666667px #fff, 166.66666666666669px 100px #fff, 166.66666666666669px 133.33333333333334px #fff, 166.66666666666669px 166.66666666666669px #fff;
  border-radius: 50%;
}
.v5 {
  background: #686de0;
}
.v5 {
  position: relative;
}
.v5::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 40px;
  height: 40px;
  box-shadow: 0px 0px #fff, 0px 40px #fff, 0px 80px #fff, 0px 120px #fff, 0px 160px #fff, 40px 0px #fff, 40px 40px #fff, 40px 80px #fff, 40px 120px #fff, 40px 160px #fff, 80px 0px #fff, 80px 40px #fff, 80px 80px #fff, 80px 120px #fff, 80px 160px #fff, 120px 0px #fff, 120px 40px #fff, 120px 80px #fff, 120px 120px #fff, 120px 160px #fff, 160px 0px #fff, 160px 40px #fff, 160px 80px #fff, 160px 120px #fff, 160px 160px #fff;
  border-radius: 50%;
}
.v5 {
  position: relative;
}
.v5::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #686de0;
  width: 13.333333333333334px;
  height: 13.333333333333334px;
  box-shadow: 0px 0px #686de0, 0px 20px #686de0, 0px 40px #686de0, 0px 60px #686de0, 0px 80px #686de0, 0px 100px #686de0, 0px 120px #686de0, 0px 140px #686de0, 0px 160px #686de0, 0px 180px #686de0, 20px 0px #686de0, 20px 20px #686de0, 20px 40px #686de0, 20px 60px #686de0, 20px 80px #686de0, 20px 100px #686de0, 20px 120px #686de0, 20px 140px #686de0, 20px 160px #686de0, 20px 180px #686de0, 40px 0px #686de0, 40px 20px #686de0, 40px 40px #686de0, 40px 60px #686de0, 40px 80px #686de0, 40px 100px #686de0, 40px 120px #686de0, 40px 140px #686de0, 40px 160px #686de0, 40px 180px #686de0, 60px 0px #686de0, 60px 20px #686de0, 60px 40px #686de0, 60px 60px #686de0, 60px 80px #686de0, 60px 100px #686de0, 60px 120px #686de0, 60px 140px #686de0, 60px 160px #686de0, 60px 180px #686de0, 80px 0px #686de0, 80px 20px #686de0, 80px 40px #686de0, 80px 60px #686de0, 80px 80px #686de0, 80px 100px #686de0, 80px 120px #686de0, 80px 140px #686de0, 80px 160px #686de0, 80px 180px #686de0, 100px 0px #686de0, 100px 20px #686de0, 100px 40px #686de0, 100px 60px #686de0, 100px 80px #686de0, 100px 100px #686de0, 100px 120px #686de0, 100px 140px #686de0, 100px 160px #686de0, 100px 180px #686de0, 120px 0px #686de0, 120px 20px #686de0, 120px 40px #686de0, 120px 60px #686de0, 120px 80px #686de0, 120px 100px #686de0, 120px 120px #686de0, 120px 140px #686de0, 120px 160px #686de0, 120px 180px #686de0, 140px 0px #686de0, 140px 20px #686de0, 140px 40px #686de0, 140px 60px #686de0, 140px 80px #686de0, 140px 100px #686de0, 140px 120px #686de0, 140px 140px #686de0, 140px 160px #686de0, 140px 180px #686de0, 160px 0px #686de0, 160px 20px #686de0, 160px 40px #686de0, 160px 60px #686de0, 160px 80px #686de0, 160px 100px #686de0, 160px 120px #686de0, 160px 140px #686de0, 160px 160px #686de0, 160px 180px #686de0, 180px 0px #686de0, 180px 20px #686de0, 180px 40px #686de0, 180px 60px #686de0, 180px 80px #686de0, 180px 100px #686de0, 180px 120px #686de0, 180px 140px #686de0, 180px 160px #686de0, 180px 180px #686de0;
  border-radius: 50%;
}
.v6 {
  background: #ff7675;
}
.v6 {
  position: relative;
}
.v6::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 40px;
  height: 40px;
  box-shadow: 0px 0px #fff, 0px 40px #fff, 0px 80px #fff, 0px 120px #fff, 0px 160px #fff, 40px 0px #fff, 40px 40px #fff, 40px 80px #fff, 40px 120px #fff, 40px 160px #fff, 80px 0px #fff, 80px 40px #fff, 80px 80px #fff, 80px 120px #fff, 80px 160px #fff, 120px 0px #fff, 120px 40px #fff, 120px 80px #fff, 120px 120px #fff, 120px 160px #fff, 160px 0px #fff, 160px 40px #fff, 160px 80px #fff, 160px 120px #fff, 160px 160px #fff;
  border-radius: 50%;
}
.v6 {
  position: relative;
}
.v6::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #ff7675;
  width: 13.333333333333334px;
  height: 13.333333333333334px;
  box-shadow: 0px 0px #ff7675, 0px 20px #ff7675, 0px 40px #ff7675, 0px 60px #ff7675, 0px 80px #ff7675, 0px 100px #ff7675, 0px 120px #ff7675, 0px 140px #ff7675, 0px 160px #ff7675, 0px 180px #ff7675, 20px 0px #ff7675, 20px 20px #ff7675, 20px 40px #ff7675, 20px 60px #ff7675, 20px 80px #ff7675, 20px 100px #ff7675, 20px 120px #ff7675, 20px 140px #ff7675, 20px 160px #ff7675, 20px 180px #ff7675, 40px 0px #ff7675, 40px 20px #ff7675, 40px 40px #ff7675, 40px 60px #ff7675, 40px 80px #ff7675, 40px 100px #ff7675, 40px 120px #ff7675, 40px 140px #ff7675, 40px 160px #ff7675, 40px 180px #ff7675, 60px 0px #ff7675, 60px 20px #ff7675, 60px 40px #ff7675, 60px 60px #ff7675, 60px 80px #ff7675, 60px 100px #ff7675, 60px 120px #ff7675, 60px 140px #ff7675, 60px 160px #ff7675, 60px 180px #ff7675, 80px 0px #ff7675, 80px 20px #ff7675, 80px 40px #ff7675, 80px 60px #ff7675, 80px 80px #ff7675, 80px 100px #ff7675, 80px 120px #ff7675, 80px 140px #ff7675, 80px 160px #ff7675, 80px 180px #ff7675, 100px 0px #ff7675, 100px 20px #ff7675, 100px 40px #ff7675, 100px 60px #ff7675, 100px 80px #ff7675, 100px 100px #ff7675, 100px 120px #ff7675, 100px 140px #ff7675, 100px 160px #ff7675, 100px 180px #ff7675, 120px 0px #ff7675, 120px 20px #ff7675, 120px 40px #ff7675, 120px 60px #ff7675, 120px 80px #ff7675, 120px 100px #ff7675, 120px 120px #ff7675, 120px 140px #ff7675, 120px 160px #ff7675, 120px 180px #ff7675, 140px 0px #ff7675, 140px 20px #ff7675, 140px 40px #ff7675, 140px 60px #ff7675, 140px 80px #ff7675, 140px 100px #ff7675, 140px 120px #ff7675, 140px 140px #ff7675, 140px 160px #ff7675, 140px 180px #ff7675, 160px 0px #ff7675, 160px 20px #ff7675, 160px 40px #ff7675, 160px 60px #ff7675, 160px 80px #ff7675, 160px 100px #ff7675, 160px 120px #ff7675, 160px 140px #ff7675, 160px 160px #ff7675, 160px 180px #ff7675, 180px 0px #ff7675, 180px 20px #ff7675, 180px 40px #ff7675, 180px 60px #ff7675, 180px 80px #ff7675, 180px 100px #ff7675, 180px 120px #ff7675, 180px 140px #ff7675, 180px 160px #ff7675, 180px 180px #ff7675;
}
.v7 {
  position: relative;
}
.v7::after {
  content: '';
  position: absolute;
  top: 20.833333333333336px;
  left: 20.833333333333336px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 33.333333333333336px;
  height: 33.333333333333336px;
  box-shadow: 0px 0px #fff, 0px 39.58333333333333px #fff, 0px 79.16666666666666px #fff, 0px 118.74999999999999px #fff, 0px 158.33333333333331px #fff, 39.58333333333333px 0px #fff, 39.58333333333333px 39.58333333333333px #fff, 39.58333333333333px 79.16666666666666px #fff, 39.58333333333333px 118.74999999999999px #fff, 39.58333333333333px 158.33333333333331px #fff, 79.16666666666666px 0px #fff, 79.16666666666666px 39.58333333333333px #fff, 79.16666666666666px 79.16666666666666px #fff, 79.16666666666666px 118.74999999999999px #fff, 79.16666666666666px 158.33333333333331px #fff, 118.74999999999999px 0px #fff, 118.74999999999999px 39.58333333333333px #fff, 118.74999999999999px 79.16666666666666px #fff, 118.74999999999999px 118.74999999999999px #fff, 118.74999999999999px 158.33333333333331px #fff, 158.33333333333331px 0px #fff, 158.33333333333331px 39.58333333333333px #fff, 158.33333333333331px 79.16666666666666px #fff, 158.33333333333331px 118.74999999999999px #fff, 158.33333333333331px 158.33333333333331px #fff;
  border-radius: 50%;
}
.v7 {
  position: relative;
}
.v7::before {
  content: '';
  position: absolute;
  top: 8.333333333333334px;
  left: 8.333333333333334px;
  transform: translate(-50%, -50%);
  background-color: #be2edd;
  width: 16.666666666666668px;
  height: 16.666666666666668px;
  box-shadow: 0px 0px #be2edd, 0px 20.37037037037037px #be2edd, 0px 40.74074074074074px #be2edd, 0px 61.111111111111114px #be2edd, 0px 81.48148148148148px #be2edd, 0px 101.85185185185185px #be2edd, 0px 122.22222222222223px #be2edd, 0px 142.59259259259258px #be2edd, 0px 162.96296296296296px #be2edd, 0px 183.33333333333334px #be2edd, 20.37037037037037px 0px #be2edd, 20.37037037037037px 20.37037037037037px #be2edd, 20.37037037037037px 40.74074074074074px #be2edd, 20.37037037037037px 61.111111111111114px #be2edd, 20.37037037037037px 81.48148148148148px #be2edd, 20.37037037037037px 101.85185185185185px #be2edd, 20.37037037037037px 122.22222222222223px #be2edd, 20.37037037037037px 142.59259259259258px #be2edd, 20.37037037037037px 162.96296296296296px #be2edd, 20.37037037037037px 183.33333333333334px #be2edd, 40.74074074074074px 0px #be2edd, 40.74074074074074px 20.37037037037037px #be2edd, 40.74074074074074px 40.74074074074074px #be2edd, 40.74074074074074px 61.111111111111114px #be2edd, 40.74074074074074px 81.48148148148148px #be2edd, 40.74074074074074px 101.85185185185185px #be2edd, 40.74074074074074px 122.22222222222223px #be2edd, 40.74074074074074px 142.59259259259258px #be2edd, 40.74074074074074px 162.96296296296296px #be2edd, 40.74074074074074px 183.33333333333334px #be2edd, 61.111111111111114px 0px #be2edd, 61.111111111111114px 20.37037037037037px #be2edd, 61.111111111111114px 40.74074074074074px #be2edd, 61.111111111111114px 61.111111111111114px #be2edd, 61.111111111111114px 81.48148148148148px #be2edd, 61.111111111111114px 101.85185185185185px #be2edd, 61.111111111111114px 122.22222222222223px #be2edd, 61.111111111111114px 142.59259259259258px #be2edd, 61.111111111111114px 162.96296296296296px #be2edd, 61.111111111111114px 183.33333333333334px #be2edd, 81.48148148148148px 0px #be2edd, 81.48148148148148px 20.37037037037037px #be2edd, 81.48148148148148px 40.74074074074074px #be2edd, 81.48148148148148px 61.111111111111114px #be2edd, 81.48148148148148px 81.48148148148148px #be2edd, 81.48148148148148px 101.85185185185185px #be2edd, 81.48148148148148px 122.22222222222223px #be2edd, 81.48148148148148px 142.59259259259258px #be2edd, 81.48148148148148px 162.96296296296296px #be2edd, 81.48148148148148px 183.33333333333334px #be2edd, 101.85185185185185px 0px #be2edd, 101.85185185185185px 20.37037037037037px #be2edd, 101.85185185185185px 40.74074074074074px #be2edd, 101.85185185185185px 61.111111111111114px #be2edd, 101.85185185185185px 81.48148148148148px #be2edd, 101.85185185185185px 101.85185185185185px #be2edd, 101.85185185185185px 122.22222222222223px #be2edd, 101.85185185185185px 142.59259259259258px #be2edd, 101.85185185185185px 162.96296296296296px #be2edd, 101.85185185185185px 183.33333333333334px #be2edd, 122.22222222222223px 0px #be2edd, 122.22222222222223px 20.37037037037037px #be2edd, 122.22222222222223px 40.74074074074074px #be2edd, 122.22222222222223px 61.111111111111114px #be2edd, 122.22222222222223px 81.48148148148148px #be2edd, 122.22222222222223px 101.85185185185185px #be2edd, 122.22222222222223px 122.22222222222223px #be2edd, 122.22222222222223px 142.59259259259258px #be2edd, 122.22222222222223px 162.96296296296296px #be2edd, 122.22222222222223px 183.33333333333334px #be2edd, 142.59259259259258px 0px #be2edd, 142.59259259259258px 20.37037037037037px #be2edd, 142.59259259259258px 40.74074074074074px #be2edd, 142.59259259259258px 61.111111111111114px #be2edd, 142.59259259259258px 81.48148148148148px #be2edd, 142.59259259259258px 101.85185185185185px #be2edd, 142.59259259259258px 122.22222222222223px #be2edd, 142.59259259259258px 142.59259259259258px #be2edd, 142.59259259259258px 162.96296296296296px #be2edd, 142.59259259259258px 183.33333333333334px #be2edd, 162.96296296296296px 0px #be2edd, 162.96296296296296px 20.37037037037037px #be2edd, 162.96296296296296px 40.74074074074074px #be2edd, 162.96296296296296px 61.111111111111114px #be2edd, 162.96296296296296px 81.48148148148148px #be2edd, 162.96296296296296px 101.85185185185185px #be2edd, 162.96296296296296px 122.22222222222223px #be2edd, 162.96296296296296px 142.59259259259258px #be2edd, 162.96296296296296px 162.96296296296296px #be2edd, 162.96296296296296px 183.33333333333334px #be2edd, 183.33333333333334px 0px #be2edd, 183.33333333333334px 20.37037037037037px #be2edd, 183.33333333333334px 40.74074074074074px #be2edd, 183.33333333333334px 61.111111111111114px #be2edd, 183.33333333333334px 81.48148148148148px #be2edd, 183.33333333333334px 101.85185185185185px #be2edd, 183.33333333333334px 122.22222222222223px #be2edd, 183.33333333333334px 142.59259259259258px #be2edd, 183.33333333333334px 162.96296296296296px #be2edd, 183.33333333333334px 183.33333333333334px #be2edd;
  border-radius: 50%;
}
.v8 {
  position: relative;
}
.v8::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #00a8ff;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #00a8ff, 0px 45px #00a8ff, 0px 90px #00a8ff, 0px 135px #00a8ff, 0px 180px #00a8ff, 45px 0px #00a8ff, 45px 45px #00a8ff, 45px 90px #00a8ff, 45px 135px #00a8ff, 45px 180px #00a8ff, 90px 0px #00a8ff, 90px 45px #00a8ff, 90px 90px #00a8ff, 90px 135px #00a8ff, 90px 180px #00a8ff, 135px 0px #00a8ff, 135px 45px #00a8ff, 135px 90px #00a8ff, 135px 135px #00a8ff, 135px 180px #00a8ff, 180px 0px #00a8ff, 180px 45px #00a8ff, 180px 90px #00a8ff, 180px 135px #00a8ff, 180px 180px #00a8ff;
  border-radius: 50%;
}
.v8 {
  position: relative;
}
.v8::after {
  content: '';
  position: absolute;
  top: 13.333333333333334px;
  left: 13.333333333333334px;
  transform: translate(-50%, -50%);
  background-color: #7ed6df;
  width: 13.333333333333334px;
  height: 13.333333333333334px;
  box-shadow: 0px 0px #7ed6df, 0px 19.25925925925926px #7ed6df, 0px 38.51851851851852px #7ed6df, 0px 57.77777777777778px #7ed6df, 0px 77.03703703703704px #7ed6df, 0px 96.2962962962963px #7ed6df, 0px 115.55555555555556px #7ed6df, 0px 134.8148148148148px #7ed6df, 0px 154.07407407407408px #7ed6df, 0px 173.33333333333334px #7ed6df, 19.25925925925926px 0px #7ed6df, 19.25925925925926px 19.25925925925926px #7ed6df, 19.25925925925926px 38.51851851851852px #7ed6df, 19.25925925925926px 57.77777777777778px #7ed6df, 19.25925925925926px 77.03703703703704px #7ed6df, 19.25925925925926px 96.2962962962963px #7ed6df, 19.25925925925926px 115.55555555555556px #7ed6df, 19.25925925925926px 134.8148148148148px #7ed6df, 19.25925925925926px 154.07407407407408px #7ed6df, 19.25925925925926px 173.33333333333334px #7ed6df, 38.51851851851852px 0px #7ed6df, 38.51851851851852px 19.25925925925926px #7ed6df, 38.51851851851852px 38.51851851851852px #7ed6df, 38.51851851851852px 57.77777777777778px #7ed6df, 38.51851851851852px 77.03703703703704px #7ed6df, 38.51851851851852px 96.2962962962963px #7ed6df, 38.51851851851852px 115.55555555555556px #7ed6df, 38.51851851851852px 134.8148148148148px #7ed6df, 38.51851851851852px 154.07407407407408px #7ed6df, 38.51851851851852px 173.33333333333334px #7ed6df, 57.77777777777778px 0px #7ed6df, 57.77777777777778px 19.25925925925926px #7ed6df, 57.77777777777778px 38.51851851851852px #7ed6df, 57.77777777777778px 57.77777777777778px #7ed6df, 57.77777777777778px 77.03703703703704px #7ed6df, 57.77777777777778px 96.2962962962963px #7ed6df, 57.77777777777778px 115.55555555555556px #7ed6df, 57.77777777777778px 134.8148148148148px #7ed6df, 57.77777777777778px 154.07407407407408px #7ed6df, 57.77777777777778px 173.33333333333334px #7ed6df, 77.03703703703704px 0px #7ed6df, 77.03703703703704px 19.25925925925926px #7ed6df, 77.03703703703704px 38.51851851851852px #7ed6df, 77.03703703703704px 57.77777777777778px #7ed6df, 77.03703703703704px 77.03703703703704px #7ed6df, 77.03703703703704px 96.2962962962963px #7ed6df, 77.03703703703704px 115.55555555555556px #7ed6df, 77.03703703703704px 134.8148148148148px #7ed6df, 77.03703703703704px 154.07407407407408px #7ed6df, 77.03703703703704px 173.33333333333334px #7ed6df, 96.2962962962963px 0px #7ed6df, 96.2962962962963px 19.25925925925926px #7ed6df, 96.2962962962963px 38.51851851851852px #7ed6df, 96.2962962962963px 57.77777777777778px #7ed6df, 96.2962962962963px 77.03703703703704px #7ed6df, 96.2962962962963px 96.2962962962963px #7ed6df, 96.2962962962963px 115.55555555555556px #7ed6df, 96.2962962962963px 134.8148148148148px #7ed6df, 96.2962962962963px 154.07407407407408px #7ed6df, 96.2962962962963px 173.33333333333334px #7ed6df, 115.55555555555556px 0px #7ed6df, 115.55555555555556px 19.25925925925926px #7ed6df, 115.55555555555556px 38.51851851851852px #7ed6df, 115.55555555555556px 57.77777777777778px #7ed6df, 115.55555555555556px 77.03703703703704px #7ed6df, 115.55555555555556px 96.2962962962963px #7ed6df, 115.55555555555556px 115.55555555555556px #7ed6df, 115.55555555555556px 134.8148148148148px #7ed6df, 115.55555555555556px 154.07407407407408px #7ed6df, 115.55555555555556px 173.33333333333334px #7ed6df, 134.8148148148148px 0px #7ed6df, 134.8148148148148px 19.25925925925926px #7ed6df, 134.8148148148148px 38.51851851851852px #7ed6df, 134.8148148148148px 57.77777777777778px #7ed6df, 134.8148148148148px 77.03703703703704px #7ed6df, 134.8148148148148px 96.2962962962963px #7ed6df, 134.8148148148148px 115.55555555555556px #7ed6df, 134.8148148148148px 134.8148148148148px #7ed6df, 134.8148148148148px 154.07407407407408px #7ed6df, 134.8148148148148px 173.33333333333334px #7ed6df, 154.07407407407408px 0px #7ed6df, 154.07407407407408px 19.25925925925926px #7ed6df, 154.07407407407408px 38.51851851851852px #7ed6df, 154.07407407407408px 57.77777777777778px #7ed6df, 154.07407407407408px 77.03703703703704px #7ed6df, 154.07407407407408px 96.2962962962963px #7ed6df, 154.07407407407408px 115.55555555555556px #7ed6df, 154.07407407407408px 134.8148148148148px #7ed6df, 154.07407407407408px 154.07407407407408px #7ed6df, 154.07407407407408px 173.33333333333334px #7ed6df, 173.33333333333334px 0px #7ed6df, 173.33333333333334px 19.25925925925926px #7ed6df, 173.33333333333334px 38.51851851851852px #7ed6df, 173.33333333333334px 57.77777777777778px #7ed6df, 173.33333333333334px 77.03703703703704px #7ed6df, 173.33333333333334px 96.2962962962963px #7ed6df, 173.33333333333334px 115.55555555555556px #7ed6df, 173.33333333333334px 134.8148148148148px #7ed6df, 173.33333333333334px 154.07407407407408px #7ed6df, 173.33333333333334px 173.33333333333334px #7ed6df;
}
.v9 {
  position: relative;
}
.v9::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #fff, 0px 40px #fff, 0px 80px #fff, 0px 120px #fff, 0px 160px #fff, 40px 0px #fff, 40px 40px #fff, 40px 80px #fff, 40px 120px #fff, 40px 160px #fff, 80px 0px #fff, 80px 40px #fff, 80px 80px #fff, 80px 120px #fff, 80px 160px #fff, 120px 0px #fff, 120px 40px #fff, 120px 80px #fff, 120px 120px #fff, 120px 160px #fff, 160px 0px #fff, 160px 40px #fff, 160px 80px #fff, 160px 120px #fff, 160px 160px #fff;
}
.v9 {
  position: relative;
}
.v9::before {
  content: '';
  position: absolute;
  top: 9.090909090909092px;
  left: 9.090909090909092px;
  transform: translate(-50%, -50%);
  background-color: #9c88ff;
  width: 18.181818181818183px;
  height: 18.181818181818183px;
  box-shadow: 0px 0px #9c88ff, 0px 20.2020202020202px #9c88ff, 0px 40.4040404040404px #9c88ff, 0px 60.6060606060606px #9c88ff, 0px 80.8080808080808px #9c88ff, 0px 101.01010101010101px #9c88ff, 0px 121.2121212121212px #9c88ff, 0px 141.4141414141414px #9c88ff, 0px 161.6161616161616px #9c88ff, 0px 181.8181818181818px #9c88ff, 20.2020202020202px 0px #9c88ff, 20.2020202020202px 20.2020202020202px #9c88ff, 20.2020202020202px 40.4040404040404px #9c88ff, 20.2020202020202px 60.6060606060606px #9c88ff, 20.2020202020202px 80.8080808080808px #9c88ff, 20.2020202020202px 101.01010101010101px #9c88ff, 20.2020202020202px 121.2121212121212px #9c88ff, 20.2020202020202px 141.4141414141414px #9c88ff, 20.2020202020202px 161.6161616161616px #9c88ff, 20.2020202020202px 181.8181818181818px #9c88ff, 40.4040404040404px 0px #9c88ff, 40.4040404040404px 20.2020202020202px #9c88ff, 40.4040404040404px 40.4040404040404px #9c88ff, 40.4040404040404px 60.6060606060606px #9c88ff, 40.4040404040404px 80.8080808080808px #9c88ff, 40.4040404040404px 101.01010101010101px #9c88ff, 40.4040404040404px 121.2121212121212px #9c88ff, 40.4040404040404px 141.4141414141414px #9c88ff, 40.4040404040404px 161.6161616161616px #9c88ff, 40.4040404040404px 181.8181818181818px #9c88ff, 60.6060606060606px 0px #9c88ff, 60.6060606060606px 20.2020202020202px #9c88ff, 60.6060606060606px 40.4040404040404px #9c88ff, 60.6060606060606px 60.6060606060606px #9c88ff, 60.6060606060606px 80.8080808080808px #9c88ff, 60.6060606060606px 101.01010101010101px #9c88ff, 60.6060606060606px 121.2121212121212px #9c88ff, 60.6060606060606px 141.4141414141414px #9c88ff, 60.6060606060606px 161.6161616161616px #9c88ff, 60.6060606060606px 181.8181818181818px #9c88ff, 80.8080808080808px 0px #9c88ff, 80.8080808080808px 20.2020202020202px #9c88ff, 80.8080808080808px 40.4040404040404px #9c88ff, 80.8080808080808px 60.6060606060606px #9c88ff, 80.8080808080808px 80.8080808080808px #9c88ff, 80.8080808080808px 101.01010101010101px #9c88ff, 80.8080808080808px 121.2121212121212px #9c88ff, 80.8080808080808px 141.4141414141414px #9c88ff, 80.8080808080808px 161.6161616161616px #9c88ff, 80.8080808080808px 181.8181818181818px #9c88ff, 101.01010101010101px 0px #9c88ff, 101.01010101010101px 20.2020202020202px #9c88ff, 101.01010101010101px 40.4040404040404px #9c88ff, 101.01010101010101px 60.6060606060606px #9c88ff, 101.01010101010101px 80.8080808080808px #9c88ff, 101.01010101010101px 101.01010101010101px #9c88ff, 101.01010101010101px 121.2121212121212px #9c88ff, 101.01010101010101px 141.4141414141414px #9c88ff, 101.01010101010101px 161.6161616161616px #9c88ff, 101.01010101010101px 181.8181818181818px #9c88ff, 121.2121212121212px 0px #9c88ff, 121.2121212121212px 20.2020202020202px #9c88ff, 121.2121212121212px 40.4040404040404px #9c88ff, 121.2121212121212px 60.6060606060606px #9c88ff, 121.2121212121212px 80.8080808080808px #9c88ff, 121.2121212121212px 101.01010101010101px #9c88ff, 121.2121212121212px 121.2121212121212px #9c88ff, 121.2121212121212px 141.4141414141414px #9c88ff, 121.2121212121212px 161.6161616161616px #9c88ff, 121.2121212121212px 181.8181818181818px #9c88ff, 141.4141414141414px 0px #9c88ff, 141.4141414141414px 20.2020202020202px #9c88ff, 141.4141414141414px 40.4040404040404px #9c88ff, 141.4141414141414px 60.6060606060606px #9c88ff, 141.4141414141414px 80.8080808080808px #9c88ff, 141.4141414141414px 101.01010101010101px #9c88ff, 141.4141414141414px 121.2121212121212px #9c88ff, 141.4141414141414px 141.4141414141414px #9c88ff, 141.4141414141414px 161.6161616161616px #9c88ff, 141.4141414141414px 181.8181818181818px #9c88ff, 161.6161616161616px 0px #9c88ff, 161.6161616161616px 20.2020202020202px #9c88ff, 161.6161616161616px 40.4040404040404px #9c88ff, 161.6161616161616px 60.6060606060606px #9c88ff, 161.6161616161616px 80.8080808080808px #9c88ff, 161.6161616161616px 101.01010101010101px #9c88ff, 161.6161616161616px 121.2121212121212px #9c88ff, 161.6161616161616px 141.4141414141414px #9c88ff, 161.6161616161616px 161.6161616161616px #9c88ff, 161.6161616161616px 181.8181818181818px #9c88ff, 181.8181818181818px 0px #9c88ff, 181.8181818181818px 20.2020202020202px #9c88ff, 181.8181818181818px 40.4040404040404px #9c88ff, 181.8181818181818px 60.6060606060606px #9c88ff, 181.8181818181818px 80.8080808080808px #9c88ff, 181.8181818181818px 101.01010101010101px #9c88ff, 181.8181818181818px 121.2121212121212px #9c88ff, 181.8181818181818px 141.4141414141414px #9c88ff, 181.8181818181818px 161.6161616161616px #9c88ff, 181.8181818181818px 181.8181818181818px #9c88ff;
}
.v10 {
  position: relative;
}
.v10::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  background-color: #ff6b6b;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #ff6b6b, 0px 40px #ff6b6b, 0px 80px #ff6b6b, 0px 120px #ff6b6b, 0px 160px #ff6b6b, 40px 0px #ff6b6b, 40px 40px #ff6b6b, 40px 80px #ff6b6b, 40px 120px #ff6b6b, 40px 160px #ff6b6b, 80px 0px #ff6b6b, 80px 40px #ff6b6b, 80px 80px #ff6b6b, 80px 120px #ff6b6b, 80px 160px #ff6b6b, 120px 0px #ff6b6b, 120px 40px #ff6b6b, 120px 80px #ff6b6b, 120px 120px #ff6b6b, 120px 160px #ff6b6b, 160px 0px #ff6b6b, 160px 40px #ff6b6b, 160px 80px #ff6b6b, 160px 120px #ff6b6b, 160px 160px #ff6b6b;
  mix-blend-mode: saturation;
}
.v10 {
  position: relative;
}
.v10::before {
  content: '';
  position: absolute;
  top: 9.090909090909092px;
  left: 9.090909090909092px;
  transform: translate(-50%, -50%);
  background-color: #f6e58d;
  width: 18.181818181818183px;
  height: 18.181818181818183px;
  box-shadow: 0px 0px #f6e58d, 0px 20.2020202020202px #f6e58d, 0px 40.4040404040404px #f6e58d, 0px 60.6060606060606px #f6e58d, 0px 80.8080808080808px #f6e58d, 0px 101.01010101010101px #f6e58d, 0px 121.2121212121212px #f6e58d, 0px 141.4141414141414px #f6e58d, 0px 161.6161616161616px #f6e58d, 0px 181.8181818181818px #f6e58d, 20.2020202020202px 0px #f6e58d, 20.2020202020202px 20.2020202020202px #f6e58d, 20.2020202020202px 40.4040404040404px #f6e58d, 20.2020202020202px 60.6060606060606px #f6e58d, 20.2020202020202px 80.8080808080808px #f6e58d, 20.2020202020202px 101.01010101010101px #f6e58d, 20.2020202020202px 121.2121212121212px #f6e58d, 20.2020202020202px 141.4141414141414px #f6e58d, 20.2020202020202px 161.6161616161616px #f6e58d, 20.2020202020202px 181.8181818181818px #f6e58d, 40.4040404040404px 0px #f6e58d, 40.4040404040404px 20.2020202020202px #f6e58d, 40.4040404040404px 40.4040404040404px #f6e58d, 40.4040404040404px 60.6060606060606px #f6e58d, 40.4040404040404px 80.8080808080808px #f6e58d, 40.4040404040404px 101.01010101010101px #f6e58d, 40.4040404040404px 121.2121212121212px #f6e58d, 40.4040404040404px 141.4141414141414px #f6e58d, 40.4040404040404px 161.6161616161616px #f6e58d, 40.4040404040404px 181.8181818181818px #f6e58d, 60.6060606060606px 0px #f6e58d, 60.6060606060606px 20.2020202020202px #f6e58d, 60.6060606060606px 40.4040404040404px #f6e58d, 60.6060606060606px 60.6060606060606px #f6e58d, 60.6060606060606px 80.8080808080808px #f6e58d, 60.6060606060606px 101.01010101010101px #f6e58d, 60.6060606060606px 121.2121212121212px #f6e58d, 60.6060606060606px 141.4141414141414px #f6e58d, 60.6060606060606px 161.6161616161616px #f6e58d, 60.6060606060606px 181.8181818181818px #f6e58d, 80.8080808080808px 0px #f6e58d, 80.8080808080808px 20.2020202020202px #f6e58d, 80.8080808080808px 40.4040404040404px #f6e58d, 80.8080808080808px 60.6060606060606px #f6e58d, 80.8080808080808px 80.8080808080808px #f6e58d, 80.8080808080808px 101.01010101010101px #f6e58d, 80.8080808080808px 121.2121212121212px #f6e58d, 80.8080808080808px 141.4141414141414px #f6e58d, 80.8080808080808px 161.6161616161616px #f6e58d, 80.8080808080808px 181.8181818181818px #f6e58d, 101.01010101010101px 0px #f6e58d, 101.01010101010101px 20.2020202020202px #f6e58d, 101.01010101010101px 40.4040404040404px #f6e58d, 101.01010101010101px 60.6060606060606px #f6e58d, 101.01010101010101px 80.8080808080808px #f6e58d, 101.01010101010101px 101.01010101010101px #f6e58d, 101.01010101010101px 121.2121212121212px #f6e58d, 101.01010101010101px 141.4141414141414px #f6e58d, 101.01010101010101px 161.6161616161616px #f6e58d, 101.01010101010101px 181.8181818181818px #f6e58d, 121.2121212121212px 0px #f6e58d, 121.2121212121212px 20.2020202020202px #f6e58d, 121.2121212121212px 40.4040404040404px #f6e58d, 121.2121212121212px 60.6060606060606px #f6e58d, 121.2121212121212px 80.8080808080808px #f6e58d, 121.2121212121212px 101.01010101010101px #f6e58d, 121.2121212121212px 121.2121212121212px #f6e58d, 121.2121212121212px 141.4141414141414px #f6e58d, 121.2121212121212px 161.6161616161616px #f6e58d, 121.2121212121212px 181.8181818181818px #f6e58d, 141.4141414141414px 0px #f6e58d, 141.4141414141414px 20.2020202020202px #f6e58d, 141.4141414141414px 40.4040404040404px #f6e58d, 141.4141414141414px 60.6060606060606px #f6e58d, 141.4141414141414px 80.8080808080808px #f6e58d, 141.4141414141414px 101.01010101010101px #f6e58d, 141.4141414141414px 121.2121212121212px #f6e58d, 141.4141414141414px 141.4141414141414px #f6e58d, 141.4141414141414px 161.6161616161616px #f6e58d, 141.4141414141414px 181.8181818181818px #f6e58d, 161.6161616161616px 0px #f6e58d, 161.6161616161616px 20.2020202020202px #f6e58d, 161.6161616161616px 40.4040404040404px #f6e58d, 161.6161616161616px 60.6060606060606px #f6e58d, 161.6161616161616px 80.8080808080808px #f6e58d, 161.6161616161616px 101.01010101010101px #f6e58d, 161.6161616161616px 121.2121212121212px #f6e58d, 161.6161616161616px 141.4141414141414px #f6e58d, 161.6161616161616px 161.6161616161616px #f6e58d, 161.6161616161616px 181.8181818181818px #f6e58d, 181.8181818181818px 0px #f6e58d, 181.8181818181818px 20.2020202020202px #f6e58d, 181.8181818181818px 40.4040404040404px #f6e58d, 181.8181818181818px 60.6060606060606px #f6e58d, 181.8181818181818px 80.8080808080808px #f6e58d, 181.8181818181818px 101.01010101010101px #f6e58d, 181.8181818181818px 121.2121212121212px #f6e58d, 181.8181818181818px 141.4141414141414px #f6e58d, 181.8181818181818px 161.6161616161616px #f6e58d, 181.8181818181818px 181.8181818181818px #f6e58d;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  padding: 0 40px;
  font-family: Arial;
  color: #576574;
  letter-spacing: 0.1em;
}
.info {
  margin: 3rem 0;
  text-align: center;
}
.info p {
  font-size: 0.8rem;
  margin-bottom: 0.5em;
}
.info h1,
.info h3 {
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 66.66666666666667px;
  place-items: center;
  margin: 4rem 0;
}