Creative Days 75% off
NEW Special offer Building vector graphics, UIs and animations with SVG from scratch By Georgi Nikoloff
Creative Days!
$100 $25
Buy
Building vector graphics, UIs and animations with SVG from scratch
English English, Spanish, French (+3) [Machine translation]
9 Hours 12 Mins Course

Building vector graphics, UIs and animations with SVG from scratch

Watch Trailer
Creative Days!     $100 $25
Buy course

While SVG is simple and intuitive, it has a lot to offer in terms of building complex interactive graphics, animations and special effects. With a little bit of math and good understanding of the API, you will be able to fully express your creative ideas and build advanced data charts, widgets and animated scenes, without having to rely on code and libraries that other people wrote.

After you watch this course, you will gain deep knowledge not only on all the shapes, animations and advanced filter effects that SVG provides, but on optimising, removing redundant markup and reducing your file sizes.

Once done, you will be able to export, optimise and animate SVG graphics generated in softwares like Figma and Adobe Illustrator. Furthermore, you will be able to programatically generate SVG graphics with Javascript and import them in a design software, so you can create truly random, programmatic pieces of vector art.

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

8 sections • 17 lectures • 9 hours 12 mins

  • Welcome
    3 lectures 2 Hours 7 Mins
    • Introduction
      00:40 Mins
    • Setting up our app
      17:48 Mins
    • SVG rendering fundamentals
      1 Hour 49 Mins
  • Building interactive charts in SVG
    5 lectures 3 Hours 24 Mins
    • Bar chart
      1 Hour 7 Mins
    • Line chart
      51:48 Mins
    • Scatter-point chart
      39:23 Mins
    • Pie chart
      28:37 Mins
    • Pannable chart
      19:42 Mins
  • Interactive graphics with SVG
    1 lectures 32:28 Mins
    • Creating a widget rendered purely in SVG
      32:28 Mins
  • SVG animation
    2 lectures 1 Hour 15 Mins
    • CSS animation
      41:33 Mins
    • SMIL animation
      34:06 Mins
  • SVG optimisation
    2 lectures 36:47 Mins
    • The <use /> element
      25:50 Mins
    • Cleaning up SVGs exported from design tools
      10:57 Mins
  • Advanced Effects in SVG
    1 lectures 34:40 Mins
    • Exploring SVG filter primitives
      34:40 Mins
  • Using SVG with Adobe Illustrator
    2 lectures 41:04 Mins
    • Exporting SVG graphics from Illustrator
      18:24 Mins
    • Importing generated SVG with Javascript into Illustrator
      22:40 Mins
  • Conclusion
    1 lectures 00:59 Mins
    • Conclusion
      00:59 Mins

Georgi is an exceptional programmer. He lives and breathes computer graphics, animation and building awesome things. When not on the lookout for the next amazing technology he loves to help others to excel and take you with you into the rabbit hole of creating graphics and animations from the ground up.
Matthias Wolff
Matthias Wolff Co-Founder and COO at Xymatic
Course details

Building vector graphics, UIs and animations with SVG from scratch

Building vector graphics, UIs and animations with SVG from scratch

By Georgi Nikoloff

$25 75% off $100

Creative Days

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Georgi Nikoloff

    Georgi Nikoloff

    Frontend & Creative Developer

    @georgiNikoloff

    I am a frontend developer living and working in Berlin. I specialize in developing rich user interfaces and graphics, such as websites, web apps, animations and visualizations.

    georgi-nikolov.com

Similar Courses