.hexagon {
    position: absolute;
    width: 80%;
    height: 80%;
    fill: none;  
    stroke: #000000;
    stroke-width: 4;
    stroke-linejoin: round;
    stroke: #39C5BB; 
    animation: colorShift 6s infinite linear; 
}

.ring {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ring circle {
  fill: none;
  stroke: #39C5BB;
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: center;
  animation:
    rotate-animation 2s linear infinite,
    dash-animation 1.5s ease-in-out infinite,
    colorShift 6s infinite linear; 
}

@keyframes rotate-animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dash-animation {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 100, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 100, 150;
      stroke-dashoffset: -138;
    }
}

.ldr .path {
  stroke: #39C5BB;
  animation:
    dash 1.5s ease-in-out infinite,
    colorShift 3s infinite linear;
}

@keyframes colorShift {
  0%   { stroke: #39C5BB; }
  50%  { stroke: #FF77AA; }
  100% { stroke: #39C5BB; }
}

/**/