<h3>&nbsp;</h3>

<style type="text/css">
 .svg-icons{width:300px;position:relative;margin:50px auto;}
 .svg-icons a svg{background-color:#eee;stroke:#ff0000;}
 .svg-icons a svg g path{transition: all 1s ease;}
 .svg-icons a.on svg{stroke:#000000;}
</style>

<div class="svg-icons">
 <a onclick="$(this).toggleClass('on');" href="javascript:void(0);">
 <svg xmlns="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 300 300" width="300px" height="300px">
  <g fill="transparent" stroke-width="50">
   <path class="line1" stroke-linecap="round" d="M 42 50 l 215 0" />
   <path class="line2" stroke-linecap="round" d="M 42 150 l 215 0" />
   <path class="line3" stroke-linecap="round" d="M 42 250 l 215 0" />
  </g>
 </svg>
 </a>
</div>