SVG hook

by jeum

HTML

<svg version="1.1" id="svghook" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 10 10" width="20">
        <polyline id="svghookbutton" points="-8,-8 8,0 -8,8 "></polyline>
    </svg>

CSS

#svghook {
    fill: black;                /* SVG: couleur de remplissage */
    stroke: black;
    stroke-width: 2px;      /* SVG: Ă©paisseur de ligne (avant scale) */
    stroke-linejoin: round;    /* SVG: type de jointure */
}
#svghookbutton {
    stroke: white;
    stroke-width: 2px;
    /* animation rotate */
    -webkit-transition: all 0.75s ease-out;
    transition: all 0.75s ease-out;
    -webkit-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
}
#svghook:hover #svghookbutton {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}