I can draw and animate SVG, you can too!

PAVITHRA KODMAD [PK]

At first I was afraid, I was petrified!\

 

Animation seemed so hard!

SVG 👊

Scalable Vector Graphics

  • Crisp
  • Responsive
  • Performant!*
  • Easy to animate.
<svg>
    <g id='firstgroup'>
        <circle cx='10' cy='10' r='5' fill='white' />
        <rect x='0' y='0' height='10' width='10' fill='none' stroke='black' />
        <line x1="102" y1="83.5" x2="108" y2="83.5" stroke="black" stroke-width='0.25'/>
        <ellipse cx='95' cy='110' rx='22' ry='5' fill='#21406e' id='shadow' />
        <polygon points='10 20 20 40' />
    </g>
</svg>

Animating SVGs

CSS vs Javascript

TweenMax.to("#hands1", 1, {
    attr: {
      d:
      "M50 125 a22 38 -10 1 0 -20 -15 q18 40 40 40 h70 q30 0 30 -40 a22 38 -40 1 0 -20 15"
    },
    ease: Power1.easeInOut,
    repeat: 1,
    yoyo: true
  })

Made a bunch more stuff!

Animating the SydCSS Logo

Questions?

SydCSS - SVG animation

By Pavithra Kodmad

SydCSS - SVG animation

  • 1,162