Wobbling Pokeball with SnapSVG

Creating SVG from ground up

If you've just gotten started, then the first dirty tips to answer your questions (which you might have in mind as a beginner):

• Yes, you can import external SVG file/code into your SnapSVG Javascript code
• SnapSVG can help writing pure SVG code from scratch (yes, for simple SVG, but I don't think this is a proper way to write your big animated SVG project from scratch)
• (my gut tells me) For large SVG project, start SVG project with editor like Adobe Illustrator or Affinity Designer (follow your preferences) then export as SVG file
• Yes, for every tiny movement/animation has to be coded from scratch (no shortcut, so try to reuse code if possible)
• Speed development - utilise handy tool like CodePen to help your development!

Steps required (when you get started):

1. (If you plan to start from scratch) Start learning adding shape/line/text into your element
2. Animating SVG (mostly achievable by using the ELEMENT.animate())

See the Pen Wobbling pokeball (Snap.svg) by trtshen chaw (@trtshen) on CodePen.

Simple SVG Project with SnapSVG, HTML is not the first priority

As you can see from the example above, there is no HTML code available. It starts right into Javascript code with Snap() and canvas size for your svg

  
    var poke = Snap(230,230)
  

Once you are done declaring required elements, the rest of the code is written to style up your elements and properly group related elements for animating purpose.

Why Group Up Elements?
As you animate element, you have to animate related elements together, so grouping them in a "g" makes our job easier to animate them altogether and more useful for chaining a sequence of continuous animations.

Thanks SnapSVG for the great tool!