<h3> </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>
<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>