<svg viewBox="0 0 500 500" width=100% height=100%>
    <defs>
    </defs>
    <g id="ring2">
      <g id="ring2-1">
        <circle class="c3" cx="50%" cy="50%" r=150
                fill="none"
                stroke="hsl(218,38%,76%)"
                stroke-width=15
                stroke-dasharray="1 34"></circle>
        <circle class="c3" cx="50%" cy="50%" r=162
                fill="none"
                stroke="hsl(218,38%,76%)"
                stroke-width=1></circle>
      </g>
      <g transform="translate(80,80)">
        <text fill="hsl(218,38%,56%)"
              font-size=14>Time</text>
        <text id="time-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11></text>
        <circle cx="-20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c4" cx="-20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <g transform="translate(80,115)">
        <text fill="hsl(218,38%,56%)"
              font-size=14>Energy</text>
        <text id="energy-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11></text>
        <circle cx="-20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c5" cx="-20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <g transform="translate(420,80)">
        <text fill="hsl(218,38%,56%)"
              font-size=14 text-anchor="end">Bandwidth</text>
        <text id="bandwidth-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11 text-anchor="end"></text>
        <circle cx="20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c6" cx="20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <g transform="translate(420,115)">
        <text fill="hsl(218,38%,56%)"
              font-size=14 text-anchor="end">Disk</text>
        <text id="disk-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11 text-anchor="end"></text>
        <circle cx="20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c7" cx="20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <text id="move-text"
            x="50%" y=460 fill="hsl(218,38%,76%)"
            text-anchor="middle"
            font-size=24>Move your mouse</text>
    </g>
    <g id="ring3">
      <g id="ring3-1">
        <circle class="c1" cx="50%" cy="50%" r=75
                fill="none"
                stroke="hsl(8,34%,45%)"
                stroke-width=4></circle>
        <circle class="c2" cx="50%" cy="50%" r=75
                fill="none"
                stroke="hsl(8,34%,45%)"
                stroke-width=4></circle>
        <circle class="c3" cx="50%" cy="50%" r=73
                fill="none"
                stroke="hsl(8,34%,45%)"
                stroke-width=2></circle>
      </g>
      <circle class="c4" cx="50%" cy="50%" r=60
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=2></circle>
    </g>
    <g id="ring4">
      <circle class="c1" cx="50%" cy="50%" r=40
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=1></circle>
      <circle class="c2" cx="50%" cy="50%" r=35
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=1></circle>
      <circle class="c3" cx="50%" cy="50%" r=30
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=1></circle>
      <circle class="c4" cx="50%" cy="50%" r=18
              fill="hsl(218,38%,76%)"></circle>
    </g>
    <g id="ring1">
      <circle class="c1" cx="50%" cy="50%" r=125
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=6></circle>
      <circle class="c2" cx="50%" cy="50%" r=125
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=6></circle>
      <circle class="c3" cx="50%" cy="50%" r=122
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=2></circle>
    </g>
  </svg>
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

html, body {
  height: 100%;
  font-family: Roboto Mono;
  background-color: hsl(243,12%,29%);
}
TweenMax.set("#ring1, #ring2,\
    #ring2 .c4, #ring2 .c5, #ring2 .c6, #ring2 .c7,\
    #ring2-1, #ring3,\
    #ring3-1, #ring3 .c4,\
    #ring4, #ring4 .c1, #ring4 .c2,\
    #ring4 .c3, #ring4 .c4", { transformOrigin: "50% 50%" })

function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

TweenMax.set("#ring1 .c1", {drawSVG: "0% 25%"})
TweenMax.set("#ring1 .c2", {drawSVG: "50% 75%"})

TweenMax.set("#ring2 .c4", {drawSVG: "0% 0%"})
TweenMax.set("#ring2 .c5", {drawSVG: "0% 0%"})
TweenMax.set("#ring2 .c6", {drawSVG: "0% 0%"})
TweenMax.set("#ring2 .c7", {drawSVG: "0% 0%"})

TweenMax.set("#ring3 .c1", {drawSVG: "0% 25%"})
TweenMax.set("#ring3 .c2", {drawSVG: "50% 75%"})
TweenMax.set("#ring3 .c4", {drawSVG: "60%"})

TweenMax.set("#ring4 .c1", {drawSVG: "60%", rotation: 120})
TweenMax.set("#ring4 .c2", {drawSVG: "60%", rotation: 40})
TweenMax.set("#ring4 .c3", {drawSVG: "60%", rotation: 180})

var u = 0.75

TweenMax.to("#ring1", 60*u, {rotation: -360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring2-1", 120*u, {rotation: 360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring2 .c4", 10*u, {rotation: 360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring2 .c5", 10*u, {rotation: 360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring2 .c6", 10*u, {rotation: 360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring2 .c7", 10*u, {rotation: 360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring3-1", 30*u, {rotation: 360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring3 .c4", 10*u, {rotation: -360, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring4 .c1", 5*u, {rotation: 360 + 120, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring4 .c2", 10*u, {rotation: -360 + 40, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring4 .c3", 2*u, {rotation: 360 + 180, repeat: -1, ease: Linear.easeNone})
TweenMax.to("#ring4 .c4", 2*u, {scale: 1.15, yoyo: true, repeat: -1, ease: Power2.easeInOut})

var timeout
document.body.addEventListener("mousemove", move)
document.body.addEventListener("touchmove", move)

function move(e) {
  e.preventDefault()
  clearTimeout(timeout)
  TweenMax.to("#move-text", 1, { opacity: 0 })
  var px = e.clientX
  var py = e.clientY
  if (e.touches) {
    px = e.touches[0].clientX
    py = e.touches[0].clientY
  }
  var w = window.innerWidth / 2
  var h = window.innerHeight / 2
  var nx = (px - w) / w
  var ny = (py - h) / h

  var tx = nx * 150
  var ty = ny * 60

  animCircles(tx, ty)  
  timeout = setTimeout(function() {
    animCircles(0,0)
  }, 2000)
}

function animCircles(tx, ty) {
  var tl = new TimelineMax()
  var rf = [1,0.5,0.25,0.125]
  for (var i = 1; i < 5; i++) {
    tl.to("#ring" + i, 2.5, {x: tx * rf[i], y: ty * rf[i - 1]}, "a")
  }
}

var diskTotal = 423
var diskMax = 2048
var energyMax = 50
var bandwidthMax = 32
var timeMax = 2400

function updateData() {
  var time = new Date()
  var timeValue = pad(time.getHours() * 100 + time.getMinutes(),4)
  var tp = timeValue/timeMax*100
  document.getElementById("time-text").textContent = timeValue + "HRS"
  TweenMax.to("#ring2 .c4", 0.5, { drawSVG: "0% "+ tp +"%" })
  
  var energy = Math.floor(Math.random()*30 + 10)
  var ep = energy/energyMax*100
  document.getElementById("energy-text").textContent = energy + "W"
  TweenMax.to("#ring2 .c5", 0.5, { drawSVG: "0% "+ ep +"%" })
  
  var bandwidth = Math.floor(Math.random()*20 + 5)
  var dp = bandwidth/bandwidthMax*100
  document.getElementById("bandwidth-text").textContent = bandwidth + "Mbps"
  TweenMax.to("#ring2 .c6", 0.5, { drawSVG: "0% "+ dp +"%" })
  
  diskTotal = Math.floor(diskTotal*10 + 1) / 10
  diskTotal = diskTotal > diskMax ? 423 : diskTotal
  var dip = diskTotal/diskMax*100
  document.getElementById("disk-text").textContent = diskTotal + "GB"
  TweenMax.to("#ring2 .c7", 0.5, { drawSVG: "0% "+ dip +"%" })
  
  setTimeout(updateData, 2000)
}
updateData()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js