Estoy animando un logo SVG con CSS y ya he logrado crear varios efectos pero no logro entender como hacer para que uno de los path del SVG se mueva horizontalmente (vea imagen).
También han fallado todos mis intentos de importar el SVG como archivo para luego aplicarle los estilos, me veo forzado a colocar todo el SVG al interno del HTML, cosa que preferiría evitar.
He probado varias cosas como modificar el width
sin obtener ningún resultado. Aquí les dejo mi código con los dos efectos realizados hasta ahora para que vean el método utilizando:
@keyframes light-lines{
0%{fill:#a9a9a9;opacity:.9}
100%{fill:#333;opacity:.5}
}
.light{
animation: light-lines 2s ease-out infinite alternate;
}
@keyframes invisible-text{
0%{opacity:0}
100%{opacity:1}
}
#svg-text{
animation: invisible-text 3s ease-in-out 2s infinite alternate;
}
.mountain{
/* ? */
}
<svg width="680" height="370" version="1.1" viewBox="0 0 179.91 97.897" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="a">
<stop stop-color="#4155b1" offset="0"/>
<stop stop-color="#b4b9d2" offset="1"/>
</linearGradient>
<linearGradient id="h" x1="8.4428" x2="4.5477" y1="2.3952" y2="7.8422" gradientTransform="matrix(4.564 0 0 4.5566 9.2367 9.2687)" gradientUnits="userSpaceOnUse">
<stop stop-color="#5469c9" offset="0"/>
<stop stop-color="#5469c9" stop-opacity="0" offset="1"/>
</linearGradient>
<radialGradient id="i" cx="7.307" cy="5.1975" r="11.597" gradientTransform="matrix(-9.1176 -.019485 .0095211 -4.4496 153.65 37.949)" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff" offset="0"/>
<stop offset="1"/>
</radialGradient>
<linearGradient id="g" x1="60.147" x2="83.275" y1="55.208" y2="22.492" gradientTransform="matrix(1.0002 0 0 .99959 -39.935 -.85276)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<linearGradient id="f" x1="68.501" x2="74.465" y1="59.82" y2="13.674" gradientTransform="matrix(1.0002 0 0 .99959 .00015499 .00014524)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<g transform="matrix(1.7 0 0 1.7013 -.0036564 -.00016215)" opacity="1">
<rect x="1.597" y="1.597" width="102.64" height="54.348" rx="2.8679" ry="2.8661" fill="#4d4d4d" opacity="1" stroke="url(#i)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.1938"/>
<path class="light" d="m9.2398 47.875 22.601 6.4716 69.367 0.0251c0.68665 2.51e-4 1.4406-0.39775 1.4217-1.5326l-3.7e-4 -25.974-74.08-17.624z" fill="#333" opacity=".5" style="mix-blend-mode:color-dodge"/>
<path class="light" d="m36.902 19.325 65.721 15.24 7e-3 18.128c2.9e-4 0.73888-0.059 1.6851-1.5811 1.6832l-26.603-0.03468-26.581-6.4666z" fill="#333" opacity=".5" style="mix-blend-mode:exclusion"/>
<path class="mountain" d="m11.624 46.4 16.853-33.727 5.7463 12.747 2.2676-3.0616 9.2333 24.043z" fill="#fff" opacity="1" stroke="url(#g)" stroke-width="2.9474"/>
<path class="mountain" d="m9.2401 47.874 19.189-27.927 5.277 11.346 2.1958-3.019 11.969 19.602z" fill="#5469c9"/>
<path class="mountain" d="m21.037 47.873 6.616-17.447-0.89905-0.70537 2.1006-2.2307-1.8462 0.44723 2.251-2.4795-0.83031-5.5103 5.277 11.346 2.1958-3.019 11.969 19.602z" fill="url(#h)" opacity="1" style="mix-blend-mode:screen"/>
<g id="svg-text" fill="url(#f)" stroke-width="1.2072" aria-label="ontes">
<path d="m58.879 40.763q0 2.1457-1.5735 3.6682-1.5327 1.4816-3.6171 1.4816-2.1968 0-3.7091-1.5224-1.502-1.5327-1.502-3.7295 0-2.1355 1.5327-3.6477 1.5429-1.5224 3.6988-1.5224 2.1662 0 3.6682 1.5429t1.502 3.7295zm-0.87873 0.44958q0-1.6859-1.5531-3.2084-1.6042-1.5735-3.5149-1.5735-1.4918 0-2.534 1.0218t-1.0422 2.4114q0 2.0129 1.5838 3.5762 1.5531 1.5327 3.423 1.5327 1.4816 0 2.5136-0.96047 1.124-1.0524 1.124-2.7997z"/>
<path d="m69.649 39.312q0 1.5122-0.53132 2.9018-0.53132 1.3794-1.5735 2.5544 0.03065 0 0.10218 0.01022 0.08174 0 0.21457 0 0.31675 0 0.59263-0.03065 0.27588-0.04087 0.54154-0.21457 0.26566-0.21457 0.3474-0.27588 0.02044-0.02044 0.06131-0.03065 0.03065-0.01022 0.04087-0.01022 0.1124 0 0.06131 0.18392-0.02044 0.15327-0.04087 0.36784-0.02044 0.21457-0.02044 0.2861 0 0.15327 0.01022 0.32697 0.01022 0.16348 0.03065 0.3474 0.04087 0.20436-0.08174 0.20436-0.05109 0-0.10218-0.04087-0.30653-0.1737-0.42915-0.22479-0.23501-0.09196-0.44958-0.12261-0.20436-0.03065-0.64372-0.03065-0.29632 0-0.47002 0.01022t-0.4598 0.06131q-0.29632 0.05109-0.29632-0.18392 0-0.07153 0.03065-0.12261 0.55176-0.85829 0.85829-1.4203 0.48024-0.88895 0.71524-1.6553 0.2861-0.94004 0.2861-1.9107 0-1.6042-0.71524-2.6055-0.7459-1.0524-2.0231-1.0524-0.85829 0-1.5429 0.48024-0.61307 0.42915-1.0116 1.1955v6.2737q0 0.18392 0.22479 0.37806 0.19414 0.16348 0.38828 0.31675 0.1124 0.1124 0.1124 0.20436 0 0.10218-0.1737 0.10218-0.05109 0-0.4598-0.03065t-0.7459-0.03065q-0.38828 0-0.62328 0.02044-0.22479 0.02043-0.52111 0.04087-0.24523 0-0.24523-0.1124 0-0.07152 0.09196-0.1737t0.29632-0.26566q0.3474-0.26566 0.3474-0.44958v-6.0489q0-0.86851-0.52111-1.4101-0.22479-0.23501-0.78677-0.53132-0.08174-0.04087-0.08174-0.1124 0-0.07152 0.06131-0.13283 0.13283-0.12261 0.22479-0.19414 0.09196-0.08174 0.23501-0.22479t0.22479-0.23501 0.15327-0.18392q0.04087-0.05109 0.1124-0.05109 0.06131 0 0.09196 0.03065 0.36784 0.29632 0.77655 0.82764 0.56198 0.72546 0.65394 1.2568 0.44958-0.73568 1.0933-1.2772 0.96047-0.8072 1.9516-0.8072 1.8392 0 2.8303 1.3794 0.78677 1.0933 0.78677 2.442z"/>
<path d="m76.188 36.308q0 0.16348-0.14305 0.16348-0.05109 0-0.50067-0.02044t-0.84808-0.02044v6.7642q0 0.72546 0.40871 1.2364 0.1124 0.14305 0.59263 0.54154 0.08174 0.06131 0.08174 0.14305 0 0.05109-0.08174 0.1124-0.08174 0.05109-0.18392 0.1124-0.13283 0.10218-0.20436 0.16348-0.2861 0.25544-0.36784 0.36784-0.08174 0.08174-0.16348 0.08174-0.07152 0-0.14305-0.04087-0.43936-0.24523-0.77655-0.83786-0.47002-0.82764-0.47002-1.9822v-6.662q-0.32697 0-0.62328 0.02044-0.29632 0.01022-0.60285 0.02044-0.14305 0-0.14305-0.16348v-0.32697q0-0.16348 0.18392-0.16348 0.05109 0 0.44958 0.02044 0.39849 0.02043 0.73568 0.02043v-0.77655q0-0.59263-0.25544-0.66416-0.1737-0.02044-0.23501-0.03065-0.14305 0-0.14305-0.14305 0-0.06131 0.06131-0.12261 0.22479-0.19414 0.4598-0.40871 0.23501-0.22479 0.52111-0.51089 0.32697-0.33719 0.50067-0.56198 0.18392-0.22479 0.35762-0.43936 0.03065-0.05109 0.08174-0.05109 0.08174 0 0.08174 0.15327-0.03065 0.26566-0.06131 0.53132-0.06131 0.64372-0.06131 1.3283v1.6962q0.33719 0 0.66416-0.01022t0.68459-0.03065q0.14305 0 0.14305 0.14305z"/>
<path d="m87.387 43.42q-0.26566 0.86851-1.2772 1.6246-1.1853 0.88895-2.5851 0.88895-0.89916 0-1.594-0.19414-0.79699-0.22479-1.5122-0.76633-0.2861 0.35762-0.52111 0.77655-0.29632 0.52111-0.29632 0.75612 0 0.2861 0.15327 0.39849 0.10218 0.07152 0.33719 0.07152 0.07152 0 0.14305-0.02044 0.06131-0.02043 0.12261-0.04087 0.04087-0.02043 0.07152 0 0.07152 0.04087 0.03065 0.16348-0.06131 0.24523-0.24523 0.44958-0.24523 0.26566-0.5722 0.26566-0.3474 0-0.5722-0.25544-0.22479-0.25544-0.22479-0.66416 0-0.32697 0.22479-0.79699 0.06131-0.13283 0.87873-1.4509-0.75612-0.77655-1.1648-1.6859-0.44958-1.0116-0.44958-2.1764 0-2.1457 1.3896-3.7091 1.3998-1.5633 3.474-1.5633 0.82764 0 1.6962 0.39849 0.48024 0.23501 0.96047 0.4598 0.09196 0.04087 0.26566 0.06131 0.1737 0.02043 0.3474 0.02043l0.30653-0.02043q0.1124 0 0.1124 0.09196 0 0.07152-0.07152 0.1124-0.16348 0.10218-0.35762 0.27588-0.26566 0.22479-0.4598 0.4598-0.99112 1.1035-2.299 2.8916t-2.4625 3.5864q0.60285 0.42915 1.2261 0.66416 0.73568 0.27588 1.5327 0.27588 1.1035 0 1.8188-0.41893 0.52111-0.30653 1.1648-1.0933 0.06131-0.09196 0.14305-0.19414 0.08174-0.1124 0.18392-0.09196 0.13283 0.03065 0.13283 0.19414 0 0.12261-0.05109 0.25544zm-2.7997-6.0285q0-0.60285-0.65394-0.94004-0.55176-0.2861-1.3283-0.2861-1.4509 0-2.391 1.2364-0.87873 1.1648-0.87873 2.769 0 0.95025 0.4598 1.9005 0.38828 0.8072 0.97069 1.3692 0.69481-1.032 1.0831-1.6042 0.62328-0.9196 1.0626-1.5429 0.56198-0.79699 1.124-1.594 0.55176-0.85829 0.55176-1.3079z"/>
<path d="m96.746 42.296q0 1.6144-1.3998 2.6464-1.3079 0.97069-3.1164 0.97069-1.5327 0-2.5442-0.50067-1.2364-0.61307-1.2364-1.8085 0-0.90938 0.66416-1.5327 0.67437-0.6335 1.6042-0.6335 0.96047 0 1.5633 0.3474 0.68459 0.39849 0.68459 1.124 0 0.4598-0.33719 0.8072-0.32697 0.33719-0.78677 0.33719-0.43936 0-0.6335-0.16348-0.05109-0.05109-0.05109-0.08174 0-0.07152 0.13283-0.10218 0.1737-0.06131 0.2861-0.21457 0.12261-0.15327 0.12261-0.48024 0-0.29632-0.31675-0.48024-0.31675-0.19414-0.68459-0.19414-0.72546 0-1.2261 0.3474-0.49045 0.3474-0.49045 0.96047 0 0.85829 1.0933 1.3283 0.90938 0.38828 2.156 0.38828 1.2977 0 2.2683-0.58241 1.1444-0.68459 1.1444-1.8494 0-1.1648-0.83786-1.7268-0.52111-0.3474-1.9822-0.70503-0.83786-0.18392-1.6655-0.37806-0.94004-0.25544-1.3794-0.66416-0.5722-0.53132-0.5722-1.4918 0-1.0933 1.1546-1.8085 1.0626-0.66416 2.442-0.66416 1.2466 0 2.0129 0.31675 1.0116 0.41893 1.0116 1.2977 0 0.56198-0.54154 0.92982-0.50067 0.33719-1.1546 0.33719-0.62328 0-1.0422-0.23501-0.51089-0.2861-0.51089-0.81742 0-0.27588 0.18392-0.48024 0.19414-0.21457 0.42915-0.2861 0.10218-0.02044 0.1124-0.02044 0.07152 0 0.07152 0.10218l-0.02044 0.20436q0 0.22479 0.14305 0.36784 0.18392 0.18392 0.59263 0.18392 0.26566 0 0.4598-0.18392t0.19414-0.42915q0-0.4598-0.66416-0.65394-0.49045-0.14305-1.2772-0.14305-0.98091 0-1.7677 0.43936-0.86851 0.49045-0.86851 1.2159 0 0.65394 0.5722 1.0218 0.35762 0.23501 2.2888 0.67437 1.1955 0.27588 1.8392 0.53132 0.89916 0.35762 1.3487 0.87873 0.53132 0.61307 0.53132 1.5531z"/>
</g>
</g>
</svg>
PD: El texto del SVG ha sido convertido en varios path para evitar que algunos navegadores cambien el font de las letras a su antojo.