Color Animation Experiment - 2

In this example below you will see how to do a Color Animation Experiment - 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by joshuar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright joshuar ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Color Animation  Experiment - 2</title>
  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="main"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/joshuar/color-animation-experiment-2-RWVKgP */
body {
  background-color: whitesmoke;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.section-header {
  display: none;
}

/* Colors list*/
.colors {
  padding: 0;
}

/* Color list item*/
.color {
  list-style-type: none;
  position: absolute;
  transform-origin: 50% 0%;
  width: 2.1vw;
  height: 10%;
  top: 45%;
}

/* Color animation + stagger */
.color-0 {
  left: 22vw;
  transform-origin: 100% 00%;
  animation: twist-0 infinite 3.5s linear 0s;
}

@keyframes twist-0 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-1 {
  left: 22.35vw;
  transform-origin: 100% 00%;
  animation: twist-1 infinite 3.5s linear 0.01s;
}

@keyframes twist-1 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-2 {
  left: 22.7vw;
  transform-origin: 100% 00%;
  animation: twist-2 infinite 3.5s linear 0.02s;
}

@keyframes twist-2 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-3 {
  left: 23.05vw;
  transform-origin: 100% 00%;
  animation: twist-3 infinite 3.5s linear 0.03s;
}

@keyframes twist-3 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-4 {
  left: 23.4vw;
  transform-origin: 100% 00%;
  animation: twist-4 infinite 3.5s linear 0.04s;
}

@keyframes twist-4 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-5 {
  left: 23.75vw;
  transform-origin: 100% 00%;
  animation: twist-5 infinite 3.5s linear 0.05s;
}

@keyframes twist-5 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-6 {
  left: 24.1vw;
  transform-origin: 100% 00%;
  animation: twist-6 infinite 3.5s linear 0.06s;
}

@keyframes twist-6 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-7 {
  left: 24.45vw;
  transform-origin: 100% 00%;
  animation: twist-7 infinite 3.5s linear 0.07s;
}

@keyframes twist-7 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-8 {
  left: 24.8vw;
  transform-origin: 100% 00%;
  animation: twist-8 infinite 3.5s linear 0.08s;
}

@keyframes twist-8 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-9 {
  left: 25.15vw;
  transform-origin: 100% 00%;
  animation: twist-9 infinite 3.5s linear 0.09s;
}

@keyframes twist-9 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-10 {
  left: 25.5vw;
  transform-origin: 100% 00%;
  animation: twist-10 infinite 3.5s linear 0.1s;
}

@keyframes twist-10 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-11 {
  left: 25.85vw;
  transform-origin: 100% 00%;
  animation: twist-11 infinite 3.5s linear 0.11s;
}

@keyframes twist-11 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-12 {
  left: 26.2vw;
  transform-origin: 100% 00%;
  animation: twist-12 infinite 3.5s linear 0.12s;
}

@keyframes twist-12 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-13 {
  left: 26.55vw;
  transform-origin: 100% 00%;
  animation: twist-13 infinite 3.5s linear 0.13s;
}

@keyframes twist-13 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-14 {
  left: 26.9vw;
  transform-origin: 100% 00%;
  animation: twist-14 infinite 3.5s linear 0.14s;
}

@keyframes twist-14 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-15 {
  left: 27.25vw;
  transform-origin: 100% 00%;
  animation: twist-15 infinite 3.5s linear 0.15s;
}

@keyframes twist-15 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-16 {
  left: 27.6vw;
  transform-origin: 100% 00%;
  animation: twist-16 infinite 3.5s linear 0.16s;
}

@keyframes twist-16 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-17 {
  left: 27.95vw;
  transform-origin: 100% 00%;
  animation: twist-17 infinite 3.5s linear 0.17s;
}

@keyframes twist-17 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-18 {
  left: 28.3vw;
  transform-origin: 100% 00%;
  animation: twist-18 infinite 3.5s linear 0.18s;
}

@keyframes twist-18 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-19 {
  left: 28.65vw;
  transform-origin: 100% 00%;
  animation: twist-19 infinite 3.5s linear 0.19s;
}

@keyframes twist-19 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-20 {
  left: 29vw;
  transform-origin: 100% 00%;
  animation: twist-20 infinite 3.5s linear 0.2s;
}

@keyframes twist-20 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-21 {
  left: 29.35vw;
  transform-origin: 100% 00%;
  animation: twist-21 infinite 3.5s linear 0.21s;
}

@keyframes twist-21 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-22 {
  left: 29.7vw;
  transform-origin: 100% 00%;
  animation: twist-22 infinite 3.5s linear 0.22s;
}

@keyframes twist-22 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-23 {
  left: 30.05vw;
  transform-origin: 100% 00%;
  animation: twist-23 infinite 3.5s linear 0.23s;
}

@keyframes twist-23 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-24 {
  left: 30.4vw;
  transform-origin: 100% 00%;
  animation: twist-24 infinite 3.5s linear 0.24s;
}

@keyframes twist-24 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-25 {
  left: 30.75vw;
  transform-origin: 100% 00%;
  animation: twist-25 infinite 3.5s linear 0.25s;
}

@keyframes twist-25 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-26 {
  left: 31.1vw;
  transform-origin: 100% 00%;
  animation: twist-26 infinite 3.5s linear 0.26s;
}

@keyframes twist-26 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-27 {
  left: 31.45vw;
  transform-origin: 100% 00%;
  animation: twist-27 infinite 3.5s linear 0.27s;
}

@keyframes twist-27 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-28 {
  left: 31.8vw;
  transform-origin: 100% 00%;
  animation: twist-28 infinite 3.5s linear 0.28s;
}

@keyframes twist-28 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-29 {
  left: 32.15vw;
  transform-origin: 100% 00%;
  animation: twist-29 infinite 3.5s linear 0.29s;
}

@keyframes twist-29 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-30 {
  left: 32.5vw;
  transform-origin: 100% 00%;
  animation: twist-30 infinite 3.5s linear 0.3s;
}

@keyframes twist-30 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-31 {
  left: 32.85vw;
  transform-origin: 100% 00%;
  animation: twist-31 infinite 3.5s linear 0.31s;
}

@keyframes twist-31 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-32 {
  left: 33.2vw;
  transform-origin: 100% 00%;
  animation: twist-32 infinite 3.5s linear 0.32s;
}

@keyframes twist-32 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-33 {
  left: 33.55vw;
  transform-origin: 100% 00%;
  animation: twist-33 infinite 3.5s linear 0.33s;
}

@keyframes twist-33 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-34 {
  left: 33.9vw;
  transform-origin: 100% 00%;
  animation: twist-34 infinite 3.5s linear 0.34s;
}

@keyframes twist-34 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-35 {
  left: 34.25vw;
  transform-origin: 100% 00%;
  animation: twist-35 infinite 3.5s linear 0.35s;
}

@keyframes twist-35 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-36 {
  left: 34.6vw;
  transform-origin: 100% 00%;
  animation: twist-36 infinite 3.5s linear 0.36s;
}

@keyframes twist-36 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-37 {
  left: 34.95vw;
  transform-origin: 100% 00%;
  animation: twist-37 infinite 3.5s linear 0.37s;
}

@keyframes twist-37 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-38 {
  left: 35.3vw;
  transform-origin: 100% 00%;
  animation: twist-38 infinite 3.5s linear 0.38s;
}

@keyframes twist-38 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-39 {
  left: 35.65vw;
  transform-origin: 100% 00%;
  animation: twist-39 infinite 3.5s linear 0.39s;
}

@keyframes twist-39 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-40 {
  left: 36vw;
  transform-origin: 100% 00%;
  animation: twist-40 infinite 3.5s linear 0.4s;
}

@keyframes twist-40 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-41 {
  left: 36.35vw;
  transform-origin: 100% 00%;
  animation: twist-41 infinite 3.5s linear 0.41s;
}

@keyframes twist-41 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-42 {
  left: 36.7vw;
  transform-origin: 100% 00%;
  animation: twist-42 infinite 3.5s linear 0.42s;
}

@keyframes twist-42 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-43 {
  left: 37.05vw;
  transform-origin: 100% 00%;
  animation: twist-43 infinite 3.5s linear 0.43s;
}

@keyframes twist-43 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-44 {
  left: 37.4vw;
  transform-origin: 100% 00%;
  animation: twist-44 infinite 3.5s linear 0.44s;
}

@keyframes twist-44 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-45 {
  left: 37.75vw;
  transform-origin: 100% 00%;
  animation: twist-45 infinite 3.5s linear 0.45s;
}

@keyframes twist-45 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-46 {
  left: 38.1vw;
  transform-origin: 100% 00%;
  animation: twist-46 infinite 3.5s linear 0.46s;
}

@keyframes twist-46 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-47 {
  left: 38.45vw;
  transform-origin: 100% 00%;
  animation: twist-47 infinite 3.5s linear 0.47s;
}

@keyframes twist-47 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-48 {
  left: 38.8vw;
  transform-origin: 100% 00%;
  animation: twist-48 infinite 3.5s linear 0.48s;
}

@keyframes twist-48 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-49 {
  left: 39.15vw;
  transform-origin: 100% 00%;
  animation: twist-49 infinite 3.5s linear 0.49s;
}

@keyframes twist-49 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-50 {
  left: 39.5vw;
  transform-origin: 100% 00%;
  animation: twist-50 infinite 3.5s linear 0.5s;
}

@keyframes twist-50 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-51 {
  left: 39.85vw;
  transform-origin: 100% 00%;
  animation: twist-51 infinite 3.5s linear 0.51s;
}

@keyframes twist-51 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-52 {
  left: 40.2vw;
  transform-origin: 100% 00%;
  animation: twist-52 infinite 3.5s linear 0.52s;
}

@keyframes twist-52 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-53 {
  left: 40.55vw;
  transform-origin: 100% 00%;
  animation: twist-53 infinite 3.5s linear 0.53s;
}

@keyframes twist-53 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-54 {
  left: 40.9vw;
  transform-origin: 100% 00%;
  animation: twist-54 infinite 3.5s linear 0.54s;
}

@keyframes twist-54 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-55 {
  left: 41.25vw;
  transform-origin: 100% 00%;
  animation: twist-55 infinite 3.5s linear 0.55s;
}

@keyframes twist-55 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-56 {
  left: 41.6vw;
  transform-origin: 100% 00%;
  animation: twist-56 infinite 3.5s linear 0.56s;
}

@keyframes twist-56 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-57 {
  left: 41.95vw;
  transform-origin: 100% 00%;
  animation: twist-57 infinite 3.5s linear 0.57s;
}

@keyframes twist-57 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-58 {
  left: 42.3vw;
  transform-origin: 100% 00%;
  animation: twist-58 infinite 3.5s linear 0.58s;
}

@keyframes twist-58 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-59 {
  left: 42.65vw;
  transform-origin: 100% 00%;
  animation: twist-59 infinite 3.5s linear 0.59s;
}

@keyframes twist-59 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-60 {
  left: 43vw;
  transform-origin: 100% 00%;
  animation: twist-60 infinite 3.5s linear 0.6s;
}

@keyframes twist-60 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-61 {
  left: 43.35vw;
  transform-origin: 100% 00%;
  animation: twist-61 infinite 3.5s linear 0.61s;
}

@keyframes twist-61 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-62 {
  left: 43.7vw;
  transform-origin: 100% 00%;
  animation: twist-62 infinite 3.5s linear 0.62s;
}

@keyframes twist-62 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-63 {
  left: 44.05vw;
  transform-origin: 100% 00%;
  animation: twist-63 infinite 3.5s linear 0.63s;
}

@keyframes twist-63 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-64 {
  left: 44.4vw;
  transform-origin: 100% 00%;
  animation: twist-64 infinite 3.5s linear 0.64s;
}

@keyframes twist-64 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-65 {
  left: 44.75vw;
  transform-origin: 100% 00%;
  animation: twist-65 infinite 3.5s linear 0.65s;
}

@keyframes twist-65 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-66 {
  left: 45.1vw;
  transform-origin: 100% 00%;
  animation: twist-66 infinite 3.5s linear 0.66s;
}

@keyframes twist-66 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-67 {
  left: 45.45vw;
  transform-origin: 100% 00%;
  animation: twist-67 infinite 3.5s linear 0.67s;
}

@keyframes twist-67 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-68 {
  left: 45.8vw;
  transform-origin: 100% 00%;
  animation: twist-68 infinite 3.5s linear 0.68s;
}

@keyframes twist-68 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-69 {
  left: 46.15vw;
  transform-origin: 100% 00%;
  animation: twist-69 infinite 3.5s linear 0.69s;
}

@keyframes twist-69 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-70 {
  left: 46.5vw;
  transform-origin: 100% 00%;
  animation: twist-70 infinite 3.5s linear 0.7s;
}

@keyframes twist-70 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-71 {
  left: 46.85vw;
  transform-origin: 100% 00%;
  animation: twist-71 infinite 3.5s linear 0.71s;
}

@keyframes twist-71 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-72 {
  left: 47.2vw;
  transform-origin: 100% 00%;
  animation: twist-72 infinite 3.5s linear 0.72s;
}

@keyframes twist-72 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-73 {
  left: 47.55vw;
  transform-origin: 100% 00%;
  animation: twist-73 infinite 3.5s linear 0.73s;
}

@keyframes twist-73 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-74 {
  left: 47.9vw;
  transform-origin: 100% 00%;
  animation: twist-74 infinite 3.5s linear 0.74s;
}

@keyframes twist-74 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-75 {
  left: 48.25vw;
  transform-origin: 100% 00%;
  animation: twist-75 infinite 3.5s linear 0.75s;
}

@keyframes twist-75 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-76 {
  left: 48.6vw;
  transform-origin: 100% 00%;
  animation: twist-76 infinite 3.5s linear 0.76s;
}

@keyframes twist-76 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-77 {
  left: 48.95vw;
  transform-origin: 100% 00%;
  animation: twist-77 infinite 3.5s linear 0.77s;
}

@keyframes twist-77 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-78 {
  left: 49.3vw;
  transform-origin: 100% 00%;
  animation: twist-78 infinite 3.5s linear 0.78s;
}

@keyframes twist-78 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-79 {
  left: 49.65vw;
  transform-origin: 100% 00%;
  animation: twist-79 infinite 3.5s linear 0.79s;
}

@keyframes twist-79 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-80 {
  left: 50vw;
  transform-origin: 100% 00%;
  animation: twist-80 infinite 3.5s linear 0.8s;
}

@keyframes twist-80 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-81 {
  left: 50.35vw;
  transform-origin: 100% 00%;
  animation: twist-81 infinite 3.5s linear 0.81s;
}

@keyframes twist-81 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-82 {
  left: 50.7vw;
  transform-origin: 100% 00%;
  animation: twist-82 infinite 3.5s linear 0.82s;
}

@keyframes twist-82 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-83 {
  left: 51.05vw;
  transform-origin: 100% 00%;
  animation: twist-83 infinite 3.5s linear 0.83s;
}

@keyframes twist-83 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-84 {
  left: 51.4vw;
  transform-origin: 100% 00%;
  animation: twist-84 infinite 3.5s linear 0.84s;
}

@keyframes twist-84 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-85 {
  left: 51.75vw;
  transform-origin: 100% 00%;
  animation: twist-85 infinite 3.5s linear 0.85s;
}

@keyframes twist-85 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-86 {
  left: 52.1vw;
  transform-origin: 100% 00%;
  animation: twist-86 infinite 3.5s linear 0.86s;
}

@keyframes twist-86 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-87 {
  left: 52.45vw;
  transform-origin: 100% 00%;
  animation: twist-87 infinite 3.5s linear 0.87s;
}

@keyframes twist-87 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-88 {
  left: 52.8vw;
  transform-origin: 100% 00%;
  animation: twist-88 infinite 3.5s linear 0.88s;
}

@keyframes twist-88 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-89 {
  left: 53.15vw;
  transform-origin: 100% 00%;
  animation: twist-89 infinite 3.5s linear 0.89s;
}

@keyframes twist-89 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-90 {
  left: 53.5vw;
  transform-origin: 100% 00%;
  animation: twist-90 infinite 3.5s linear 0.9s;
}

@keyframes twist-90 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-91 {
  left: 53.85vw;
  transform-origin: 100% 00%;
  animation: twist-91 infinite 3.5s linear 0.91s;
}

@keyframes twist-91 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-92 {
  left: 54.2vw;
  transform-origin: 100% 00%;
  animation: twist-92 infinite 3.5s linear 0.92s;
}

@keyframes twist-92 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-93 {
  left: 54.55vw;
  transform-origin: 100% 00%;
  animation: twist-93 infinite 3.5s linear 0.93s;
}

@keyframes twist-93 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-94 {
  left: 54.9vw;
  transform-origin: 100% 00%;
  animation: twist-94 infinite 3.5s linear 0.94s;
}

@keyframes twist-94 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-95 {
  left: 55.25vw;
  transform-origin: 100% 00%;
  animation: twist-95 infinite 3.5s linear 0.95s;
}

@keyframes twist-95 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-96 {
  left: 55.6vw;
  transform-origin: 100% 00%;
  animation: twist-96 infinite 3.5s linear 0.96s;
}

@keyframes twist-96 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-97 {
  left: 55.95vw;
  transform-origin: 100% 00%;
  animation: twist-97 infinite 3.5s linear 0.97s;
}

@keyframes twist-97 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-98 {
  left: 56.3vw;
  transform-origin: 100% 00%;
  animation: twist-98 infinite 3.5s linear 0.98s;
}

@keyframes twist-98 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-99 {
  left: 56.65vw;
  transform-origin: 100% 00%;
  animation: twist-99 infinite 3.5s linear 0.99s;
}

@keyframes twist-99 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-100 {
  left: 57vw;
  transform-origin: 100% 00%;
  animation: twist-100 infinite 3.5s linear 1s;
}

@keyframes twist-100 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-101 {
  left: 57.35vw;
  transform-origin: 100% 00%;
  animation: twist-101 infinite 3.5s linear 1.01s;
}

@keyframes twist-101 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-102 {
  left: 57.7vw;
  transform-origin: 100% 00%;
  animation: twist-102 infinite 3.5s linear 1.02s;
}

@keyframes twist-102 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-103 {
  left: 58.05vw;
  transform-origin: 100% 00%;
  animation: twist-103 infinite 3.5s linear 1.03s;
}

@keyframes twist-103 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-104 {
  left: 58.4vw;
  transform-origin: 100% 00%;
  animation: twist-104 infinite 3.5s linear 1.04s;
}

@keyframes twist-104 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-105 {
  left: 58.75vw;
  transform-origin: 100% 00%;
  animation: twist-105 infinite 3.5s linear 1.05s;
}

@keyframes twist-105 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-106 {
  left: 59.1vw;
  transform-origin: 100% 00%;
  animation: twist-106 infinite 3.5s linear 1.06s;
}

@keyframes twist-106 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-107 {
  left: 59.45vw;
  transform-origin: 100% 00%;
  animation: twist-107 infinite 3.5s linear 1.07s;
}

@keyframes twist-107 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-108 {
  left: 59.8vw;
  transform-origin: 100% 00%;
  animation: twist-108 infinite 3.5s linear 1.08s;
}

@keyframes twist-108 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-109 {
  left: 60.15vw;
  transform-origin: 100% 00%;
  animation: twist-109 infinite 3.5s linear 1.09s;
}

@keyframes twist-109 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-110 {
  left: 60.5vw;
  transform-origin: 100% 00%;
  animation: twist-110 infinite 3.5s linear 1.1s;
}

@keyframes twist-110 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-111 {
  left: 60.85vw;
  transform-origin: 100% 00%;
  animation: twist-111 infinite 3.5s linear 1.11s;
}

@keyframes twist-111 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-112 {
  left: 61.2vw;
  transform-origin: 100% 00%;
  animation: twist-112 infinite 3.5s linear 1.12s;
}

@keyframes twist-112 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-113 {
  left: 61.55vw;
  transform-origin: 100% 00%;
  animation: twist-113 infinite 3.5s linear 1.13s;
}

@keyframes twist-113 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-114 {
  left: 61.9vw;
  transform-origin: 100% 00%;
  animation: twist-114 infinite 3.5s linear 1.14s;
}

@keyframes twist-114 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-115 {
  left: 62.25vw;
  transform-origin: 100% 00%;
  animation: twist-115 infinite 3.5s linear 1.15s;
}

@keyframes twist-115 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-116 {
  left: 62.6vw;
  transform-origin: 100% 00%;
  animation: twist-116 infinite 3.5s linear 1.16s;
}

@keyframes twist-116 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-117 {
  left: 62.95vw;
  transform-origin: 100% 00%;
  animation: twist-117 infinite 3.5s linear 1.17s;
}

@keyframes twist-117 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-118 {
  left: 63.3vw;
  transform-origin: 100% 00%;
  animation: twist-118 infinite 3.5s linear 1.18s;
}

@keyframes twist-118 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-119 {
  left: 63.65vw;
  transform-origin: 100% 00%;
  animation: twist-119 infinite 3.5s linear 1.19s;
}

@keyframes twist-119 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-120 {
  left: 64vw;
  transform-origin: 100% 00%;
  animation: twist-120 infinite 3.5s linear 1.2s;
}

@keyframes twist-120 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-121 {
  left: 64.35vw;
  transform-origin: 100% 00%;
  animation: twist-121 infinite 3.5s linear 1.21s;
}

@keyframes twist-121 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-122 {
  left: 64.7vw;
  transform-origin: 100% 00%;
  animation: twist-122 infinite 3.5s linear 1.22s;
}

@keyframes twist-122 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-123 {
  left: 65.05vw;
  transform-origin: 100% 00%;
  animation: twist-123 infinite 3.5s linear 1.23s;
}

@keyframes twist-123 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-124 {
  left: 65.4vw;
  transform-origin: 100% 00%;
  animation: twist-124 infinite 3.5s linear 1.24s;
}

@keyframes twist-124 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-125 {
  left: 65.75vw;
  transform-origin: 100% 00%;
  animation: twist-125 infinite 3.5s linear 1.25s;
}

@keyframes twist-125 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-126 {
  left: 66.1vw;
  transform-origin: 100% 00%;
  animation: twist-126 infinite 3.5s linear 1.26s;
}

@keyframes twist-126 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-127 {
  left: 66.45vw;
  transform-origin: 100% 00%;
  animation: twist-127 infinite 3.5s linear 1.27s;
}

@keyframes twist-127 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-128 {
  left: 66.8vw;
  transform-origin: 100% 00%;
  animation: twist-128 infinite 3.5s linear 1.28s;
}

@keyframes twist-128 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-129 {
  left: 67.15vw;
  transform-origin: 100% 00%;
  animation: twist-129 infinite 3.5s linear 1.29s;
}

@keyframes twist-129 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-130 {
  left: 67.5vw;
  transform-origin: 100% 00%;
  animation: twist-130 infinite 3.5s linear 1.3s;
}

@keyframes twist-130 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-131 {
  left: 67.85vw;
  transform-origin: 100% 00%;
  animation: twist-131 infinite 3.5s linear 1.31s;
}

@keyframes twist-131 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-132 {
  left: 68.2vw;
  transform-origin: 100% 00%;
  animation: twist-132 infinite 3.5s linear 1.32s;
}

@keyframes twist-132 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-133 {
  left: 68.55vw;
  transform-origin: 100% 00%;
  animation: twist-133 infinite 3.5s linear 1.33s;
}

@keyframes twist-133 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-134 {
  left: 68.9vw;
  transform-origin: 100% 00%;
  animation: twist-134 infinite 3.5s linear 1.34s;
}

@keyframes twist-134 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-135 {
  left: 69.25vw;
  transform-origin: 100% 00%;
  animation: twist-135 infinite 3.5s linear 1.35s;
}

@keyframes twist-135 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-136 {
  left: 69.6vw;
  transform-origin: 100% 00%;
  animation: twist-136 infinite 3.5s linear 1.36s;
}

@keyframes twist-136 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-137 {
  left: 69.95vw;
  transform-origin: 100% 00%;
  animation: twist-137 infinite 3.5s linear 1.37s;
}

@keyframes twist-137 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-138 {
  left: 70.3vw;
  transform-origin: 100% 00%;
  animation: twist-138 infinite 3.5s linear 1.38s;
}

@keyframes twist-138 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
.color-139 {
  left: 70.65vw;
  transform-origin: 100% 00%;
  animation: twist-139 infinite 3.5s linear 1.39s;
}

@keyframes twist-139 {
  from {
    transform: scale(1, 1) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: scale(1, 1) rotate(90deg) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 1) rotate(180deg) translate(0%, 0%);
  }
  75% {
    transform: scale(1, 1) rotate(270deg) translate(0%, 0%);
  }
  to {
    transform: scale(1, 1) rotate(359deg) translate(0, 0);
  }
}
/* Color Name */
.color-name,
.hex-code {
  display: none;
}

.copy-icon,
.copied-icon {
  display: none;
}

.color-button {
  border: none;
  border-top-right-radius: 50%;
  border-radius: 50%;
  color: transparent;
  margin: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  line-height: 3;
  padding: 5% 0;
  position: absolute;
  transition: color 0.3s;
  font-family: 'Fira Mono', sans-serif;
  font-size: 1rem;
  text-rendering: GeometricPrecision;
  display: inline-block;
}

.button-content-wrap {
  /* display: none; */
}

/* Hide the select areas needed for copy */
.js-copytextarea {
  display: none;
}

/* Options */


/*Downloaded from https://www.codeseek.co/joshuar/color-animation-experiment-2-RWVKgP */
/* X11 JSON */
var x11List = [{
  name: 'LightPink',
  hex: '#FFB6C1'
}, {
  name: 'Pink',
  hex: '#FFC0CB'
}, {
  name: 'Crimson',
  hex: '#DC143C'
}, {
  name: 'LavenderBlush',
  hex: '#FFF0F5'
}, {
  name: 'PaleVioletRed',
  hex: '#DB7093'
}, {
  name: 'HotPink',
  hex: '#FF69B4'
}, {
  name: 'DeepPink',
  hex: '#FF1493'
}, {
  name: 'MediumVioletRed',
  hex: '#C71585'
}, {
  name: 'Orchid',
  hex: '#DA70D6'
}, {
  name: 'Thistle',
  hex: '#D8BFD8'
}, {
  name: 'Plum',
  hex: '#DDA0DD'
}, {
  name: 'Violet',
  hex: '#EE82EE'
}, {
  name: 'Magenta',
  hex: '#FF00FF'
}, {
  name: 'Fuchsia',
  hex: '#FF00FF'
}, {
  name: 'DarkMagenta',
  hex: '#8B008B'
}, {
  name: 'Purple',
  hex: '#800080'
}, {
  name: 'MediumOrchid',
  hex: '#BA55D3'
}, {
  name: 'DarkViolet',
  hex: '#9400D3'
}, {
  name: 'DarkOrchid',
  hex: '#9932CC'
}, {
  name: 'Indigo',
  hex: '#4B0082'
}, {
  name: 'BlueViolet',
  hex: '#8A2BE2'
}, {
  name: 'MediumPurple',
  hex: '#9370DB'
}, {
  name: 'MediumSlateBlue',
  hex: '#7B68EE'
}, {
  name: 'SlateBlue',
  hex: '#6A5ACD'
}, {
  name: 'DarkSlateBlue',
  hex: '#483D8B'
}, {
  name: 'Lavender',
  hex: '#E6E6FA'
}, {
  name: 'GhostWhite',
  hex: '#F8F8FF'
}, {
  name: 'Blue',
  hex: '#0000FF'
}, {
  name: 'MediumBlue',
  hex: '#0000CD'
}, {
  name: 'MidnightBlue',
  hex: '#191970'
}, {
  name: 'DarkBlue',
  hex: '#00008B'
}, {
  name: 'Navy',
  hex: '#000080'
}, {
  name: 'RoyalBlue',
  hex: '#4169E1'
}, {
  name: 'CornflowerBlue',
  hex: '#6495ED'
}, {
  name: 'LightSteelBlue',
  hex: '#B0C4DE'
}, {
  name: 'LightSlateGray',
  hex: '#778899'
}, {
  name: 'SlateGray',
  hex: '#708090'
}, {
  name: 'DodgerBlue',
  hex: '#1E90FF'
}, {
  name: 'AliceBlue',
  hex: '#F0F8FF'
}, {
  name: 'SteelBlue',
  hex: '#4682B4'
}, {
  name: 'LightSkyBlue',
  hex: '#87CEFA'
}, {
  name: 'SkyBlue',
  hex: '#87CEEB'
}, {
  name: 'DeepSkyBlue',
  hex: '#00BFFF'
}, {
  name: 'LightBlue',
  hex: '#ADD8E6'
}, {
  name: 'PowderBlue',
  hex: '#B0E0E6'
}, {
  name: 'CadetBlue',
  hex: '#5F9EA0'
}, {
  name: 'Azure',
  hex: '#F0FFFF'
}, {
  name: 'LightCyan',
  hex: '#E0FFFF'
}, {
  name: 'PaleTurquoise',
  hex: '#AFEEEE'
}, {
  name: 'Cyan',
  hex: '#00FFFF'
}, {
  name: 'Aqua',
  hex: '#00FFFF'
}, {
  name: 'DarkTurquoise',
  hex: '#00CED1'
}, {
  name: 'DarkSlateGray',
  hex: '#2F4F4F'
}, {
  name: 'DarkCyan',
  hex: '#008B8B'
}, {
  name: 'Teal',
  hex: '#008080'
}, {
  name: 'MediumTurquoise',
  hex: '#48D1CC'
}, {
  name: 'LightSeaGreen',
  hex: '#20B2AA'
}, {
  name: 'Turquoise',
  hex: '#40E0D0'
}, {
  name: 'Aquamarine',
  hex: '#7FFFD4'
}, {
  name: 'MediumAquamarine',
  hex: '#66CDAA'
}, {
  name: 'MediumSpringGreen',
  hex: '#00FA9A'
}, {
  name: 'MintCream',
  hex: '#F5FFFA'
}, {
  name: 'SpringGreen',
  hex: '#00FF7F'
}, {
  name: 'MediumSeaGreen',
  hex: '#3CB371'
}, {
  name: 'SeaGreen',
  hex: '#2E8B57'
}, {
  name: 'Honeydew',
  hex: '#F0FFF0'
}, {
  name: 'LightGreen',
  hex: '#90EE90'
}, {
  name: 'PaleGreen',
  hex: '#98FB98'
}, {
  name: 'DarkSeaGreen',
  hex: '#8FBC8F'
}, {
  name: 'LimeGreen',
  hex: '#32CD32'
}, {
  name: 'Lime',
  hex: '#00FF00'
}, {
  name: 'ForestGreen',
  hex: '#228B22'
}, {
  name: 'Green',
  hex: '#008000'
}, {
  name: 'DarkGreen',
  hex: '#006400'
}, {
  name: 'Chartreuse',
  hex: '#7FFF00'
}, {
  name: 'LawnGreen',
  hex: '#7CFC00'
}, {
  name: 'GreenYellow',
  hex: '#ADFF2F'
}, {
  name: 'DarkOliveGreen',
  hex: '#556B2F'
}, {
  name: 'YellowGreen',
  hex: '#9ACD32'
}, {
  name: 'OliveDrab',
  hex: '#6B8E23'
}, {
  name: 'Beige',
  hex: '#F5F5DC'
}, {
  name: 'LightGoldenrodYellow',
  hex: '#FAFAD2'
}, {
  name: 'Ivory',
  hex: '#FFFFF0'
}, {
  name: 'LightYellow',
  hex: '#FFFFE0'
}, {
  name: 'Yellow',
  hex: '#FFFF00'
}, {
  name: 'Olive',
  hex: '#808000'
}, {
  name: 'DarkKhaki',
  hex: '#BDB76B'
}, {
  name: 'LemonChiffon',
  hex: '#FFFACD'
}, {
  name: 'PaleGoldenrod',
  hex: '#EEE8AA'
}, {
  name: 'Khaki',
  hex: '#F0E68C'
}, {
  name: 'Gold',
  hex: '#FFD700'
}, {
  name: 'Cornsilk',
  hex: '#FFF8DC'
}, {
  name: 'Goldenrod',
  hex: '#DAA520'
}, {
  name: 'DarkGoldenrod',
  hex: '#B8860B'
}, {
  name: 'FloralWhite',
  hex: '#FFFAF0'
}, {
  name: 'OldLace',
  hex: '#FDF5E6'
}, {
  name: 'Wheat',
  hex: '#F5DEB3'
}, {
  name: 'Moccasin',
  hex: '#FFE4B5'
}, {
  name: 'Orange',
  hex: '#FFA500'
}, {
  name: 'PapayaWhip',
  hex: '#FFEFD5'
}, {
  name: 'BlanchedAlmond',
  hex: '#FFEBCD'
}, {
  name: 'NavajoWhite',
  hex: '#FFDEAD'
}, {
  name: 'AntiqueWhite',
  hex: '#FAEBD7'
}, {
  name: 'Tan',
  hex: '#D2B48C'
}, {
  name: 'BurlyWood',
  hex: '#DEB887'
}, {
  name: 'Bisque',
  hex: '#FFE4C4'
}, {
  name: 'DarkOrange',
  hex: '#FF8C00'
}, {
  name: 'Linen',
  hex: '#FAF0E6'
}, {
  name: 'Peru',
  hex: '#CD853F'
}, {
  name: 'PeachPuff',
  hex: '#FFDAB9'
}, {
  name: 'SandyBrown',
  hex: '#F4A460'
}, {
  name: 'Chocolate',
  hex: '#D2691E'
}, {
  name: 'SaddleBrown',
  hex: '#8B4513'
}, {
  name: 'Seashell',
  hex: '#FFF5EE'
}, {
  name: 'Sienna',
  hex: '#A0522D'
}, {
  name: 'LightSalmon',
  hex: '#FFA07A'
}, {
  name: 'Coral',
  hex: '#FF7F50'
}, {
  name: 'OrangeRed',
  hex: '#FF4500'
}, {
  name: 'DarkSalmon',
  hex: '#E9967A'
}, {
  name: 'Tomato',
  hex: '#FF6347'
}, {
  name: 'MistyRose',
  hex: '#FFE4E1'
}, {
  name: 'Salmon',
  hex: '#FA8072'
}, {
  name: 'Snow',
  hex: '#FFFAFA'
}, {
  name: 'LightCoral',
  hex: '#F08080'
}, {
  name: 'RosyBrown',
  hex: '#BC8F8F'
}, {
  name: 'IndianRed',
  hex: '#CD5C5C'
}, {
  name: 'Red',
  hex: '#FF0000'
}, {
  name: 'Brown',
  hex: '#A52A2A'
}, {
  name: 'FireBrick',
  hex: '#B22222'
}, {
  name: 'DarkRed',
  hex: '#8B0000'
}, {
  name: 'Maroon',
  hex: '#800000'
}, {
  name: 'White',
  hex: '#FFFFFF'
}, {
  name: 'WhiteSmoke',
  hex: '#F5F5F5'
}, {
  name: 'Gainsboro',
  hex: '#DCDCDC'
}, {
  name: 'LightGrey',
  hex: '#D3D3D3'
}, {
  name: 'Silver',
  hex: '#C0C0C0'
}, {
  name: 'DarkGray',
  hex: '#A9A9A9'
}, {
  name: 'Gray',
  hex: '#808080'
}, {
  name: 'DimGray',
  hex: '#696969'
}, {
  name: 'Black',
  hex: '#000000'
}];

/* Checkboxes */
var Checkbox = React.createClass({
  displayName: 'Checkbox',


  getInitialState: function getInitialState() {
    // we ONLY set the initial state from the props
    return { checked: this.props.initialChecked };
  },

  handleChange: function handleChange() {
    var newState = !this.state.checked;
    this.setState({ checked: newState });
    this.props.callbackParent(newState); // hey parent, I've changed!
  },

  render: function render() {
    var labelStyle = this.state.checked ? ' checked' : '';

    return React.createElement(
      'div',
      { className: 'toggle' },
      React.createElement(
        'label',
        {
          'for': this.props.id,
          className: "toggle-label " + labelStyle,
          id: this.props.id
        },
        React.createElement('input', {
          onClick: this.handleChange,
          id: this.props.id,
          type: 'checkbox',
          className: 'toggle-input',
          defaultChecked: this.state.checked,
          ref: 'complete'
        }),
        this.props.text
      )
    );
  }
});

/* Color */
var Color = React.createClass({
  displayName: 'Color',


  getInitialState: function getInitialState() {
    return {
      value: this.props.color,
      clicked: false
    };
  },

  handleClick: function handleClick() {
    var copyTextarea = React.findDOMNode(this.refs.colorText);
    copyTextarea.select();

    var isClicked = true;
    this.setState({ clicked: isClicked });
    console.log('clicked ' + this.state.clicked);

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? this.props.color : 'unsuccessful';
      console.log('Copied ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
  },
  handleMouseLeave: function handleMouseLeave() {
    var isClicked = false;
    this.setState({ clicked: isClicked });
  },


  render: function render() {
    var clickedClass = this.state.clicked ? ' clicked' : '';

    var value = this.state.value;

    var buttonColor = {
      backgroundColor: this.props.color
    };

    var isClicked = this.state.clicked ? true : false;

    var copyIcon = '\n      <svg class="svg" viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet">\n        <path class="path1" stroke="#000000" d="M704 128h-128v-64c0-35.2-28.8-64-64-64h-128c-35.204 0-64 28.8-64 64v64h-128v128h512v-128zM512 128h-128v-63.886c0.034-0.038 0.072-0.078 0.114-0.114h127.768c0.042 0.036 0.082 0.076 0.118 0.114v63.886zM832 320v-160c0-17.6-14.4-32-32-32h-64v64h32v128h-192l-192 192v256h-256v-576h32v-64h-64c-17.602 0-32 14.4-32 32v640c0 17.6 14.398 32 32 32h288v192h640v-704h-192zM576 410.51v101.49h-101.49l101.49-101.49zM960 960h-512v-384h192v-192h320v576z"></path>\n      </svg>\n   ';

    var copiedIcon = '\n      <svg class="svg" viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet">\n        <path class="path1" d="M928 128h-288c0-70.692-57.306-128-128-128-70.692 0-128 57.308-128 128h-288c-17.672 0-32 14.328-32 32v832c0 17.674 14.328 32 32 32h832c17.674 0 32-14.326 32-32v-832c0-17.672-14.326-32-32-32zM512 64c35.346 0 64 28.654 64 64s-28.654 64-64 64c-35.346 0-64-28.654-64-64s28.654-64 64-64zM896 960h-768v-768h128v96c0 17.672 14.328 32 32 32h448c17.674 0 32-14.328 32-32v-96h128v768z"></path>\n        <path class="path2" d="M448 858.51l-205.254-237.254 58.508-58.51 146.746 114.744 274.742-242.744 58.514 58.508z"></path>\n      </svg>\n    ';

    return React.createElement(
      'li',
      { className: "color color-" + this.props.id },
      React.createElement(
        'h2',
        { className: "color-name color-name-" + this.props.id },
        this.props.color
      ),
      React.createElement(
        'h2',
        { className: "hex-code hex-code-" + this.props.id },
        this.props.hex
      ),
      React.createElement('textarea', {
        className: 'js-copytextarea',
        value: value,
        ref: 'colorText',
        onChange: this.handleChange
      }),
      React.createElement(
        'button',
        {
          className: 'color-button js-textareacopybtn',
          style: buttonColor,
          onClick: this.handleClick,
          onMouseLeave: this.handleMouseLeave
        },
        React.createElement(
          'span',
          { className: "button-content-wrap" + clickedClass },
          isClicked || React.createElement('div', {
            className: 'copy-icon',
            dangerouslySetInnerHTML: { __html: copyIcon }
          }),
          isClicked && React.createElement('div', {
            className: 'copy-icon',
            dangerouslySetInnerHTML: { __html: copiedIcon }
          }),
          this.props.color
        )
      )
    );
  }
});

/* Colors */
var Colors = React.createClass({
  displayName: 'Colors',


  getDefaultProps: function getDefaultProps() {
    return {
      config: x11List
    };
  },

  propTypes: {
    config: React.PropTypes.array
  },

  getInitialState: function getInitialState() {
    return {
      namesChecked: false,
      hexChecked: false
    };
  },

  onNameChanged: function onNameChanged(newState) {
    this.setState({ namesChecked: newState });
  },

  onHexChanged: function onHexChanged(newState) {
    this.setState({ hexChecked: newState });
  },

  render: function render() {
    var config = this.props.config;

    var colors = config.map(function (color, i) {

      return React.createElement(Color, { color: color.name, hex: color.hex, id: i });
    });

    var showNames = this.state.namesChecked ? 'show-names ' : '';
    var showHex = this.state.hexChecked ? 'show-hex ' : '';

    return React.createElement(
      'section',
      null,
      React.createElement(
        'header',
        { className: 'section-header' },
        React.createElement(
          'h1',
          { className: 'section-title' },
          'X11 Color Names'
        ),
        React.createElement(
          'div',
          { className: 'display-options' },
          React.createElement(Checkbox, {
            key: 'toggle-names',
            text: 'Color names',
            id: 'color-names',
            initialChecked: this.state.namesChecked,
            callbackParent: this.onNameChanged
          }),
          React.createElement(Checkbox, {
            key: 'toggle-hex',
            text: 'Hex codes',
            id: 'hex-codes',
            initialChecked: this.state.hexChecked,
            callbackParent: this.onHexChanged
          })
        )
      ),
      React.createElement(
        'ul',
        {
          className: "colors " + showNames + showHex
        },
        colors
      )
    );
  }
});

React.render(React.createElement(Colors, null), document.getElementById('main'));

Comments