ONLY logos

by shrpne

HTML

<!-- ONLY logos  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="1298.6 -1043.6 261.7 73.4" enable-background="new 1298.6 -1043.6 261.7 73.4" xml:space="preserve">
<g>
	<path d="M1334.6-1043.5c-19.9,0-36.1,16.1-36.1,36.1c0,19.9,16.1,36.1,36.1,36.1c19.9,0,36.1-16.1,36.1-36.1
		C1370.7-1027.3,1354.5-1043.5,1334.6-1043.5z M1334.6-971.7c-19.7,0-35.7-16-35.7-35.7c0-19.7,16-35.7,35.7-35.7
		c19.7,0,35.7,16,35.7,35.7C1370.4-987.7,1354.4-971.7,1334.6-971.7z"/>
	<polygon points="1441.3,-1042.5 1441.3,-973.5 1384.3,-1042.5 1384.3,-1042.5 1384.3,-1042.5 1384.3,-1042.5 1384.3,-1042.5 
		1384,-1042.5 1384,-973 1384.3,-973 1384.3,-1042 1441.3,-973 1441.3,-973 1441.3,-973 1441.7,-973 1441.7,-1042.5 	"/>
	<polygon points="1505,-973.3 1460,-973.3 1460,-1042.5 1459.7,-1042.5 1459.7,-973.3 1459.7,-973 1459.7,-973 1460,-973 1460,-973 
		1505,-973 	"/>
	<polygon points="1560.3,-1043.4 1560,-1043.6 1524.7,-1004.7 1489.5,-1043.6 1489.2,-1043.4 1524.5,-1004.4 1524.5,-973 
		1524.9,-973 1524.9,-1004.4 	"/>
</g>
<text transform="matrix(1 0 0 1 1325.3936 -1003.8657)" fill="#00ABEC" font-family="'HouschkaPro-Bold'" font-size="8.36">WEB</text>
<text transform="matrix(1 -2.600000e-004 2.600000e-004 1 1462.2031 -975.5737)" fill="#E80E16" font-family="'HouschkaPro-Bold'" font-size="8.3608">BRANDING</text>
</svg>
<svg class="only-icon only-icon-link" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 932 250">
                    <!-- small width 771 -->
                    <symbol id="svg-logo-only-n">
                        <polygon class="svg-logo-only-n-left" points="0,0 37,0 37,240 0,240"/>
                        <polygon class="svg-logo-only-n-middle" points="232,240 185,240 0,0 47,0"/>
                        <polygon class="svg-logo-only-n-right" points="175,0 212,0 212,240 175,240"/>
                    </symbol>
                   ...

SCSS

[class^="svg-logo-only-"] {transition: 0.3s;}
.svg-logo-only-n-left, .svg-logo-only-n-right, .svg-logo-only-y-bottom, .svg-logo-only-l-left, .svg-logo-only-dot {opacity: 0;}
.only-icon-link:hover {
  .svg-logo-only-use-n {transform: translateX(32px);}
  .svg-logo-only-n-middle {transform:scaleX(0.916);}
  .svg-logo-only-use-l {transform: translateX(25px);}
  .svg-logo-only-l-bottom {transform: scaleX(0.685);}
  .svg-logo-only-use-y {transform: translateX(157px);}
  .svg-logo-only-n-left, .svg-logo-only-n-right, .svg-logo-only-y-bottom, .svg-logo-only-l-left, .svg-logo-only-dot {opacity: 1;}
}

.only-icon {color: #000;}
.only-icon:hover {color: #111;}