<!--best viewed in chrome-->

<div class="rate-happiness  clearfix">

  <div class="rate-happiness__question">How happy do you feel today?
  <span>(Drag the bar to reflect how you feel!)</span></div>

  <svg version="1.1" id="rate-happiness__input" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 550 550" enable-background="new 0 0 550 550" xml:space="preserve">
                <circle fill="none" stroke="#FFF" stroke-width="30" cx="275" cy="275" r="250" stroke-opacity="0.3" />
                <g class="circle-outer-wrapper">
                    <circle class="circle-outer" fill="none" stroke="#FFF" stroke-width="30" cx="275" cy="275" r="250" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="0" transform="rotate(360 275 275)" />
                </g>
                <g class="slider">
                    <g>
                        <circle fill="transparent" cx="275" cy="275" r="265" />
                    </g>
                    <circle fill="#d4d4d4" cx="525" cy="280" r="10" class="button" />
                </g>
                <g class="eyes">
                    <ellipse class="eye-1" fill="#FFFFFF" cx="317.499" cy="189.5" rx="38.499" ry="30" />
                    <ellipse class="eye-2" fill="#FFFFFF" cx="317.499" cy="189.5" rx="38.499" ry="30" />
                </g>
                <path class="mouth" fill="none" stroke="#FFF" stroke-width="30" stroke-linecap="round" d="M135.001,335.836 c24.785-9.947,42.154-33.65,41.997-61.216c-0.154-27.276-17.428-50.588-41.909-60.456" />
            </svg>

  <div class="rate-happiness__number">
    <span>0</span>
  </div>

  <div class="rate-happiness__label"></div>

</div>

<div class="rate-happiness__bg"></div>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    html {
      width: 100%;
      height: 100%;
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      text-transform: lowercase;
      overflow-x: hidden;
    }
    
    body {
      margin: 0;
      padding: 50px;
    }
    
    .happiness-driver {
      position: relative;
    }
        
    .happiness-driver__rating {
      display: none;
    }
    
    .rate-happiness {
      display: block;
      position: relative;
      text-align: center;
      color: #FFF;
    }
        
    .rate-happiness__question {
      display: block;
      font-size: 35px;
    }
    
    .rate-happiness__question span {
      display: block;
      margin-top: 15px;
      font-size: 18px;
    }

    #rate-happiness__input {
      display: block;
      position: relative;
      margin: 30px auto;
      visibility: hidden;
      width: 450px;
      height: 450px;
    }
    
    .rate-happiness__number {
      position: relative;
      display: none;
      margin: 0 auto 0 auto;
      width: 80px;
      height: 80px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background: #FFF;
      color: #9150ec;
      font-size: 35px;
      text-align: center;
    }
    
    .rate-happiness__number:before {
      content: '';
      position: absolute;
      top: -5px;
      left: 50%;
      margin-left: -5px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 7px solid #FFF;
    }
    
    .rate-happiness__number span {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      margin-top: -15px;
      line-height: 35px;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 35px;
    }
    
    .rate-happiness__bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(#7b7ef0 0%, #a875f0 80%);
      z-index: -1;
    }
    
    .rate-happiness__label {
      display: block;
      margin-top: 15px;
      color: #FFF;
      font-size: 35px;
      text-align: center;
      font-weight: 700;
      text-transform: uppercase;
    }
rateHappiness = function() {

  var rateHappinessInput = $('#rate-happiness__input'),
    circleOuter = $('.circle-outer'),
    slider = $('.slider'),
    eye1 = $('.eye-1'),
    eye2 = $('.eye-2'),
    eyes = '.eye-1, .eye-2',
    mouth = '.mouth',
    rateHappinessBG = '.rate-happiness__bg',
    rateHappinessNumberLabel = $('.rate-happiness__number span'),
    revealElem = $('.rate-happiness__number, .rate-happiness .btn'),
    rateHappinessLabel = $('.rate-happiness__label')

  
  if (rateHappinessInput.length > 0) {
    TweenMax.set(rateHappinessInput, {
      visibility: 'visible',
      rotation: -90
    })
    
    TweenMax.set([circleOuter], {
      drawSVG: '1.6% 0%',
      transformOrigin: '50% 50%'
    })
       
    TweenMax.set([slider], {
      transformOrigin: '50% 50%'
    })

    TweenMax.set([eye1], {
      y: -10
    })

    TweenMax.set([eye2], {
      y: +185
    })

    MorphSVGPlugin.convertToPath(eye1);
    MorphSVGPlugin.convertToPath(eye2);
    
    var tlEyes = new TimelineMax({
      paused: true,
      repeat: -1,
      yoyo: true
    });

    tlEyes.to(eyes, 1, {
        morphSVG: 'M349,189.167 C349,207.0240228162857,334.5240228162857,221.5,316.667,221.5,298.80997718371424,221.5,284.33399999999995,207.0240228162857,284.33399999999995,189.167,284.33399999999995,171.3099771837143,298.80997718371424,156.834,316.667,156.834,334.5240228162857,156.834,349,171.3099771837143,349,189.167z'
      })
      .to(eyes, 1, {
        morphSVG: 'M294.666,225.765v-74.049c3.206-0.965,6.41-1.443,9.619-1.443c10.578,0,19.637,3.761,27.174,11.298 c7.535,7.537,11.297,16.587,11.297,27.17c0,10.578-3.762,19.639-11.297,27.168c-7.537,7.538-16.596,11.305-27.174,11.305 C301.076,227.213,297.872,226.73,294.666,225.765L294.666,225.765z'
      })

    var tlMouth = new TimelineMax({
      paused: true,
      repeat: -1,
      yoyo: true
    });

    tlMouth.to(mouth, 1, {
      morphSVG: "M226.105,395.352c-46.977-19.485-79.9-65.917-79.604-119.915 c0.292-53.432,33.031-99.099,79.438-118.428"
    });

    Draggable.create(slider, {
      type: "rotation",
      throwProps: true,
      bounds: {
        minRotation: 1,
        maxRotation: 360
      },
      throwProps: true,
      onDrag: function() {

        var rotation = Math.ceil(slider[0]._gsTransform.rotation);
        var intHSL = Math.ceil(-((rotation / (360 / 220)) + 125));
        var percentage = Math.ceil(((rotation / 360) * 100));
        var lightness = Math.ceil(70 - ((percentage / 7)));

        TweenMax.to(rateHappinessBG, 0, {
          backgroundImage: 'linear-gradient(to bottom,hsl(' + intHSL + ',80%,' + lightness + '%) 0%,hsl(' + (intHSL + 30) + ',80%,' + lightness + '%) 80%)'
        });

        animation(percentage);

        rateHappinessNumberLabel.text(percentage).css('color', 'hsl(' + (intHSL + 30) + ',80%,' + lightness + '%)');
        revealElem.show();

        tlMouth.progress((percentage / 100)).pause();
        tlEyes.progress((percentage / 100)).pause();
      }
    });

    function animation(myVar, rotation) {

      switch (true) {
        case (myVar > 75):
          rateHappinessLabel.text('Very Happy');
          break;
        case (myVar > 50):
          rateHappinessLabel.text('Happy');
          break;
        case (myVar > 25):
          rateHappinessLabel.text('Feeling OK');
          break;
        case (myVar > 10):
          rateHappinessLabel.text('Unhappy');
          break;
        default:
          rateHappinessLabel.text('Very Unhappy');
          break;
      }

      var tl = new TimelineMax({});

      tl.to(circleOuter, 0, {
        drawSVG: myVar + '% 0%',
        ease: Sine.easeInOut
      })

      return tl;

    }

    //var xStart, yStart = 0;

    //document.addEventListener('touchstart', function (e) {
    //    xStart = e.touches[0].screenX;
    //    yStart = e.touches[0].screenY;
    //});

    //document.addEventListener('touchmove', function (e) {
    //    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    //    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    //    if ((yMovement * 3) > xMovement) {
    //        e.preventDefault();
    //    }
    //});
  }
}

rateHappiness();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12
  4. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=132