LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  overflow: hidden;
  background-color: #423124;
}

div {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 100px;
  position: absolute;
  bottom: 5%;
  left: 50%;
  height: 1.5em;
  width: 0.1875em;
  transform-origin: 100% 100%;
  background: #9340bf;
  -webkit-box-reflect: left -0.1875em;
  border-radius: 0px;
}
div div {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 0.7071067812em;
  left: 0;
  bottom: 100%;
  transform: rotate(-45deg);
  will-change: transform;
  animation-name: branchesmove;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div {
  will-change: transform;
  animation-name: branchesmove2;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div div {
  will-change: transform;
  animation-name: branchesmove3;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div div div {
  will-change: transform;
  animation-name: branchesmove4;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div div div div {
  will-change: transform;
  animation-name: branchesmove5;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div div div div div {
  will-change: transform;
  animation-name: branchesmove6;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div div div div div div {
  will-change: transform;
  animation-name: branchesmove6;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
div div div div div div div div div {
  will-change: transform;
  animation-name: branchesmove6;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes branchesmove {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes branchesmove1 {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes branchesmove2 {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes branchesmove3 {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes branchesmove4 {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes branchesmove5 {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes branchesmove6 {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
JS
//The Pythagoras tree is a plane fractal constructed from squares.

// each triple of touching squares encloses a right triangle
//in a configuration traditionally used to depict the Pythagorean theorem

//If we nest divs inside each other recursively(definind a function within itself) we get a basic structure of a fractal. Each child is related to it's parent and also behaves the same way. It extends it's parent to the top left and is tilted to form an equilateral right triangle. to position the divs correctly we need to get the correct size, move the divs to the edge of it's parent and finally rotate them.

//contraction mapping principle
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv