https://codepen.io/NickNoordijk/pen/VLvxLE?editors=1000#0
<svg width="336px" height="195px">
<defs>
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#000">
<animate attributeName="stop-color" values="#000; #fff; #fff; #000" dur="4s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#fff">
<animate attributeName="stop-color" values="#fff; #000; #000; #fff" dur="4s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="M315.69646,6.17948262 C328.855897,-3.88648819 332.169516,-0.795739865 323.113707,13.0582738 L217.327474,174.895153 C208.264469,188.760175 193.218185,188.990964 183.71996,175.409636 L126.769111,93.9767151 L12.5417619,181.728698 C-0.593710633,191.81966 -3.91947426,188.74917 5.1230211,174.855879 L110.403975,13.0975513 C119.44219,-0.789163345 134.468377,-1.03753706 143.966601,12.5437917 L200.917445,93.9767151 L315.69646,6.17948262 Z"></path>
</g>
</svg>
Это то что у меня есть сейчас, градиент ходит туда сюда, а мне этого не нужно. Нужно чтобы он просто ехал в одну сторону. Как это делается? Я с анимацией в векторах до этого вообще не работал, а тут понадобилось.
<svg width="336px" height="195px">
<defs>
<linearGradient id="logo-gradient" x1="-20%" y1="-20%" x2="120%" y2="120%" gradientTransform="rotate(0)">
<stop stop-color="black" offset="-10%">
<animate attributeName="offset" values="-0.20; 0.80" dur="2s" begin="0" repeatCount="indefinite"/>
</stop>
<stop stop-color="white" offset="-5%">
<animate attributeName="offset" values="0; 1" dur="2s" begin="0" repeatCount="indefinite"/>
</stop>
<stop stop-color="black" offset="0%">
<animate attributeName="offset" values="0.20; 1.20" dur="2s" begin="0" repeatCount="indefinite"/>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="M315.69646,6.17948262 C328.855897,-3.88648819 332.169516,-0.795739865 323.113707,13.0582738 L217.327474,174.895153 C208.264469,188.760175 193.218185,188.990964 183.71996,175.409636 L126.769111,93.9767151 L12.5417619,181.728698 C-0.593710633,191.81966 -3.91947426,188.74917 5.1230211,174.855879 L110.403975,13.0975513 C119.44219,-0.789163345 134.468377,-1.03753706 143.966601,12.5437917 L200.917445,93.9767151 L315.69646,6.17948262 Z"></path>
</g>
</svg>
Прокачал это дело. Теперь другая проблема, нужно сделать чтобы молния заполнялась полностью белым цветом, и только потом опять становилась черной.