<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     class="svg-switch-container" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"  
     x="0px" y="0px"
	  viewBox="0 0 500 300" xml:space="preserve">
  <defs>
     <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="360" y1="149.0088" x2="360" y2="331.0775">
		<stop  offset="0" style="stop-color:#636F7C"/>
		<stop  offset="1" style="stop-color:#5A6571"/>
	</linearGradient>
    
    <filter id="inset-shadow-big-bottom" x="-50%" y="-30%" width="200%" height="160%">
        <feOffset dx="0" dy="2"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="1"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="#FFF" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="0.5"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>                    <!-- Put shadow over original object -->
      
        <feOffset dx="0" dy="-4"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="#999" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="0.5"/> 
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>                    <!-- Put shadow over original object -->
      
      
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> 
      <feOffset dx="0" dy="3" result="offsetblur"/>

      <feComponentTransfer result="shadow1" in="offsetblur">
        <feFuncA type="linear" slope="0.25"/>
      </feComponentTransfer>
      
      <feMerge> 
        <feMergeNode in="shadow1"/>
        <feMergeNode in="final-shadow-2"/> 
      </feMerge>
      
      
    </filter>
    
     <filter id="inset-shadow-container">
        <feOffset dx="0" dy="2"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="#555" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="1"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->
    </filter>
    
    <filter id="inset-shadow-container-big">
        <feOffset dx="0" dy="0"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="5"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="#555" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="1"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->
    </filter>
    
    <filter id="big-gaussian-blur" x="-50%" y="-20%" width="150%" height="150%">
      <feGaussianBlur stdDeviation="25" result="base-blur"/>
    </filter>
    

    <!-- To prevent shadow clipping we need to set x value to less than 0. They say it affects performance though... -->
    <filter id="drop-shadow" 
            x="-10%"
            y="0" 
            width="150%" height="120%">
      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="14" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 
              0 0 0 0.2 
              0 0 0 0 0 
              0.2 0 0 0 
              0 0 0.5 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="6" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
    
        <!-- To prevent shadow clipping we need to set x value to less than 0. They say it affects performance though... -->
    <filter id="drop-shadow-checkbox" 
            x="-10%"
            y="0" 
            width="120%" height="120%">
      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="10" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.0 0 0 
              0 0 0 0.0 
              0 0 0 0 0 
              0.0 0 0 0 
              0 0 0.35 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>

    
  </defs>
<g class='svg-switch' transform="translate(-130 -110)">
	<g id="mild-glow"
     style="fill:#F4847D;"
     opacity="1"
     filter="url(#big-gaussian-blur)">
			<path d="M254.949,330.381l-79.336-79.336c-6.1-6.1-6.1-15.991,0-22.091l79.336-79.336c6.1-6.1,15.991-6.1,22.091,0l79.336,79.336
				c6.1,6.1,6.1,15.991,0,22.091l-79.336,79.336C270.939,336.481,261.049,336.481,254.949,330.381z"/>
	</g>
	<path
        id="base-outline"
        filter="url(#drop-shadow)"
        style="fill:#F3F3F0;" d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z"/>

	<path id="base-container"
        style="fill:url(#SVGID_1_);" 
        filter="url(#inset-shadow-container-big)"
        d="M538.979,229.371l-76.344-76.344c-2.935-2.935-6.782-4.403-10.629-4.403H266.328v0.101
		c-3.274,0.363-6.452,1.791-8.962,4.301l-76.344,76.344c-5.87,5.87-5.87,15.388,0,21.258l76.344,76.344
		c2.51,2.51,5.689,3.938,8.962,4.301v0.101h185.678c3.847,0,7.694-1.468,10.629-4.403l76.344-76.344
		C544.849,244.759,544.849,235.241,538.979,229.371z"/>
	

   <path id="start_container" 
        style="fill:#525C6B;"
        class="position-container"
        filter="url(#inset-shadow-container)"
        d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C269.989,317.94,261.999,317.94,257.071,313.013z"/> 
  
    <path id="end_container"
        class="position-container"
        style="fill:#525C6B;"
        filter="url(#inset-shadow-container)"
        d="M445.083,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C458.001,317.94,450.011,317.94,445.083,313.013z"/>
	
  
   <text class="text-label noselect" x="225" y="255" >OFF</text>
   <text class="text-label noselect" x="430" y="255" >ON</text>  
  
  <g id="checkbox-off" transform="translate(0)"> 
		<path id="off-bot-cap" 
          style="fill:#F5F3EE;"
          filter="url(#drop-shadow-checkbox)"
          d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846l64.09-64.09
			c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
			C269.989,317.94,261.999,317.94,257.071,313.013z"/>
		<path id="off-color" style="fill:#F4847D;" d="M257.942,305.884l-57.832-57.832c-4.447-4.447-4.447-11.656,0-16.103l57.832-57.832
			c4.447-4.447,11.656-4.447,16.103,0l57.832,57.832c4.447,4.447,4.447,11.656,0,16.103l-57.832,57.832
			C269.599,310.331,262.389,310.331,257.942,305.884z"/>
		<path id="off-top-cap" 
          style="fill:#FFFFFF;"
          filter="url(#inset-shadow-big-bottom)" 
          d="M259.757,291.032l-44.795-44.795c-3.444-3.444-3.444-9.029,0-12.473
			l44.795-44.795c3.444-3.444,9.029-3.444,12.473,0l44.795,44.795c3.444,3.444,3.444,9.029,0,12.473l-44.795,44.795
			C268.786,294.477,263.202,294.477,259.757,291.032z"/>
	</g>
  
  <g id="control-group">
    	<path
        class="control-element"
        id="controlon"
        style="fill:transparent" d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z"/>
    
        	<path
        id="controloff"
        class="control-element"
        transform="translate(0 300)"
        style="fill:transparent" d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z"/>
  </g>
  
   <animateTransform xlink:href="#controlon" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="controlon.click"
                          dur="0.01s"
                          fill="freeze"
                         values="0 0 ; 0 300"
    <animateTransform />
  
    <animateTransform xlink:href="#controloff" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="controlon.click"
                          dur="0.01s"
                          fill="freeze"
                         values="0 300 ; 0 0"
    <animateTransform />
  
  <animateTransform xlink:href="#controlon" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="controloff.click"
                          dur="0.01s"
                          fill="freeze"
                         values="0 300 ; 0 0"
    <animateTransform />
  
    <animateTransform xlink:href="#controloff" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="controloff.click"
                          dur="0.01s"
                          fill="freeze"
                         values="0 0 ; 0 300"
    <animateTransform />  
  
  
  
    <animateTransform xlink:href="#checkbox-off" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="controlon.click"
                          dur="0.3s"
                          fill="freeze"
                         values="0;-5;200;180;188;"
                         keyTimes="0;0.1;0.5; 0.9;1" 
    <animateTransform />
  
   <animateTransform xlink:href="#checkbox-off" 
                      attributeName="transform"
                      attributeType="XML"
                      type="translate"
                      begin="controloff.click" 
                      dur="0.3s"
                      fill="freeze"
                      values="188;193;-12; 8; 0 "
                      keyTimes="0;0.1;0.5; 0.9;1"  
    <animateTransform />
  
    <animateTransform xlink:href="#mild-glow" 
                      attributeName="transform"
                      attributeType="XML"
                      type="translate"
                      begin="controloff.click" 
                      dur="0.3s"
                      fill="freeze"
                      values="188;193;-12; 8; 0 "
                      keyTimes="0;0.1;0.5; 0.9;1"  
    <animateTransform />
  
      <animateTransform xlink:href="#mild-glow" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="controlon.click"
                          dur="0.3s"
                          fill="freeze"
                         values="0;-5;200;180;188;"
                         keyTimes="0;0.1;0.5; 0.9;1" 
    <animateTransform />
  
  
  <? this one is using spline animation calc engine
  <animateTransform xlink:href="#checkbox-off" 
                      attributeName="transform"
                      attributeType="XML"
                          type="translate"
                          begin="start_container.click"
                          dur="0.5s"
                          fill="freeze"
                         values="188; 0;"
                         keySplines="
                          0.2 0.8 0.2 0.9;"
                       calcMode="spline"
    <animateTransform />?>
  
  <animate xlink:href="#off-color" 
                attributeName="fill"
                  begin="controlon.click"
                  dur="0.4s"
                  values="#F4847D;#A3CF5A;"
                  keySplines="
                  0.2 0.8 0.2 0.9;"
                  calcMode="spline"
                  fill="freeze"
                />
  
    <animate xlink:href="#off-color" 
                attributeName="fill"
                  begin="controloff.click"
                  dur="0.4s"
                  values="#A3CF5A;#F4847D;"
                  keySplines="
                  0.2 0.8 0.2 0.9;"
                  calcMode="spline"
                  fill="freeze"
                />
  
   <animate xlink:href="#big-gaussian-blur" 
                attributeName="x"
                  begin="controloff.click"
                  dur="0.2s"
                  values="0;-50%;"
                  fill="freeze"
                />
  
     <animate xlink:href="#big-gaussian-blur" 
                attributeName="x"
                  begin="controlon.click"
                  dur="0.2s"
                  values="-50%;0;"
                  fill="freeze"
                />
  
   <animate xlink:href="#mild-glow" 
                attributeName="fill"
                  begin="controlon.click"
                  dur="0.4s"
                  values="#F4847D;#A3CF5A;"
                  keySplines="
                  0.2 0.8 0.2 0.9;"
                  calcMode="spline"
                  fill="freeze"
                />
  
  <animate xlink:href="#mild-glow" 
                attributeName="fill"
                  begin="controloff.click"
                  dur="0.4s"
                  values="#A3CF5A;#F4847D;"
                  keySplines="
                  0.2 0.8 0.2 0.9;"
                  calcMode="spline"
                  fill="freeze" 
                />


</g>
</svg>
body{
  font-size: 20px;
  background-color: #d5d9e0;
  padding: 40px;
}
#checkbox-on{
  display: none;
}

.control-element{
  cursor: pointer;
}

.text-label{
  font-size: 1.8em;
  font-family: sans-serif;
  fill: #6D7788;
  text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);
   pointer-events: none;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.position-container{
  cursor: pointer;
}

.svg-switch-container{
  width: 16em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.