<h1>SVG toggle animation</h1>
<h2>A full css/svg checkbox button</h2>
<hr>
<div class='checkbox'>
  <label class='checkbox__container'>
    <input class='checkbox__toggle' type='checkbox'>
    <span class='checkbox__checker anim'></span>
    <svg class='checkbox__path' id='checkbox__path' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
      <path class='path path--top' d='M194.27,59.599l42.438-42.028
		c-9.086-10.419-22.443-17.006-37.215-17.006c-35.529,0-46.643,27.712-75.047,27.712s-38-27.712-75.072-27.712
		c-13.45,0-25.621,5.355-34.514,14.045l48.098,48.113'></path>
      <path class='path path--bottom' d='M183.561,48.822l42.521,42.794
		c-7.649,4.874-16.759,7.697-26.589,7.697c-34.914,0-46.643-30.202-75.06-30.202s-35.527,30.202-75.06,30.202
		c-13.431,0-25.502-5.255-34.346-13.8l47.93-48.18'></path>
    </svg>
    <svg class='checkbox__bg' id='checkbox__bg' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
      <path class='shape-bg' d='M199.493,99.087c27.504,0,49.374-22.106,49.374-49.374S226.552,0.338,199.493,0.338c-35.529,0-46.643,27.712-75.047,27.712
		s-38-27.712-75.072-27.712C22.048,0.338,0,22.444,0,49.713s21.826,49.374,49.374,49.374c39.533,0,46.643-30.202,75.06-30.202
		S164.58,99.087,199.493,99.087z'></path>
    </svg>
  </label>
</div>
<hr>
<footer>
  <a class='link' href='http://timguignard.com' target='_blank'>timguignard.com</a>
</footer>

//GLOBAL PRESENTATION
body{
  background-color: #eee;
  padding-top: 40px;
}
h1{
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
h2{
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
hr{
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
footer{
  text-align: center;
  padding-bottom: 50px;
}
.link{
  text-align: center;
  color: #278fb2;
}
//end global


//variables
$color-off: #bf1e1e;
$color-on: #0cb018;

//checkbox
.checkbox{
  width: 200px;
  margin: 0 auto;
  &__container{
    display: block;
    position: relative;
    height: 82px;
  }
  &__toggle{
    display: none;
    &:checked + .checkbox__checker {
			//left: calc(100% - 76px);
      //background-color: $color-on;
		}
    &:checked ~ .checkbox__path{
      .path--top{
        stroke-dashoffset: 0px;
        stroke: $color-on;
      }
      .path--bottom{
        stroke-dasharray: 14px 360px;//size of dash / space between...
        stroke-dashoffset: 0px;
        stroke: $color-on;
      }
    }
  }
  
  &__checker {
		position: absolute;
		top: 4px;
		left: 4px;
		//box-shadow: 0px 2px 6px rgba(0,0,0,.5);
		z-index: 1;
		display: block;
		width: 73px;
		height: 73px;
		background-color: #fff;
    //opacity: .5;
		border-radius: 50%;
		//transition: 1s;
    z-index: 9;
	}

  &__bg, &__path{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &__bg{
    .shape-bg{
      fill: #aaa;
    }
  }
  &__path{
    z-index: 9;
    .shape-bg{
      fill: #fff;
      stroke-width: 1px;
      stroke: #aaa;
    }
    .path{
      stroke-width: 4px;
      stroke: $color-off;
      fill: none;
      stroke-linecap: round;
      transition: 1s;
      &--top{
        stroke-dasharray: 33px 360px;//size of dash / space between...
        stroke-dashoffset: -336px;
      }
      &--bottom{
        stroke-dasharray: 33px 360px;//size of dash / space between...
        stroke-dashoffset: -324px;
      }
    }
  }
  
  #checkbox__circle{
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: #fff;

  }
}




//Animation
.anim{
  transition-timing-function: cubic-bezier(0.385, -0.600, 0.685, 1.590);
  transition-duration: .2s;
}
.anim--smallerize{
  //transform: scale(.6, .6);
}
.anim--go-right{
   left: calc(100% - 76px);
}
.anim--speed{
  //animation-delay: .2s;
  animation-duration: .5s;
  animation-name: speedSmall;  
}

//transitions test
@keyframes speed {
  0%   { transform: scaleY(.6); }
  30%   { transform: scaleY(2.3); }
  60%   { transform: scaleY(2.3); }
  100%  { transform: scaleY(.6); }
}
@keyframes speedSmall {
  0%   { transform: scale(1, 1); }
  25%   { transform: scale(.7, .7); }
  35%   { transform: scale(.7, .7); }
  50%   { transform: scale(.7, .3); }
  65%   { transform: scale(.7, .7); }
  75%   { transform: scale(.7, .7); }
  100%  { transform: scale(1, 1); }
}

var toggler = $('.checkbox__toggle');
var circle = $('.checkbox__checker');

var time1 = 150;
var time2 = 800;

toggler.click(function(){
  circle.removeClass('anim--speed');
  if($(this).is(":checked")){
    setTimeout(function(){
      circle.addClass('anim--speed');
    },10);
    setTimeout(function(){
      circle.addClass('anim--go-right');
    },time1);
  }
  else{
    setTimeout(function(){
      circle.addClass('anim--speed');
    },10);
    setTimeout(function(){
      circle.removeClass('anim--go-right');
    },time1);
  }
})