index.html

<a href="http://50w.co" aria-label="Check out 50w">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#ffffff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
    <defs>  
        <clipPath id="path-1">  
            <path d="M0,0 L115,115 L142,142 L250,250 L250,0 Z"/>  
        </clipPath>  
    </defs>
    <path d="M0,0 L115,115 L142,142 L250,250 L250,0 Z"></path>
    <text class="w" x="0" y="-10" font-size="40" dy="0" clip-path="url(#path-1)">
        <tspan x="0" dy="40">wwwwwwwwwwwwwwwwwwwwwwwwww</tspan>
        <tspan x="0" dy="40">wwwwwwwwwwwwwwwwwwwwwwwwww</tspan>
        <tspan x="0" dy="40">wwwwwwwwwwwwwwwwwwwwwwwwww</tspan>
        <tspan x="0" dy="40">wwwwwwwwwwwwwwwwwwwwwwwwww</tspan>
        <tspan x="0" dy="40">wwwwwwwwwwwwwwwwwwwwwwwwww</tspan>
        <tspan x="0" dy="40">wwwwwwwwwwwwwwwwwwwwwwwwww</tspan>
    </text>
</svg>

<style>
    .w { 
        font: 40px sans-serif;
        fill:#FFFFFF;
    }
    .w:hover {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
</style>
</a>