aprende animación svg

con figma y svgator

retta scott

UX Engineer Freelance

CARMEN ANSIO

@carmenansio

como creeis que las animaciones

ayudan a la experiencia de usuario

fundamentos de la animación svg

parte 1

<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="paint0_radial_3_27" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(255.831 428.406) scale(200 200)">
    <stop stop-color="#FA428E"/>
    <stop offset="1" stop-color="#F84441"/>
    </radialGradient>
    <radialGradient id="paint1_radial_3_27" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100.911 182.366) scale(298.935 301.942)">
    <stop stop-color="#FFA577"/>
    <stop offset="1" stop-color="#F84441"/>
    </radialGradient>
    <radialGradient id="paint2_radial_3_27" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(134.818 298.609) scale(170.465 114.25)">
    <stop stop-color="white"/>
    <stop offset="1" stop-color="#FFE1A2"/>
    </radialGradient>
  </defs>
  <path d="M226 496C116 496 56 436 56 346C56 226.555 157.812 149.172 174.865 92.3495C186 96 173.179 131.897 176 146C178.821 160.103 198.136 171.984 216 156C236.722 137.459 239.505 69.5922 216 16C277.045 86.0025 456 176.02 456 346C456 436 396 496 286 496H226Z" fill="url(#paint0_radial_3_27)"/>
  <path d="M269.178 349.04C249.024 334.182 241.988 296.149 250.456 277.71C263.04 287.671 276.244 334.639 269.178 349.04Z" fill="#F84441"/>
  <path d="M235.6 480C160.8 480 100.571 419.856 100.571 358.656C100.571 284.621 165.041 243.236 183.719 233.983C183.709 234.155 186.77 242.222 190.105 246.61C194.4 255.794 215.603 272.761 241.267 258.283C265.525 245.172 276.777 209.989 299.602 180.856C339.798 221.731 411.428 254.836 411.428 358.656C411.428 419.856 351.2 480 276.4 480H235.6Z" fill="url(#paint1_radial_3_27)"/>
  <path d="M149.347 312.999C169.488 292.976 202.017 292.976 222.158 312.999C246 336 266 336 289.842 312.999C309.983 292.976 342.512 292.976 362.653 312.999C372.664 323.069 377.67 336.237 377.67 349.404C377.67 416.601 323.197 461.074 256 461.074C188.804 461.074 134.33 416.601 134.33 349.404C134.33 336.237 139.336 323.069 149.347 312.999Z" fill="url(#paint2_radial_3_27)"/>
  <path d="M341.25 355.626C341.25 344.028 331.848 334.626 320.25 334.626C308.652 334.626 299.25 344.028 299.25 355.626V369.626C299.25 381.224 308.652 390.626 320.25 390.626C331.848 390.626 341.25 381.224 341.25 369.626V355.626Z" fill="#670529"/>
  <path d="M212 355.626C212 344.028 202.598 334.626 191 334.626C179.402 334.626 170 344.028 170 355.626V369.626C170 381.224 179.402 390.626 191 390.626C202.598 390.626 212 381.224 212 369.626V355.626Z" fill="#670529"/>
  <path d="M180 351.89L180 350.501C180 344.701 184.702 340 190.501 340C196.301 340 201.003 344.702 201.003 350.501L201.003 351.89C201.003 353.485 200.369 355.014 199.242 356.141C198.114 357.269 196.585 357.902 194.991 357.902L186.012 357.902C182.692 357.902 180 355.21 180 351.89Z" fill="white"/>
  <path d="M309 351.89L309 350.501C309 344.702 313.702 340 319.501 340C325.301 340 330.003 344.702 330.003 350.501L330.003 351.89C330.003 353.485 329.369 355.014 328.242 356.142C327.114 357.269 325.585 357.902 323.991 357.902L315.012 357.902C313.418 357.902 311.888 357.269 310.761 356.142C309.633 355.014 309 353.485 309 351.89Z" fill="white"/>
  <path d="M235 388.432V378H271V388.432C271 398.372 262.941 406.43 253 406.43C243.059 406.43 235 398.372 235 388.432Z" fill="#FB715A" stroke="#670529" stroke-width="4"/>
</svg>

ventajas de utilizar el formato

svg

ejemplo de un svg

en código

viewbox

introducción a figma y svgator

parte 2

creación de la animación

diseño en figma

easing
duration
properties

@keyframes [name] {
  [keyframe selector] {CSS styles}
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ufo {
  animation-duration: 2s;
  animation-name: spin;
}

muchísimas gracias

🤘

Animación SVG con Figma y SVGator

By Carmen Ansio

Animación SVG con Figma y SVGator

  • 630