PAVITHRA KODMAD [PK]
@PKODMAD
At first I was afraid, I was petrified!\
Animation seemed so hard!
Building an SVG Animation from Start to Finish at SmashingConf Toronto 2018
Schotter
Mooncake
SVG 👊
Scalable Vector Graphics
<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>
CSS vs Javascript
Greensock
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
By Pavithra Kodmad