JSFiddle - React, Tailwind, and code Playground

Octagram recurss.github

by schrodingers

CSS

body {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: #000;
  transform: translateY(50%);
}

div {
  /* border-radius: 50% 20% 50% 20%; */
  border: 3px solid white;
  background: black;
  animation-direction: alternate;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

/* 
div {
  width: calc(100% + 0.1em);
  height: calc(100% + 0.1em);
  background: linear-gradient(-45deg, #0ff4, #f0f3);
  transform-style: preserve-3d;
  transform: translateZ(-0.5em) rotate(16deg);
}

@keyframes spin {
  from {
    transform: rotateX(70deg) rotateZ(0);
  }
  to {
    transform: rotateX(70deg) rotateZ(360deg);
  }
}
 */

JavaScript

var body = document.body;
var parent = body;
for (var i = 0; i < 50; ++i) {
  var newNode = document.createElement('div');
  parent.appendChild(newNode);
  parent = newNode;
}