4 ms·
Agreed! My process for creating something like this involves a few steps, but is pretty straightforward: 1. Draw vector art in Infinity Designer on my iPad (wi
by pcmaffey 7y ago
Agreed! My process for creating something like this involves a few steps, but is pretty straightforward:
1. Draw vector art in Infinity Designer on my iPad (with pencil)
2. Export as svg, and then clean it up in Inkscape (simplify paths, finalize shapes, etc).
3. Export Inkscape svg and then optimize it with `svgo --pretty`
4. This results in nice clean svg code that I then hand edit to add the SMIL animations. This involves wrapping objects in <g> tags and adding mostly <animateTransforms>. Once you get a hang of the syntax (as with any kind of coding) it's relatively easy.
5. Final debugging / testing happens in the browser. Just open the file directly and use the dev tools inspector.
Total time depends, from 2-3 hrs for a simple sketch and animation (eg. the LinkedIn one) to a day or 2 for something complex.