growing pythagoras tree | CSS

In this example below you will see how to do a growing pythagoras tree | CSS with some HTML / CSS and Javascript

example for a talk.

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

<head>
  <meta charset="UTF-8">
  <title>growing pythagoras tree | CSS</title>
  
  
  <link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>
<link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>

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

</head>

<body>

  
<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
              <div>
                <div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

Comments