Atom Loader

atom-loader.markdown

Atom Loader

Electrons orbiting a nucleus animated using SVG strokes

A Pen by Yoav Kadosh on CodePen.

License.

index.html

<svg viewBox="0 0 100 100">
  <g class="shadow">
    <ellipse cx="50" cy="100" rx="50" ry="5"/>
  </g>
  <g class="core">
    <circle cx="50" cy="50" r="10"/>
    <circle cx="50" cy="50" r="10"/>
  </g>
  <g>
    <g class="ring" transform="rotate(-30, 50, 50)">
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
    </g>
    <g class="ring" transform="rotate(30, 50, 50)">
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
    </g>
    <g class="ring" transform="rotate(90, 50, 50)">
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
      <ellipse cx="50" cy="50" rx="20" ry="50"/>
    </g>
  </g>
  <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
		<feGaussianBlur stdDeviation="2" />
	</filter>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#00ddfd;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2d6a82;stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

script.js

// Nothing to see here folks

style.scss

$color-light-blue: #00ddfd;
$color-medium-blue: #255c72;
$color-dark-blue: #2a3e4d;
$ellipse-length: 230;

html, body {
  width: 100%;
  height: 100%;
  background-image: linear-gradient($color-dark-blue, $color-medium-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width: 90vmin;
  height: 90vmin;
  overflow: visible;
  
  .shadow {
    filter: url(#blur);
    fill: $color-dark-blue;
    opacity: 0.4;
  }
  
  .core {
    circle {
      fill: url(#gradient);
      
      &:first-child {
        filter: url(#blur);
        opacity: 0.5;
      }
    }
  }
  
  .ring {
    
    ellipse {
      stroke: $color-light-blue;
      stroke-width: 2px;
      fill: none;
      transform-origin: center;
      stroke-dasharray: 109 6;
      stroke-dashoffset: 26;

      &:nth-child(1) {
        filter: url(#blur);
        opacity: 0.5;
      }
      
      &:nth-child(3) {
        stroke-dasharray: 0 $ellipse-length;
        animation-name: orbit;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        stroke-width: 7px;
        stroke-linecap: round;
      }
      
      &:nth-child(4) {
        stroke-dasharray: 0 $ellipse-length;
        animation-name: orbit;
        animation-duration: 3s;
        animation-delay: -1.5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        stroke-width: 7px;
        stroke-linecap: round;
      }
    }
    
    &:nth-child(2) ellipse {
      animation-duration: 6s;
      animation-direction: reverse;
    }
    
    &:nth-child(3) ellipse:nth-child(3) {
      animation-delay: -1s;
    }
  } 
}

@keyframes orbit {
  0% {
    stroke-dashoffset: 0;
  }
  
  50% {
    stroke-width: 4px;
  }
  
  100% {
    stroke-dashoffset: $ellipse-length;
  }
}