/animated-logo

library for creating animated, interactive, sonified logos from SVG spritesheets

Primary LanguageJavaScript

animated-logo

Library for creating animated, interactive, sonified logos from SVG spritesheets. Created for NYU MusEDLab / Math, Science Music.

illustrator guidelines

  • use artboards. Put both versions of the graphic in the same artboard, each in their own layer. Do not put them in sub-layers. Screenshot example here
  • letters should not overlap with any other artboards
  • Bottom layer of the artboard will be the first animation frame, top layer will be last.
  • export --> svg --> use artboard --> save as individual files in img/src folder
  • svg options:
    • styling: inline style
    • object ids: layer names
  • put files in demo/img/src
  • run grunt to merge all svg files in the demo/img/src directory to a single svg file called svg-defs.svg. Use this file as the first param when creating a new animated logo object (new AL('path/to/svg-defs.svg'))

library guidelines

  • Documentation coming soon. For now, see above for generating svg spritesheet, then follow the templates in the demo folder.

Dependencies

  • Tone.JS (audio)
  • Snap.SVG (svg animation)
  • grunt-svgstore (merge svg's into a single file—see above)
  • webpack - build the library

Demos

  • demo_1: broken..
  • demo_2: S with animation
  • demo_3: MATH SCIENCE
  • demo_4: MATH SCIENCE plus key triggers
  • cgmm: CGMM
    • build with grunt --src=demo/demo_5/img/src --dst=demo/demo_5/img
    • NOTE: Illustrator file out of sync with SVG's