2

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.

introducir la descripción de la imagen aquí

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.

1 respuesta 1

1

Logré encontrar la forma de hacerlo. En el caso de que se quieran animar varios path juntos es necesario agruparlos en un elemento <g> y asignar a este último un id el cual recibirá la animación.

<g id="paths">
    <path d="..."/>
    <path d="..."/>
</g>

Para hacer el movimiento horizontal es necesario modificar el atributo translate en el elemento <g> y para hacer la animación utilizaremos @keyframes, todo quedaría de la siguiente manera:

@keyframes moveleft{            
    0% {transform: translate(40px,0)}
    100% {transform: translate(0,0)}
}

#paths{
    animation-name: moveleft;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 3s
}
<svg width="400" height="400" version="1.1" viewBox="0 0 200 200" 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">
    <g id="paths" fill="black" 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"/>
    </g>          
</svg>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.