Gordon Walters' Tawa... in CSS

In this example below you will see how to do a Gordon Walters' Tawa... in CSS with some HTML / CSS and Javascript

An iconic New Zealand painting, Tawa, created by Gordon Walters in 1969. I absolutely adore Walters' use of minimalism and Maori art to create something uniquely modern New Zealand.

Thumbnail
This awesome code was written by pathogen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pathogen ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Gordon Walters' Tawa... in CSS</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  background: #333;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.container {
  width: 19.2em;
  margin-left: auto;
  margin-right: auto;
  background: ivory;
  height: 27.2em;
  margin: auto;
  padding: 1.6em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 22.4em;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.tawa {
  width: 19.2em;
  margin-left: auto;
  margin-right: auto;
  width: 19.2em;
  float: left;
  height: 100%;
  list-style-type: none;
}
.tawa:after {
  content: " ";
  display: block;
  clear: both;
}

.title {
  width: 19.2em;
  float: left;
  background: #333;
  color: ivory;
  margin-top: 3.2em;
  text-align: center;
}
.title a {
  color: ivory;
  text-decoration: none;
}
.title a:hover {
  color: tomato;
  transition: color .333s;
}

.tawa__row {
  width: 19.2em;
  margin-left: auto;
  margin-right: auto;
  width: 19.2em;
  float: left;
  height: 0.8em;
}
.tawa__row:after {
  content: " ";
  display: block;
  clear: both;
}

.tawa__row:nth-of-type(odd) {
  background: ivory;
}
.tawa__row:nth-of-type(odd) .tawa__row .tawa__row-bar,
.tawa__row:nth-of-type(odd) .tawa__row--circle-right,
.tawa__row:nth-of-type(odd) .tawa__row--circle-left,
.tawa__row:nth-of-type(odd) .tawa__row--circle {
  background: black;
}
.tawa__row:nth-of-type(odd) .tawa__row--circle-right::before,
.tawa__row:nth-of-type(odd) .tawa__row--circle-right::after,
.tawa__row:nth-of-type(odd) .tawa__row--circle-left::before,
.tawa__row:nth-of-type(odd) .tawa__row--circle-left::after,
.tawa__row:nth-of-type(odd) .tawa__row--circle::after {
  background: ivory;
}
.tawa__row:nth-of-type(odd) .tawa__row--circle-red {
  background: black;
}
.tawa__row:nth-of-type(odd) .tawa__row--circle-red::after {
  background: tomato;
}

.tawa__row:nth-of-type(even) {
  background: black;
}
.tawa__row:nth-of-type(even) .tawa__row .tawa__row-bar,
.tawa__row:nth-of-type(even) .tawa__row--circle-right,
.tawa__row:nth-of-type(even) .tawa__row--circle-left,
.tawa__row:nth-of-type(even) .tawa__row--circle {
  background: ivory;
}
.tawa__row:nth-of-type(even) .tawa__row--circle-right::before,
.tawa__row:nth-of-type(even) .tawa__row--circle-right::after,
.tawa__row:nth-of-type(even) .tawa__row--circle-left::before,
.tawa__row:nth-of-type(even) .tawa__row--circle-left::after,
.tawa__row:nth-of-type(even) .tawa__row--circle::after {
  background: black;
}
.tawa__row:nth-of-type(even) .tawa__row--circle-red {
  background: ivory;
}
.tawa__row:nth-of-type(even) .tawa__row--circle-red::after {
  background: tomato;
}

.tawa__row--bar-1,
.tawa__row--bar-2,
.tawa__row--bar-3,
.tawa__row--bar-4,
.tawa__row--bar-5,
.tawa__row--bar-6 {
  float: left;
  height: 0.8em;
}

.tawa__row--bar-1 {
  width: 1.6em;
  float: left;
}

.tawa__row--bar-2 {
  width: 3.2em;
  float: left;
}

.tawa__row--bar-3 {
  width: 4.8em;
  float: left;
}

.tawa__row--bar-4 {
  width: 6.4em;
  float: left;
}

.tawa__row--bar-5 {
  width: 8em;
  float: left;
}

.tawa__row--bar-6 {
  width: 9.6em;
  float: left;
}

.tawa__row--circle-right {
  width: 1.6em;
  float: left;
  float: left;
  height: 0.8em;
  position: relative;
}
.tawa__row--circle-right::before {
  width: 0.8em;
  float: left;
  content: '';
  height: 0.8em;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tawa__row--circle-right::after {
  width: 1.44em;
  float: left;
  border-radius: 50%;
  content: '';
  height: 1.44em;
  position: absolute;
  left: 0;
  bottom: 0em;
}

.tawa__row--circle-left {
  width: 1.6em;
  float: left;
  float: left;
  height: 0.8em;
  position: relative;
}
.tawa__row--circle-left::before {
  width: 0.8em;
  float: left;
  content: '';
  height: 0.8em;
  position: absolute;
  bottom: 0;
  left: 0.8em;
}
.tawa__row--circle-left::after {
  width: 1.44em;
  float: left;
  border-radius: 50%;
  content: '';
  height: 1.44em;
  position: absolute;
  bottom: 0em;
  left: 0.16em;
}

.tawa__row--circle,
.tawa__row--circle-red {
  width: 1.6em;
  float: left;
  float: left;
  height: 0.8em;
  position: relative;
}
.tawa__row--circle::after,
.tawa__row--circle-red::after {
  width: 1.44em;
  float: left;
  border-radius: 50%;
  content: '';
  height: 1.44em;
  position: absolute;
  bottom: 0em;
  left: 0.08em;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  
<div class="container">
  <div class="tawa">
    <div class="tawa__row"></div>
    <div class="tawa__row">
      <div class="tawa__row--bar-2"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-red"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-6"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-3"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-6"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-3"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-red"></div>
      <div class="tawa__row--circle-red"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-3"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-3"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-6"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-red"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-3"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-6"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-6"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-3"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-6"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-red"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-3"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-3"></div>
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-3"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--circle"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
      <div class="tawa__row--bar-5"></div>
      <div class="tawa__row--circle-right"></div>
    </div>
    <div class="tawa__row">
      <div class="tawa__row--bar-6"></div>
      <div class="tawa__row--circle-right"></div>
      <div class="tawa__row--circle-left"></div>
      <div class="tawa__row--bar-4"></div>
    </div>
  </div>
  <div class="title"><a href="http://en.wikipedia.org/wiki/Gordon_Walters" target="_blank">Gordon Walters</a> <a href="http://arts.tepapa.govt.nz/on-the-wall/tawa/4046" target="_blank"><i>Tawa</i>. 1969</a></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pathogen/gordon-waltersandapos-tawa-in-css-GgYVYM */
html {
  background: #333;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.container {
  width: 19.2em;
  margin-left: auto;
  margin-right: auto;
  background: ivory;
  height: 27.2em;
  margin: auto;
  padding: 1.6em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 22.4em;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.tawa {
  width: 19.2em;
  margin-left: auto;
  margin-right: auto;
  width: 19.2em;
  float: left;
  height: 100%;
  list-style-type: none;
}
.tawa:after {
  content: " ";
  display: block;
  clear: both;
}

.title {
  width: 19.2em;
  float: left;
  background: #333;
  color: ivory;
  margin-top: 3.2em;
  text-align: center;
}
.title a {
  color: ivory;
  text-decoration: none;
}
.title a:hover {
  color: tomato;
  transition: color .333s;
}

.tawa__row {
  width: 19.2em;
  margin-left: auto;
  margin-right: auto;
  width: 19.2em;
  float: left;
  height: 0.8em;
}
.tawa__row:after {
  content: " ";
  display: block;
  clear: both;
}

.tawa__row:nth-of-type(odd) {
  background: ivory;
}
.tawa__row:nth-of-type(odd) .tawa__row .tawa__row-bar,
.tawa__row:nth-of-type(odd) .tawa__row--circle-right,
.tawa__row:nth-of-type(odd) .tawa__row--circle-left,
.tawa__row:nth-of-type(odd) .tawa__row--circle {
  background: black;
}
.tawa__row:nth-of-type(odd) .tawa__row--circle-right::before,
.tawa__row:nth-of-type(odd) .tawa__row--circle-right::after,
.tawa__row:nth-of-type(odd) .tawa__row--circle-left::before,
.tawa__row:nth-of-type(odd) .tawa__row--circle-left::after,
.tawa__row:nth-of-type(odd) .tawa__row--circle::after {
  background: ivory;
}
.tawa__row:nth-of-type(odd) .tawa__row--circle-red {
  background: black;
}
.tawa__row:nth-of-type(odd) .tawa__row--circle-red::after {
  background: tomato;
}

.tawa__row:nth-of-type(even) {
  background: black;
}
.tawa__row:nth-of-type(even) .tawa__row .tawa__row-bar,
.tawa__row:nth-of-type(even) .tawa__row--circle-right,
.tawa__row:nth-of-type(even) .tawa__row--circle-left,
.tawa__row:nth-of-type(even) .tawa__row--circle {
  background: ivory;
}
.tawa__row:nth-of-type(even) .tawa__row--circle-right::before,
.tawa__row:nth-of-type(even) .tawa__row--circle-right::after,
.tawa__row:nth-of-type(even) .tawa__row--circle-left::before,
.tawa__row:nth-of-type(even) .tawa__row--circle-left::after,
.tawa__row:nth-of-type(even) .tawa__row--circle::after {
  background: black;
}
.tawa__row:nth-of-type(even) .tawa__row--circle-red {
  background: ivory;
}
.tawa__row:nth-of-type(even) .tawa__row--circle-red::after {
  background: tomato;
}

.tawa__row--bar-1,
.tawa__row--bar-2,
.tawa__row--bar-3,
.tawa__row--bar-4,
.tawa__row--bar-5,
.tawa__row--bar-6 {
  float: left;
  height: 0.8em;
}

.tawa__row--bar-1 {
  width: 1.6em;
  float: left;
}

.tawa__row--bar-2 {
  width: 3.2em;
  float: left;
}

.tawa__row--bar-3 {
  width: 4.8em;
  float: left;
}

.tawa__row--bar-4 {
  width: 6.4em;
  float: left;
}

.tawa__row--bar-5 {
  width: 8em;
  float: left;
}

.tawa__row--bar-6 {
  width: 9.6em;
  float: left;
}

.tawa__row--circle-right {
  width: 1.6em;
  float: left;
  float: left;
  height: 0.8em;
  position: relative;
}
.tawa__row--circle-right::before {
  width: 0.8em;
  float: left;
  content: '';
  height: 0.8em;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tawa__row--circle-right::after {
  width: 1.44em;
  float: left;
  border-radius: 50%;
  content: '';
  height: 1.44em;
  position: absolute;
  left: 0;
  bottom: 0em;
}

.tawa__row--circle-left {
  width: 1.6em;
  float: left;
  float: left;
  height: 0.8em;
  position: relative;
}
.tawa__row--circle-left::before {
  width: 0.8em;
  float: left;
  content: '';
  height: 0.8em;
  position: absolute;
  bottom: 0;
  left: 0.8em;
}
.tawa__row--circle-left::after {
  width: 1.44em;
  float: left;
  border-radius: 50%;
  content: '';
  height: 1.44em;
  position: absolute;
  bottom: 0em;
  left: 0.16em;
}

.tawa__row--circle,
.tawa__row--circle-red {
  width: 1.6em;
  float: left;
  float: left;
  height: 0.8em;
  position: relative;
}
.tawa__row--circle::after,
.tawa__row--circle-red::after {
  width: 1.44em;
  float: left;
  border-radius: 50%;
  content: '';
  height: 1.44em;
  position: absolute;
  bottom: 0em;
  left: 0.08em;
}

Comments