SVGでアレ

HTML

<svg id="face" height="200" width="400">

    
    <a id="eyes" xlink:href="http://www.madoka-magica.com/">
        <g id="leftEye" class="eye">  
            <circle  cx="100" cy="100" r="30" fill="#CD3B68"
                stroke="#222" stroke-width="2"               />
            <circle cx="100" cy="100" r="16" fill="#86112C" />
            <circle cx="110" cy="90" r="8" fill="#FFF" />
        </g>
        
        <g id="rightEye" class="eye">
            <circle id="re" cx="300" cy="100" r="30" fill="#CD3B68"
                stroke="#222" stroke-width="2" />
            <circle cx="300" cy="100" r="16" fill="#86112C" />
            <circle cx="310" cy="90" r="8" fill="#FFF" />
        </g>
    </a>


    <g id="mouth">
        <path d="M170,190 q10, 10 25 0" fill="none" stroke="#222" stroke-width="2"  />
        <path d="M195,190 q10, 10 25 0" fill="none" stroke="#222" stroke-width="2"  />
    </g>


</svg>

CSS

.eye:hover{ opacity:0.6}