Make Art by Coding: Create an SVG Scene for Web Animation! from Udemy

This course was funded by a wildly successful Kickstarter.

Gain hands-on experience with coding real projects. Make vector graphics by coding in this awesome course for beginners. Scaleable Vector Graphics (SVG) is an image format that uses vectors, in contrast to other image formats like jpg, gif, or pngs, which are raster graphics. SVG is made with math. For this reason, it can scale indefinitely. This makes it great for making logos, icons, and simple designs.

Why use SVG?

It has good support among all modern browsers, and it's an open standard.
It uses smaller file sizes compared to bitmapped files.
You can style shapes in CSS and interact with them in JavaScript. Thus you can programmatically alter shapes for use on web pages.

Enroll today to join the Mammoth community.

What's inside

Syllabus

Introduction

Introduction (cont'd)

Creating Rectangle and Circles

Creating Lines

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses SVG, which is an open standard supported by modern browsers, making it highly relevant for web development

Teaches how to style shapes in CSS and interact with them in JavaScript, enabling dynamic web page elements

Explores the use of SVG for logos, icons, and simple designs, which are common assets in web design

Covers saving SVG as PNG, which is useful for broader compatibility across different platforms and applications

Includes lectures on refactoring JavaScript, which is a valuable skill for maintaining and improving code quality

Requires learners to check cross-browser compatibility, which is essential for ensuring a consistent user experience

Reviews summary

Code art: svg scene for beginners

According to learners, this course is a fantastic starting point for beginners interested in combining coding with art using SVG. Students praise the clear explanations and the hands-on approach to creating graphical elements and even integrating them with JavaScript for animation. While some feel it could delve deeper into certain topics or animation techniques, the general consensus is that it provides a solid foundation in SVG coding, making it accessible and engaging, particularly for those new to the subject or looking to explore a creative coding outlet.

Provides strong base in SVG basics.

"This course provides a very solid foundation in creating and styling SVG using code."

"I feel confident now in creating basic SVG shapes and understanding the viewBox and path elements."

"It covers the essential SVG elements and properties needed to start creating vector graphics by hand."

"Provides a good introductory overview of SVG and how to integrate it with web technologies."

Hands-on scene creation is engaging.

"The practical project of building an SVG scene was really engaging and helped solidify the concepts learned."

"Building the tree scene and adding interactivity was a great way to apply what we learned about SVG elements and Javascript."

"I loved the hands-on coding and project-based learning. Creating the scene made it fun."

"The project structure allows you to see immediate results from your code."

Instructor explains concepts well.

"The instructor explains each concept clearly and in detail, making complex ideas easy to grasp."

"Explanations were clear and concise, making it easy to follow along even for complicated topics like Bezier curves."

"I really appreciated the way the instructor broke down the steps and explained the 'why' behind the code."

"Clear instruction and easy to follow along."

Great for newcomers to SVG coding.

"This was an absolutely fantastic course for dipping my toes into the world of SVG creation and manipulation."

"The course is perfectly suited for beginners who want to learn how to create and manipulate SVG using code."

"As a complete beginner to SVG, I found this course very easy to follow and understand."

"I had little to no prior experience with SVG and this course provided me with a great foundation."

Lacks advanced topics or animation.

"While great for basics, I wish it had covered more advanced SVG features or complex animation techniques."

"The course focuses primarily on creation and basic manipulation. More on complex JS interactions would be beneficial."

"It gives a good introduction, but if you're looking for deep dives into specific areas like filters or advanced animation, you'll need other resources."

"Could use more examples or a dedicated section on SVG animation beyond simple JS toggles."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Make Art by Coding: Create an SVG Scene for Web Animation! with these activities:

Review Basic HTML and CSS

Show steps

Reinforce your understanding of HTML and CSS fundamentals, as these are used to style and embed SVGs in web pages. Refreshing this knowledge will make it easier to manipulate and style SVG elements.

Show steps

Review HTML structure and common tags.
Practice CSS selectors and styling properties.
Experiment with embedding SVGs in HTML.

Read 'SVG Essentials'

Show steps

Deepen your understanding of SVG syntax and capabilities by studying a dedicated SVG reference book. Learn about advanced features and best practices for creating scalable vector graphics.

View SVG Essentials on Amazon

Show steps

Read the chapters on SVG syntax and attributes.
Study the examples and try them out yourself.
Refer to the book when working on SVG projects.

Create a Simple SVG Icon Set

Show steps

Practice creating basic SVG shapes and paths by designing a set of icons. This will reinforce your understanding of SVG syntax and how to create reusable graphic elements.

Show steps

Choose a theme for your icon set.
Design 5-10 simple icons using SVG shapes.
Optimize the SVG code for each icon.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Study 'Practical SVG'

Show steps

Explore practical applications of SVG in web development by reading a book focused on real-world use cases. Learn about responsive SVG, accessibility, and performance optimization.

View Practical SVG on Amazon

Show steps

Read the chapters on responsive SVG and accessibility.
Experiment with the techniques described in the book.
Apply the knowledge to your own SVG projects.

Build an Animated SVG Logo

Show steps

Apply your knowledge of SVG and JavaScript to create an animated logo. This project will challenge you to combine SVG graphics with interactive elements.

Show steps

Design a logo using SVG shapes and paths.
Use JavaScript to animate the logo elements.
Optimize the animation for performance.

Follow Advanced SVG Animation Tutorials

Show steps

Refine your SVG animation skills by following advanced tutorials. Learn about complex animation techniques and how to create visually stunning effects.

Show steps

Search for tutorials on advanced SVG animation techniques.
Follow the tutorials step-by-step.
Adapt the techniques to your own projects.

Contribute to an Open Source SVG Project

Show steps

Gain experience working with real-world SVG code by contributing to an open-source project. This will expose you to different coding styles and project workflows.

Show steps

Find an open-source project that uses SVG.
Identify a bug or feature to work on.
Submit a pull request with your changes.

Career center

Learners who complete Make Art by Coding: Create an SVG Scene for Web Animation! will develop knowledge and skills that may be useful to these careers:

Web Animator

A web animator brings websites to life through engaging animations. This course focuses on coding to create SVG scenes, making it directly relevant to your animation work. The course content on modifying SVG with JavaScript is key to creating interactive animations. Learning about Bezier curves, arcs, and path elements, as covered in the course, provides you with the tools to create complex and visually appealing animations.

See salaries and explore the career path for Web Animator

Web Designer

As a web designer, you craft visually appealing and user-friendly websites. This course helps you create graphics for websites using Scalable Vector Graphics. Because SVG images are scalable without losing quality, this course will be helpful for creating logos, icons, and other design elements that need to look sharp on various screen sizes. Knowing how to modify SVG images with Javascript, as covered in this course, is particularly relevant for creating interactive web elements.

See salaries and explore the career path for Web Designer

Creative Coder

Creative coders use programming to create art, installations, and interactive experiences. This course helps you generate visual art from code. By focusing on Scalable Vector Graphics (SVG), the course content regarding Bezier curves, arcs, and path elements provides a foundation for generating complex and interesting shapes. The course's lessons about using JavaScript to modify SVG elements will also be applicable.

See salaries and explore the career path for Creative Coder

Technical Artist

Technical artists bridge the gap between artists and programmers in fields like game development and animation. This course helps you learn how to create art through code. By focusing on Scalable Vector Graphics (SVG), the course's content on JavaScript and SVG modification will be relevant. As a technical artist, the course's lessons regarding using Javascript to alter shapes for use on web pages might be particularly helpful.

See salaries and explore the career path for Technical Artist

Front-End Developer

A front end developer implements the visual elements of a website or application, and this course helps you integrate Scalable Vector Graphics into your projects. The course familiarizes you with SVG, a vector image format perfect for web development. The course's lessons on styling SVG with CSS and interacting with them using JavaScript will be quite helpful for creating dynamic and interactive user interfaces. Additionally, the course covers testing cross-browser compatibility, which is essential for front end development.

See salaries and explore the career path for Front-End Developer

User Interface Designer

User interface designers create intuitive and engaging interfaces for software and websites. This course may support your work by teaching you to create vector graphics using code. SVG images, which you will learn to make, are ideal for user interfaces because they scale without losing quality. The course content on styling SVG with CSS and modifying them with JavaScript are helpful in creating dynamic and responsive user interface elements.

See salaries and explore the career path for User Interface Designer

UX Designer

As a UX designer, your focus is on enhancing user satisfaction by improving the usability, accessibility, and desirability of a product. This course helps you use Scalable Vector Graphics (SVG) to develop high-quality graphics that will improve the user experience. The course's JavaScript lessons may improve interactivity for the user, yielding a better user experience overall.

See salaries and explore the career path for UX Designer

Digital Artist

Digital artists create art using digital tools and platforms. This course may be helpful for expanding your toolkit with code-generated art. Creating Scalable Vector Graphics (SVG) and manipulating them with code opens up new possibilities for digital art. The course's coverage of various SVG elements like rectangles, circles, lines, and polygons help you experiment with different visual forms.

See salaries and explore the career path for Digital Artist

Data Visualization Specialist

Data visualization specialists transform data into visual representations. This course helps create custom graphics using code. By focusing on Scalable Vector Graphics (SVG), you can create interactive and scalable visualizations for the web. The course's content on JavaScript and SVG modifications is particularly useful for creating dynamic charts and graphs that respond to user interactions.

See salaries and explore the career path for Data Visualization Specialist

Graphic designer

Graphic designers create visual concepts that communicate ideas and messages. This course may be useful if you want to incorporate code-generated art into your designs. Learning to create Scalable Vector Graphics (SVG) allows you to produce vector-based images that scale without losing quality, great for logos and icons. The course also touches on using SVG-edit and Illustrator, tools commonly used by graphic designers.

See salaries and explore the career path for Graphic designer

Motion Graphics Designer

Motion graphics designers create animated visuals for various media. This course may be useful as it introduces you to Scalable Vector Graphics (SVG). Because SVG images are scalable and can be manipulated with code, they are suitable for web animations. This course's lessons on modifying SVG with JavaScript will be particularly helpful for creating dynamic motion graphics.

See salaries and explore the career path for Motion Graphics Designer

Game Developer

Game developers create video games for various platforms. This course may be useful for creating game assets and user interface elements. Learning to create Scalable Vector Graphics (SVG) allows you to design vector-based graphics that scale without loss of quality, ideal for game development. The course's coverage of Javascript and SVG may be useful for interactive parts of the user interface as well.

See salaries and explore the career path for Game Developer

Software Engineer

Software engineers design, develop, and test software applications. This course may be useful for software engineers working on projects that require dynamic and scalable vector graphics. Learning to create and manipulate Scalable Vector Graphics (SVG) with JavaScript, as covered in this course, allows you to create dynamic user interfaces and visualizations within your applications. The course's content on cross-browser compatibility may also be helpful.

See salaries and explore the career path for Software Engineer

Instructional Designer

Instructional designers create learning experiences and materials. This course may be useful for creating interactive and visually appealing learning content. By learning to create Scalable Vector Graphics (SVG) and animate them for the web, you enhance your learning modules. The course's lessons on JavaScript and SVG modifications can be useful for making interactive diagrams and illustrations.

See salaries and explore the career path for Instructional Designer

Digital Marketing Specialist

Digital marketing specialists develop and implement online marketing campaigns. This course might be useful for creating visually appealing content. Learning to create Scalable Vector Graphics (SVG) may allow you to produce custom graphics for marketing materials. You can use the skills learned in this course to generate assets for web banners, social media posts, and email marketing campaigns.

See salaries and explore the career path for Digital Marketing Specialist

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Make Art by Coding: Create an SVG Scene for Web Animation!.

SVG Essentials

Save

Provides a comprehensive guide to SVG, covering everything from basic shapes to advanced animation techniques. It serves as an excellent reference for understanding the SVG specification and its various features. It is particularly useful for those who want to go beyond the basics covered in the course and explore more advanced SVG concepts. This book is commonly used by web developers and designers.

Practical SVG

Save

Focuses on practical applications of SVG in web development. It covers topics such as responsive SVG, accessibility, and performance optimization. It valuable resource for those who want to use SVG in real-world projects. This book is more valuable as additional reading than it is as a current reference. It provides a deeper understanding of how to use SVG effectively in web development.

Practical SVG

Kindle Edition

Make Art by Coding

Create an SVG Scene for Web Animation!

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Code art: svg scene for beginners

Activities

Career center

Reading list

Share

Similar courses