<html>

<head></head>

<body>

  <section>
    <div class="info"><span style="margin: 60px">CSS3 background patterns inspired by the artist <a href="http://yayoi-kusama.jp/e/information/index.html">Yayoi Kusama</a></span></div>
    <div class="seven"></div>
    <div class="six"></div>
    <div class="five"></div>
    <div class="four"></div>
    <div class="three"></div>
    <div class="two"></div>
    <div class="one"></div>
  </section>
</body>

</html>
/* CSS3 patterns inspired by artist /*Yayoi Kusama*/
/*https://24ways.org/2011/css3-patterns-explained */

body {
  margin: 0;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
div {
  width: 400px;
  height: 400px;
}

div.info {
  background: #fe0579;
  background: radial-gradient(circle, #fe0579 49.5%, transparent 50%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

div.one {
  background: radial-gradient(circle, black 30%, transparent 31%),
    radial-gradient(circle, black 19%, #ffc302 21%) 50px 40px;
  background-size: 100px 100px;
}

div.two {
  background: radial-gradient(circle, #118383 30.9%, transparent 31%),
    radial-gradient(circle, black 20%, #74d48a 21%) 23px 100px;
  background-size: 200px 200px;
}

div.three {
  background: #d7010d; /*fallback*/
  background: radial-gradient(circle, white 30%, transparent 31%),
    radial-gradient(circle, white 19%, #d7010d 21%) 50px 50px;
  background-size: 100px 100px;
}

div.four {
  background: radial-gradient(circle, black 30.9%, transparent 31%),
    radial-gradient(circle, black 20.9%, #ffc302 21%) 50px 50px;
}

div.five {
  /*http://www.artnet.com/artists/yayoi-kusama/pumpkin-bb-c-a-5EQ52qYeKE8rthunukPtOQ2*/
  background: #2a6197; /*fallback*/
  background: radial-gradient(circle, black 30%, transparent 31%),
    radial-gradient(circle, black 20%, #2a6197 21%) 60px 55px;
  background-size: 100px 100px;
}

div.six {
  background: #E10159;
  background: radial-gradient(circle, black 58%, transparent 60%),
    radial-gradient(circle, black 38%, #E10159 40%) 50px 50px;
  background-size: 100px 100px;
}

div.seven {
  background-color: black;
  background-image: radial-gradient(circle, white 8%, transparent 10%),
    radial-gradient(circle, white 38%, transparent 40%);
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.