Featured resource
2026 Tech Forecast
2026 Tech Forecast

Stay ahead of what’s next in tech with predictions from 1,500+ business leaders, insiders, and Pluralsight Authors.

Get these insights
  • Course

Making a Responsive and Interactive Animation with SVGs in CSS

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.

Advanced
1h 50m
(11)

Created by

Last Updated Jul 31, 2021

Course Thumbnail
  • Course

Making a Responsive and Interactive Animation with SVGs in CSS

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.

Advanced
1h 50m
(11)

Created by

Last Updated Jul 31, 2021

Get started today

Access this course and other top-rated tech content with one of our business plans.

Try this course for free

Access this course and other top-rated tech content with one of our individual plans.

This course is included in the libraries shown below:

  • Core Tech
What you'll learn

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. We'll go over how to turn a vector-based design into web-optimized SVGs and make writing keyframe animations easier and more interesting using Sass. By the end you'll have greater understanding of how CSS animations can work together to form an interesting whole. These skills and insights should, in turn, go a long way to make more dynamic web projects that can tell a story or catch the user's attention. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.

Making a Responsive and Interactive Animation with SVGs in CSS
Advanced
1h 50m
(11)
Table of contents

Get started with Pluralsight