SVG hook

by jeum

HTML

<div id="go">
    <svg version="1.1" id="svghook1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 0 42 400" height="400">
        <rect id="go1" x="-4" y="0" width="8" height="400"></rect>
    </svg>
    <svg version="1.1" id="svghook2" xmlns="http://www.w3.org/2000/svg" viewBox="-21 0 42 400" height="400">
        <circle cx="0" cy="200" r="21" stroke-width="0px"></circle>
        <polyline points="-8,192 10,200 -8,208 " stroke-width="4px" fill="none"></polyline>
    </svg>
</div>

CSS

#go{
    fill: black;
}
#go:hover {
	fill: red;
}
#svghook2 {
    stroke: white;
}

svg {
    position: absolute;
    -webkit-transition: all 0.75s ease-out;
    transition: all 0.75s ease-out;
}

JavaScript

// play/pause
var state = false;
var play = function()
{
    state = !state;
    if(state)
    {
        document.getElementById('svghook2').style.webkitTransform = 'translate(300px, 0px) rotate(180deg)';
    	document.getElementById('svghook2').style.transform = 'translate(300px, 0px) rotate(180deg)';
        document.getElementById('svghook1').style.webkitTransform = 'translate(300px, 0px)';
    	document.getElementById('svghook1').style.transform = 'translate(300px, 0px)';
    }
    else
    {
        document.getElementById('svghook2').style.webkitTransform = 'translate(0px, 0px) rotate(0deg)';
    	document.getElementById('svghook2').style.transform = 'translate(0px, 0px) rotate(0deg)';
        document.getElementById('svghook1').style.webkitTransform = 'translate(0px, 0px)';
    	document.getElementById('svghook1').style.transform = 'translate(0px, 0px)';
    }
}
document.getElementById('go').addEventListener('click', play, false);