Playing with SVG again

by Matthew Day

HTML

<div class="kitty">
    <span>
        <svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
            <g>
                <polygon class="yellow" fill="none" stroke="#000000" stroke-miterlimit="10" points="27.5,87.5 5.3,49 27.5,10.5 71.9,10.5 94.1,49 71.9,87.5 	
		"/>
	<polygon class="gold" fill="none" stroke="#000000" stroke-miterlimit="10" points="12.6,74.7 10,30.2 47.1,5.4 86.9,25.3 89.4,69.8 52.3,94.6 	
		"/>
	<polygon class="green" fill="none" stroke="#000000" stroke-miterlimit="10" points="18,18.6 61.1,7.1 92.8,38.5 81.5,81.4 38.3,92.9 6.6,61.5 	
		"/>
            </g>
        </svg>
    </span>
</div>

CSS

.kitty {
    background: url("http://www.placekitten.com/g/300/300") center center no-repeat;
}

#icon {
/*     width: 90px;
    border: 1px solid red; */
}

.yellow {
    stroke: #bda54a;
    stroke-width: 1px;
    transition: all 1s ease;
}
.yellow:hover {
    stroke-width: 2px;
}

.gold {
    stroke: #b8963c;
    stroke-width: 1px;
}

.green {
    stroke: #736839;
    stroke-width: 1px;
}