Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

Letters to SVG: Vector Lettering & Manipulation by Hali Bakarr

2017.08.31 talk featuring Hali Bakarr on vector lettering and manipulation

Original Slides

You can find the original slides here!

Notes

  • SVGs are Scalable Vector Graphics
  • Vector Lettering
    • Sketches no matter the complexity can be "vectorized"
    • Scan in sketches and master the Pen Tool!
  • Be Manipulative
    • You can mess with SVGs with code
    • Attributes such as stroke-width & fill of an SVG can be directly manipulated with HTML and CSS
  • Make 'Em Move
    • SVGs can be animated using CSS and/or JavaScript
    • Use the following attributes to allow animations to occur
    • stroke-dasharray: 2000;
    • stroke-dashoffset: 2000;
    • Use the animation to reset the stroke-dashoffset to 0 in order for it to animate it

Resources

  1. Animate CodePen
  2. Laced NYC CodePen
  3. Walking Dead CodePen
  4. Insecure CodePen
  • CSS Keyframes
  • SMIL
  • Greensock DrawSVG Plugin
  • Segment by Tympanus
  • Vivus by maxwellito (GitHub)
  • AnimateSVGText (Outline Text) on Github

Inspiration

  • Jessica Hische
  • Dan Cassaro
  • Dana Tanamachi

More From Hali

You can’t perform that action at this time.