No JS: Beautiful Geometric Shapes

index.haml

.container
  .geoshape
    .spinner
      - (1..100).each do
        .dot

No JS: Beautiful Geometric Shapes.markdown

No JS: Beautiful Geometric Shapes

Change the degree throttle variables to change the drawn shape. Came upon this one by accident.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

body {
  background: #121212;
}

// change these factors for new shape.
// multiples of 180 work best
$x_factor_degs: 720; $y_factor_degs: 360;
// uncomment below for an atomic shape
//$x_factor_degs: 180; $y_factor_degs: 1280;

$dot_count: 100; // matches above .dot count haml
$dot_di: 6px; // dot diameter
$explode: $dot_di*8; // additional explode from center
$rotate_speed: 8s; // speed of rotation
$circle_speed: $rotate_speed/8; // speed of circle opacity animation

.geoshape {
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  perspective: 40px * $dot_count;
}

.dot {
  opacity: 0; height: $dot_di/2; width: $dot_di/2;
  position: absolute;
  background: white;
  border-radius: 50%;
  
  $apothem: ($dot_di / ( 2 * tan(180deg / $dot_count) )) + $explode;
  
  @for $i from 1 through $dot_count {
    $ratio: $i / $dot_count;
    $zero_ratio: ($i - 1) / $dot_count;
    $x: $zero_ratio * $x_factor_degs;
    $y: $zero_ratio * $y_factor_degs;

    &:nth-child(#{$i}) {
      transform: rotateX($x+deg) rotateY($y+deg) translateZ($apothem);
      animation-delay: $ratio * ($rotate_speed/2);
    }
  }

  animation-name: dot;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: $circle_speed;
}

.spinner {
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: $rotate_speed;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotateY(-180deg) rotateX(90deg);
}

@keyframes spin {
  0% { transform: rotateY(-120deg) rotateX(0deg); }
  100% { transform: rotateY(240deg) rotateX(-360deg); }
}

@keyframes dot {
  0% { opacity: 0.3; height: $dot_di/2; width: $dot_di/2; }
  50% { opacity: 1; height: $dot_di; width: $dot_di; }
  100% { opacity: 0.3; height: $dot_di/2; width: $dot_di/2; }
}