1

Me gustaría saber si la forma gris que se mueve, la que esta detrás en el fondo esta hecha con keyframes o si no es así como esta hecha, gracias.

http://preview.themeforest.net/item/softlab-startup-and-app-wordpress-theme/full_screen_preview/23373445?_ga=2.214497879.1759328477.1571722557-1969728026.1563428903

6
  • 1
    ¿Has inspeccionado el código para comprobarlo? Lo he realizado y es un SVG que utiliza elementos animate.
    – ElChiniNet
    Commented el 30 oct. 2019 a las 11:23
  • Hola gracias @ElChiniNet estuve mirando pero no vi nada de svg, pero me parece super compleja de hacer, alguna sugerencia? se puede poner como fondo ??
    – Miguel
    Commented el 30 oct. 2019 a las 11:28
  • 1
    No es complejo, mira el ejemplo básico en MDN para que veas cómo funciona. En el caso del ejemplo que has puesto, en attributeName han puesto d que hace referencia a la forma del path con una lista de values. Creo que lo conseguirás reproducir, pero si no, puedes mejorar la pregunta para preguntar exactamente eso y podría colocarte un ejemplo como respuesta.
    – ElChiniNet
    Commented el 30 oct. 2019 a las 11:39
  • Pero tendria que hacer primero en Illustrator y guardar el código SVG? y ya luego animarlo? @ElChiniNet
    – Miguel
    Commented el 30 oct. 2019 a las 11:43
  • 1
    Esa podría ser una opción si el path es complejo, sino puedes hacerlo directamente con los comandos de dibujo de ese elemento.
    – ElChiniNet
    Commented el 30 oct. 2019 a las 11:53

1 respuesta 1

1

Bueno por si alguien le sirve, gracias a los comentarios del compañero he podido sacar los mismo.

<svg class="svgForma" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 180 180" data-stylerecorder="true">
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" data-stylerecorder="true" style="text-align: inherit; line-height: 22px; letter-spacing: 0px; font-weight: 400; font-size: 20px; border-color: rgb(255, 255, 255); border-style: none; margin: 0px; border-radius: 0px; padding: 0px;">
    <image href="" x="0" y="0" width="100%" height="100%" data-stylerecorder="true" style="text-align: inherit; line-height: 22px; letter-spacing: 0px; font-weight: 400; font-size: 20px; border-color: rgb(255, 255, 255); border-style: none; margin: 0px; border-radius: 0px; padding: 0px;"></image>
    </pattern>
    <path d="M 6.5 39.4 C 7.80365 62.5692 5.91007 81.182 3.8 94.8 c -2.77474 18.3873 -6.73752 31.3625 0.721167 42.0863 c 6.01562 8.45504 15.7771 10.6435 18.5121 11.0825 c 18.5584 4.29445 27.1796 -8.77372 63.9839 -26.1072 c 24.9898 -11.8133 38.1199 -14.1826 43.7552 -28.5139 c 3.11606 -8.01241 2.15051 -15.1844 1.82759 -17.4477 c -2.50088 -12.867 -14.1261 -22.3175 -28.121 -30.7115 c -20.1317 -12.4753 -40.3327 -47.5806 -71.878 -44.5705 C 29.3345 0.821168 21.6321 1.61474 15.2486 7.46569 C 3.36701 18.018 6.03212 36.639 6.5 39.4 Z" data-stylerecorder="true" style="text-align: inherit; line-height: 22px; letter-spacing: 0px; font-weight: 400; font-size: 20px; border-color: rgb(255, 255, 255); border-style: none; margin: 0px; border-radius: 0px; padding: 0px;">
    	<animate repeatCount="indefinite" attributeName="d" dur="10s" values="
    	M6.5,39.4C7.9,62.9,6,81.5,3.8,94.8c-2.9,17.7-7.2,30.9,0.4,41.9c5.9,8.5,15.7,11,17.6,11.5
    	c17.9,4.5,26.2-9.4,64-27c25.6-11.9,39.7-13.9,45.3-28c3.1-7.9,1.9-15.3,1.5-17.3c-2.7-12.7-14.2-21.9-28.5-30.4
    	c-20-12-39.7-48.3-72-45.2C29.1,0.5,21.6,1.3,15.3,7C3.2,17.7,6,36.7,6.5,39.4z;
    
    	M6.5,39.4C7.9,62.9,6,81.5,3.8,94.8c-4.1,24.8-5.6,33.6,0.4,41.9c10.6,14.8,41.6,17.2,56,4.3
    	c11.2-9.9,4.2-21.5,15.8-31c13.8-11.4,29.9,0.5,45-12.3c9-7.6,11.1-18.4,11.7-21.9c2.5-17.1-9-30.9-16.7-40.1
    	C92.4,7.4,57-3,32.2,0.2C25,1.1,19.7,3.1,15.3,7C3.2,17.7,6,36.7,6.5,39.4z;    
    	M6.5,39.4C4.9,52.6,3.2,71.6,3.8,94.8c1,39.1,7.2,45.3,10.4,47.7c9.5,7.1,18.1-0.1,46-1.5
    	c38.4-1.9,56.7,10.1,63.5,0.8c6.6-9.2-9.5-22.7-2.8-44c3.6-11.4,9.7-11.7,11.7-21.9c3.5-17.9-11.9-34.9-16.7-40.1
    	C91.8,9,56.5,9.9,47.7,10.2c-11.3,0.3-25.1,0.9-34,11.3C8.4,27.6,7,34.8,6.5,39.4z;
    
    	M6.5,39.4C7.9,62.9,6,81.5,3.8,94.8c-2.9,17.7-7.2,30.9,0.4,41.9c5.9,8.5,15.7,11,17.6,11.5
    	c17.9,4.5,26.2-9.4,64-27c25.6-11.9,39.7-13.9,45.3-28c3.1-7.9,1.9-15.3,1.5-17.3c-2.7-12.7-14.2-21.9-28.5-30.4
    	c-20-12-39.7-48.3-72-45.2C29.1,0.5,21.6,1.3,15.3,7C3.2,17.7,6,36.7,6.5,39.4z  " data-stylerecorder="true" style="text-align: inherit; line-height: 22px; letter-spacing: 0px; font-weight: 400; font-size: 20px; border-color: rgb(255, 255, 255); border-style: none; margin: 0px; border-radius: 0px; padding: 0px;">
        </animate>
    </path>
</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.