JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="
    width: 200px;
    height: 200px;
">
    <title>naive locus</title>
    <defs>
        <pattern id="pattern" patternUnits="userSpaceOnUse" width="118" height="108"><image xlink:href="https://31.media.tumblr.com/9766ee4952b593bbc1af5e2d2249c858/tumblr_inline_mxnnn7dXwh1s16nrs.jpg" width="118" height="108">
</image>
            <animate attributeName="x" values="0;15;0" dur="3s" begin="link.mouseover" end="link.mouseout" repeatCount="indefinite" />
        </pattern>
    </defs>
       <path fill="url(#pattern)" d="m0,1.5l59,102.5l55,-102.5l-114,0z" id="path"/>
</svg>
    </a>

CSS

svg {
    margin-left:120px;
    border: none;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform: translateZ(0);
}
a:hover svg, a:focus svg {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
}