CodePen Embed - SVG symbol

<body>
  <svg display="none">
		<defs>
			<symbol id="dogstamp" viewBox="0 0 395 372">
				<path d="M34.914,114.248c0,0-32.878,9.608-34.629,59.312c-2.138,60.633,7.19,75.045,30.281,76.292 c23.739,1.279,44.39-13.951,46.328-65.332C78.834,133.139,56.761,114.016,34.914,114.248z M358.47,110.754 c0,0,33.087,8.895,35.965,58.549c3.51,60.573-5.489,75.183-28.546,76.927c-23.7,1.791-44.694-12.989-47.8-64.315 C314.983,130.589,336.623,110.993,358.47,110.754z M245.427-0.007c0,0,32.763-1.192,47.8,64.315 c8.205,35.751,7.555,73.17-34.428,76.991c-36.608,3.332-49.584-73.557-47.932-76.1C212.519,62.656,198.45,8.075,245.427-0.007z  M139.536,1.137c0,0-32.782-0.485-46.328,65.332c-7.394,35.919-5.894,73.314,36.165,76.228c36.674,2.54,47.899-74.61,46.193-77.118 S186.684,8.205,139.536,1.137L139.536,1.137z M354.992,322.966c0,0-7.011,48.91-58.294,47.78c-58-1.278-62.4-17.752-94.326-16.663 c-36.128,1.233-114,45.875-147.2-10.2c-31.709-53.54,32.652-85.391,45.993-94.8s24.079-99.183,98.939-95.369 c63.601,3.241,63.974,67.771,77.346,75.784C304.603,245.775,363.644,270.675,354.992,322.966z"/>
			</symbol>
		</defs>
	</svg>
  <div>
    <svg x="0" y="0" width="192px" height="166px" viewBox="0 0 192 166">
	    <use class="dogitem dogitem1" fill="#db8c81" x="16px" y="16px" width="114px" height="109px" xlink:href="#dogstamp"></use>
	    <use class="dogitem dogitem2" fill="#302b1a" x="0" y="64px" width="45px" height="44px" xlink:href="#dogstamp"></use>
	    <use class="dogitem dogitem3" fill="#d2151a" x="23px" y="109px" width="55px" height="52px" xlink:href="#dogstamp"></use>
	    <use class="dogitem dogitem4" fill="#037551" x="85px" y="0" width="46px" height="43px" xlink:href="#dogstamp"></use>
	    <use class="dogitem dogitem5" fill="#91704b" x="134px" y="16px" width="58px" height="55px" xlink:href="#dogstamp"></use>
	    <use class="dogitem dogitem6" fill="#2c2967" x="76px" y="63px" width="91px" height="85px" xlink:href="#dogstamp"></use>
    </svg>
  </div>
  <a href="#" class="btn">dog<i><svg x="0" y="0" width="18px" height="17px" viewBox="0 0 18 17"><use class="dogicon" fill="#fff" x="0" y="0" width="18px" height="17px" xlink:href="#dogstamp"></use></svg></i></a>
</body>

svg {
 max-width: 100%; 
}

.dogitem {
  transition: .3s;
}

.dogitem:hover {
  fill: #ffd700;
}

.btn {
  display: block;
  width: 120px;
  font-size: 16px;
  padding: 12px 0;
  color: #fff;
  background-color: #2c2967;
  text-align: center;
  text-decoration: none;
}

.btn i {
  margin-left: 4px;
  vertical-align: -3px;
}

.btn:hover {
  color: #d2151a;
}

.btn:hover .dogicon {
  fill: #d2151a;
}

This Pen is owned by masayuki yamada on CodePen.

See more by @yamada-evoworx on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.