GraphicSVG: Beautiful vector graphics in Elm

Create beautiful graphics and animations in your browser. Build your graphics and animations by composing and transforming basic shapes. Create beautiful full-page Elm apps with the power of the Elm Architecture, or embed our graphics into your existing elm/Html projects.

Learn and create

Simple to pick up and learn, GraphicSVG has been used to successfully introduce over 15,000 K-12 students to programming in a fun, easy-to-learn way as part of McMaster's Software: A Tool For Change program. We've been blown away by the work of our students, showcased in our Hall of Fame and student-created Science Odyssey 2018 Reading Games.

We have developed several resources for teaching using GraphicSVG, including:

• Interactive "ShapeCreate" Tool
• gameApp examples
• Bite-sized "Cool Demos"

Get started today!

Get a feel for GraphicSVG on Ellie or install locally with elm install MacCASOutreach/graphicsvg.

Questions, concerns, bugs?

We'd love to hear from you and support you in any way we can! Contact us via a GitHub issue.

Resources

See our Elm documentation and research resources below for more information.

For Teachers

We'd love to help you integrate Elm and GraphicSVG into your elementary or high school classroom. Please contact us here.

Research

We have performed several studies using GraphicSVG. Here are some examples:

• Graphics Programming in Elm Develops Math Knowledge & Social Cohesion (Presented at CASCON 2018)
• Wordathon: A Tool for Social Learning (Research poster, presented at EdCog 2018)
• Applying Cognitive Load Theory to Improve K-12 Computer Science Education: An Automated Tool (Research poster, presented at EdCog 2018)
• A Framework for Preadolescent Programmers to Create Cooperative Multiplayer Reading Games (Presented at IMCL 2018)
• Using Elm to Introduce Algebraic Thinking to K-8 Students (Presented at TFPIE 2017)