blue hex helix candy (pure CSS 3D)

In this example below you will see how to do a blue hex helix candy (pure CSS 3D) with some HTML / CSS and Javascript

Live coded in 25 minutes on the 16th of September 2016. Mentioned in my CSS-Tricks article Things to Watch Out for When Working with CSS 3D. Tested and works crossbrowser. The hexagons are created by Jade-generated SVG. They are positioned in 3D with CSS 3D transforms which are animated with CSS keyframe animations. Inspired by this Shutterstock video:

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

<head>
  <meta charset="UTF-8">
  <title>blue hex helix candy (pure CSS 3D)</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! */
      @charset "UTF-8";
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 80em;
  background: radial-gradient(#19f, #01a);
  color: #1b7ef5;
}

polygon {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.helix {
  top: 50%;
  left: 50%;
}

.col {
  animation: rx 8s linear infinite;
}
.col:nth-child(1) {
  left: -42.625em;
  animation-delay: 0s;
}
.col:nth-child(1) use {
  animation-delay: -0.64s;
}
.col:nth-child(2) {
  left: -39.875em;
  animation-delay: -0.25s;
}
.col:nth-child(2) use {
  animation-delay: -4.16s;
}
.col:nth-child(3) {
  left: -37.125em;
  animation-delay: -0.5s;
}
.col:nth-child(3) use {
  animation-delay: -0.8s;
}
.col:nth-child(4) {
  left: -34.375em;
  animation-delay: -0.75s;
}
.col:nth-child(4) use {
  animation-delay: -0.88s;
}
.col:nth-child(5) {
  left: -31.625em;
  animation-delay: -1s;
}
.col:nth-child(5) use {
  animation-delay: -5.52s;
}
.col:nth-child(6) {
  left: -28.875em;
  animation-delay: -1.25s;
}
.col:nth-child(6) use {
  animation-delay: -0.88s;
}
.col:nth-child(7) {
  left: -26.125em;
  animation-delay: -1.5s;
}
.col:nth-child(7) use {
  animation-delay: -6.32s;
}
.col:nth-child(8) {
  left: -23.375em;
  animation-delay: -1.75s;
}
.col:nth-child(8) use {
  animation-delay: -6.4s;
}
.col:nth-child(9) {
  left: -20.625em;
  animation-delay: -2s;
}
.col:nth-child(9) use {
  animation-delay: -3.68s;
}
.col:nth-child(10) {
  left: -17.875em;
  animation-delay: -2.25s;
}
.col:nth-child(10) use {
  animation-delay: -6s;
}
.col:nth-child(11) {
  left: -15.125em;
  animation-delay: -2.5s;
}
.col:nth-child(11) use {
  animation-delay: -3.92s;
}
.col:nth-child(12) {
  left: -12.375em;
  animation-delay: -2.75s;
}
.col:nth-child(12) use {
  animation-delay: -3.76s;
}
.col:nth-child(13) {
  left: -9.625em;
  animation-delay: -3s;
}
.col:nth-child(13) use {
  animation-delay: -6.72s;
}
.col:nth-child(14) {
  left: -6.875em;
  animation-delay: -3.25s;
}
.col:nth-child(14) use {
  animation-delay: -0.8s;
}
.col:nth-child(15) {
  left: -4.125em;
  animation-delay: -3.5s;
}
.col:nth-child(15) use {
  animation-delay: -1.28s;
}
.col:nth-child(16) {
  left: -1.375em;
  animation-delay: -3.75s;
}
.col:nth-child(16) use {
  animation-delay: -5.84s;
}
.col:nth-child(17) {
  left: 1.375em;
  animation-delay: -4s;
}
.col:nth-child(17) use {
  animation-delay: -0.72s;
}
.col:nth-child(18) {
  left: 4.125em;
  animation-delay: -4.25s;
}
.col:nth-child(18) use {
  animation-delay: -1.68s;
}
.col:nth-child(19) {
  left: 6.875em;
  animation-delay: -4.5s;
}
.col:nth-child(19) use {
  animation-delay: -7.44s;
}
.col:nth-child(20) {
  left: 9.625em;
  animation-delay: -4.75s;
}
.col:nth-child(20) use {
  animation-delay: -4s;
}
.col:nth-child(21) {
  left: 12.375em;
  animation-delay: -5s;
}
.col:nth-child(21) use {
  animation-delay: -3.84s;
}
.col:nth-child(22) {
  left: 15.125em;
  animation-delay: -5.25s;
}
.col:nth-child(22) use {
  animation-delay: -7.44s;
}
.col:nth-child(23) {
  left: 17.875em;
  animation-delay: -5.5s;
}
.col:nth-child(23) use {
  animation-delay: -6.16s;
}
.col:nth-child(24) {
  left: 20.625em;
  animation-delay: -5.75s;
}
.col:nth-child(24) use {
  animation-delay: -3.36s;
}
.col:nth-child(25) {
  left: 23.375em;
  animation-delay: -6s;
}
.col:nth-child(25) use {
  animation-delay: -2.88s;
}
.col:nth-child(26) {
  left: 26.125em;
  animation-delay: -6.25s;
}
.col:nth-child(26) use {
  animation-delay: -5.36s;
}
.col:nth-child(27) {
  left: 28.875em;
  animation-delay: -6.5s;
}
.col:nth-child(27) use {
  animation-delay: -1.2s;
}
.col:nth-child(28) {
  left: 31.625em;
  animation-delay: -6.75s;
}
.col:nth-child(28) use {
  animation-delay: -2s;
}
.col:nth-child(29) {
  left: 34.375em;
  animation-delay: -7s;
}
.col:nth-child(29) use {
  animation-delay: -5.28s;
}
.col:nth-child(30) {
  left: 37.125em;
  animation-delay: -7.25s;
}
.col:nth-child(30) use {
  animation-delay: -0.96s;
}
.col:nth-child(31) {
  left: 39.875em;
  animation-delay: -7.5s;
}
.col:nth-child(31) use {
  animation-delay: -6.56s;
}
.col:nth-child(32) {
  left: 42.625em;
  animation-delay: -7.75s;
}
.col:nth-child(32) use {
  animation-delay: -3.28s;
}

@keyframes rx {
  to {
    transform: rotateX(1turn);
  }
}
.tile {
  animation: inherit;
  animation-direction: reverse;
}
[id='sh']:checked ~ .helix .tile {
  -webkit-filter: drop-shadow(1px 1px 1px #000);
  filter: drop-shadow(1px 1px 1px #000);
}
.tile:nth-child(1) {
  top: -9.625em;
}
.tile:nth-child(1) use {
  animation-duration: 3.54s;
}
.tile:nth-child(2) {
  top: -6.875em;
}
.tile:nth-child(2) use {
  animation-duration: 2.18s;
}
.tile:nth-child(3) {
  top: -4.125em;
}
.tile:nth-child(3) use {
  animation-duration: 4.02s;
}
.tile:nth-child(4) {
  top: -1.375em;
}
.tile:nth-child(4) use {
  animation-duration: 6.42s;
}
.tile:nth-child(5) {
  top: 1.375em;
}
.tile:nth-child(5) use {
  animation-duration: 7.54s;
}
.tile:nth-child(6) {
  top: 4.125em;
}
.tile:nth-child(6) use {
  animation-duration: 1.06s;
}
.tile:nth-child(7) {
  top: 6.875em;
}
.tile:nth-child(7) use {
  animation-duration: 5.86s;
}
.tile:nth-child(8) {
  top: 9.625em;
}
.tile:nth-child(8) use {
  animation-duration: 8.18s;
}
.tile > svg {
  margin: -1em;
  width: 2em;
  height: 2em;
  animation: inherit;
  animation-name: rz;
}
.tile use {
  animation: c 0s ease-in-out infinite alternate;
}

@keyframes rz {
  to {
    transform: rotate(1turn);
  }
}
@keyframes c {
  to {
    color: #18fefb;
  }
}
[type='checkbox'] {
  position: absolute;
  left: -100vw;
}
[type='checkbox'] + label {
  position: absolute;
  z-index: 2;
  border: solid 0 transparent;
  border-width: .125em 1em .25em;
  color: silver;
  font: 1.25em/2 trebuchet ms, verdana,  arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
[type='checkbox'] + label:before {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  top: 50%;
  left: 0;
  margin: -0.625em 0.3125em;
  border: solid 0.125em silver;
  padding: .25em;
  width: 1.25em;
  height: 1.25em;
  color: transparent;
  font: 900 1em/.5 sans-serif;
  text-indent: -.125em;
  transition: .3s ease-out;
  content: '✓';
}
[type='checkbox']:focus + label {
  outline: none;
}
[type='checkbox']:focus + label:before {
  border-color: cyan;
}
[type='checkbox']:checked + label, [type='checkbox']:checked + label:before {
  color: cyan;
}

    </style>

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

</head>

<body>

  
<input id="sh" type="checkbox"/>
<label for="sh">add shadows (can make Blink browsers laggy, breaks Edge)</label>
<svg width="0" height="0">
  <clipPath id="cp6">
    <polygon id="p6" points="2000,0 1000.0000000000002,1732.0508075688772 -999.9999999999995,1732.0508075688774 -2000,2.4492935982947065e-13 -1000.0000000000009,-1732.0508075688767 999.9999999999986,-1732.050807568878"></polygon>
  </clipPath>
  <symbol viewBox="-2000 -2000 4000 4000" id="s6">
    <use xlink:href="#p6" clip-path="url(#cp6)"></use>
  </symbol>
</svg>
<div class="helix">
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
  <div class="col">
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
    <div class="tile">
      <svg>
        <use xlink:href="#s6"></use>
      </svg>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/thebabydino/blue-hex-helix-candy-pure-css-3d-LRkGkR */
@charset "UTF-8";
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 80em;
  background: radial-gradient(#19f, #01a);
  color: #1b7ef5;
}

polygon {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.helix {
  top: 50%;
  left: 50%;
}

.col {
  animation: rx 8s linear infinite;
}
.col:nth-child(1) {
  left: -42.625em;
  animation-delay: 0s;
}
.col:nth-child(1) use {
  animation-delay: -0.64s;
}
.col:nth-child(2) {
  left: -39.875em;
  animation-delay: -0.25s;
}
.col:nth-child(2) use {
  animation-delay: -4.16s;
}
.col:nth-child(3) {
  left: -37.125em;
  animation-delay: -0.5s;
}
.col:nth-child(3) use {
  animation-delay: -0.8s;
}
.col:nth-child(4) {
  left: -34.375em;
  animation-delay: -0.75s;
}
.col:nth-child(4) use {
  animation-delay: -0.88s;
}
.col:nth-child(5) {
  left: -31.625em;
  animation-delay: -1s;
}
.col:nth-child(5) use {
  animation-delay: -5.52s;
}
.col:nth-child(6) {
  left: -28.875em;
  animation-delay: -1.25s;
}
.col:nth-child(6) use {
  animation-delay: -0.88s;
}
.col:nth-child(7) {
  left: -26.125em;
  animation-delay: -1.5s;
}
.col:nth-child(7) use {
  animation-delay: -6.32s;
}
.col:nth-child(8) {
  left: -23.375em;
  animation-delay: -1.75s;
}
.col:nth-child(8) use {
  animation-delay: -6.4s;
}
.col:nth-child(9) {
  left: -20.625em;
  animation-delay: -2s;
}
.col:nth-child(9) use {
  animation-delay: -3.68s;
}
.col:nth-child(10) {
  left: -17.875em;
  animation-delay: -2.25s;
}
.col:nth-child(10) use {
  animation-delay: -6s;
}
.col:nth-child(11) {
  left: -15.125em;
  animation-delay: -2.5s;
}
.col:nth-child(11) use {
  animation-delay: -3.92s;
}
.col:nth-child(12) {
  left: -12.375em;
  animation-delay: -2.75s;
}
.col:nth-child(12) use {
  animation-delay: -3.76s;
}
.col:nth-child(13) {
  left: -9.625em;
  animation-delay: -3s;
}
.col:nth-child(13) use {
  animation-delay: -6.72s;
}
.col:nth-child(14) {
  left: -6.875em;
  animation-delay: -3.25s;
}
.col:nth-child(14) use {
  animation-delay: -0.8s;
}
.col:nth-child(15) {
  left: -4.125em;
  animation-delay: -3.5s;
}
.col:nth-child(15) use {
  animation-delay: -1.28s;
}
.col:nth-child(16) {
  left: -1.375em;
  animation-delay: -3.75s;
}
.col:nth-child(16) use {
  animation-delay: -5.84s;
}
.col:nth-child(17) {
  left: 1.375em;
  animation-delay: -4s;
}
.col:nth-child(17) use {
  animation-delay: -0.72s;
}
.col:nth-child(18) {
  left: 4.125em;
  animation-delay: -4.25s;
}
.col:nth-child(18) use {
  animation-delay: -1.68s;
}
.col:nth-child(19) {
  left: 6.875em;
  animation-delay: -4.5s;
}
.col:nth-child(19) use {
  animation-delay: -7.44s;
}
.col:nth-child(20) {
  left: 9.625em;
  animation-delay: -4.75s;
}
.col:nth-child(20) use {
  animation-delay: -4s;
}
.col:nth-child(21) {
  left: 12.375em;
  animation-delay: -5s;
}
.col:nth-child(21) use {
  animation-delay: -3.84s;
}
.col:nth-child(22) {
  left: 15.125em;
  animation-delay: -5.25s;
}
.col:nth-child(22) use {
  animation-delay: -7.44s;
}
.col:nth-child(23) {
  left: 17.875em;
  animation-delay: -5.5s;
}
.col:nth-child(23) use {
  animation-delay: -6.16s;
}
.col:nth-child(24) {
  left: 20.625em;
  animation-delay: -5.75s;
}
.col:nth-child(24) use {
  animation-delay: -3.36s;
}
.col:nth-child(25) {
  left: 23.375em;
  animation-delay: -6s;
}
.col:nth-child(25) use {
  animation-delay: -2.88s;
}
.col:nth-child(26) {
  left: 26.125em;
  animation-delay: -6.25s;
}
.col:nth-child(26) use {
  animation-delay: -5.36s;
}
.col:nth-child(27) {
  left: 28.875em;
  animation-delay: -6.5s;
}
.col:nth-child(27) use {
  animation-delay: -1.2s;
}
.col:nth-child(28) {
  left: 31.625em;
  animation-delay: -6.75s;
}
.col:nth-child(28) use {
  animation-delay: -2s;
}
.col:nth-child(29) {
  left: 34.375em;
  animation-delay: -7s;
}
.col:nth-child(29) use {
  animation-delay: -5.28s;
}
.col:nth-child(30) {
  left: 37.125em;
  animation-delay: -7.25s;
}
.col:nth-child(30) use {
  animation-delay: -0.96s;
}
.col:nth-child(31) {
  left: 39.875em;
  animation-delay: -7.5s;
}
.col:nth-child(31) use {
  animation-delay: -6.56s;
}
.col:nth-child(32) {
  left: 42.625em;
  animation-delay: -7.75s;
}
.col:nth-child(32) use {
  animation-delay: -3.28s;
}

@keyframes rx {
  to {
    transform: rotateX(1turn);
  }
}
.tile {
  animation: inherit;
  animation-direction: reverse;
}
[id='sh']:checked ~ .helix .tile {
  -webkit-filter: drop-shadow(1px 1px 1px #000);
  filter: drop-shadow(1px 1px 1px #000);
}
.tile:nth-child(1) {
  top: -9.625em;
}
.tile:nth-child(1) use {
  animation-duration: 3.54s;
}
.tile:nth-child(2) {
  top: -6.875em;
}
.tile:nth-child(2) use {
  animation-duration: 2.18s;
}
.tile:nth-child(3) {
  top: -4.125em;
}
.tile:nth-child(3) use {
  animation-duration: 4.02s;
}
.tile:nth-child(4) {
  top: -1.375em;
}
.tile:nth-child(4) use {
  animation-duration: 6.42s;
}
.tile:nth-child(5) {
  top: 1.375em;
}
.tile:nth-child(5) use {
  animation-duration: 7.54s;
}
.tile:nth-child(6) {
  top: 4.125em;
}
.tile:nth-child(6) use {
  animation-duration: 1.06s;
}
.tile:nth-child(7) {
  top: 6.875em;
}
.tile:nth-child(7) use {
  animation-duration: 5.86s;
}
.tile:nth-child(8) {
  top: 9.625em;
}
.tile:nth-child(8) use {
  animation-duration: 8.18s;
}
.tile > svg {
  margin: -1em;
  width: 2em;
  height: 2em;
  animation: inherit;
  animation-name: rz;
}
.tile use {
  animation: c 0s ease-in-out infinite alternate;
}

@keyframes rz {
  to {
    transform: rotate(1turn);
  }
}
@keyframes c {
  to {
    color: #18fefb;
  }
}
[type='checkbox'] {
  position: absolute;
  left: -100vw;
}
[type='checkbox'] + label {
  position: absolute;
  z-index: 2;
  border: solid 0 transparent;
  border-width: .125em 1em .25em;
  color: silver;
  font: 1.25em/2 trebuchet ms, verdana,  arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
[type='checkbox'] + label:before {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  top: 50%;
  left: 0;
  margin: -0.625em 0.3125em;
  border: solid 0.125em silver;
  padding: .25em;
  width: 1.25em;
  height: 1.25em;
  color: transparent;
  font: 900 1em/.5 sans-serif;
  text-indent: -.125em;
  transition: .3s ease-out;
  content: '✓';
}
[type='checkbox']:focus + label {
  outline: none;
}
[type='checkbox']:focus + label:before {
  border-color: cyan;
}
[type='checkbox']:checked + label, [type='checkbox']:checked + label:before {
  color: cyan;
}

Comments