HTML
<svg x='0' y='0' viewBox='0 0 420 100' width='200px' height='60px' className={ props.className }>
<defs>
<linearGradient id="logo-gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="20%" stopColor="#87c2dd">
<animate attributeName="stop-color" values="#87c2dd; #015a83; #87c2dd" dur="2s" repeatCount="indefinite"></animate>
</stop>
<stop offset="80%" stopColor="#015a83">
<animate attributeName="stop-color" values="#015a83; #87c2dd; #015a83" dur="2s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d='M302.2,42.4c0,4.9-4,7.2-7.7,7.2c-2.8,0.1-5.2-1.5-5.2-4.8c0.1-4.2,3.5-7.5,7.7-7.4c0,0,0,0,0,0 C299.7,37.5,302.2,39.1,302.2,42.4z M82.8,37.7c-4.1-0.1-7.6,3.2-7.7,7.3c0,0,0,0,0,0c0,3.3,2.5,4.8,5.2,4.8c3.7,0,7.7-2.4,7.7-7.2 C88,39.3,85.6,37.7,82.8,37.7L82.8,37.7z M67.1,85.5L67.1,85.5C63.2,109.1,93.8,100,93.8,100c-15.9-0.8-17.1-8.8-16.4-13l7.2-32.1 H73.9L67.1,85.5z M59.7,79.1L59.7,79.1l2.3-8.6c2-9,1.2-16.2-9.1-16.2c-5.4-0.1-10.5,2.3-13.8,6.6c-0.5,0.7-1.1,1.6-1.8,2.7 c0.2-1.4,0.6-2.8,1.1-4.2c-1.2-3.4-3.9-5.1-9.3-5.1c-4.9,0-10,2-12.8,6.5l0,0c-0.4,0.6-0.9,1.4-1.5,2.3c0.3-1.7,0.8-3.3,1.4-4.9 c-1.5-4.8-11-4.4-15.8-3.3H0.5c3.2,2.6,5.1,6.2,4.9,11.6S0,91.8,0,91.8h10.3l4.5-20.9c1.1-5.2,4.9-8,8.7-8s5.9,2.9,4.8,7.8 l-4.5,21.1h10.3l4.6-21.2c1.1-4.9,4.6-7.8,8.3-7.8s5.5,2.9,4.3,7.7l-0.7,3.4c-1.5,7-12,45.8,40.6,30.8 C91.2,104.7,52.5,114.6,59.7,79.1L59.7,79.1z M132.6,50.5c0-8-5.4-12.7-13.9-12.7H95.9l-9.5,44.8c0,0-2.2,8.9,6.1,8.9h17 c12.6,0,20.8-8.3,20.8-18.5c0-4.2-1.8-7.6-6-9.2C129.3,61.3,132.5,56.2,132.6,50.5z...