Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 1.5 hours on-demand video
  • 6 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development CSS

SVG & CSS Animation - Using HTML & CSS

Learn the fundamentals of creating SVG animations in the browser using HTML & CSS.
Rating: 4.0 out of 54.0 (990 ratings)
9,815 students
Created by Code Collective
Last updated 5/2015
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Create SVG animations using HTML & CSS
  • Prototype animations in the online tool Codepen
  • Explain the CSS properties needed for SVG line animations in the browser
Curated for the Udemy for Business collection

Course content

8 sections • 24 lectures • 1h 23m total length

  • Preview01:52

  • Preview03:14
  • Introduction to Sublime Text
    00:50
  • Introduction to Adobe Illustrator
    02:02

  • First Project Preview and Introduction
    01:06
  • Create an SVG in Illustrator
    04:28
  • Importing an SVG to Codepen.io
    01:54
  • Creating the SVG Animation
    06:17

  • Second SVG Project Intro
    03:50
  • Import and Style SVG
    04:02
  • Preview02:16
  • Using CSS Animations Part 1
    03:07
  • Using CSS Animations Part 2
    02:53
  • Improving the Animation
    04:27

  • Introduction to Minimal SVG Project
    01:40
  • Preview03:39
  • Create Animation Part 1
    02:52
  • Create Animation Part 2
    03:48
  • Create Animation Part 3
    03:58

  • Transform Rotate Introduction
    05:12
  • Making use of Dashed Stroke
    05:25
  • Using Transform Scale
    07:58

  • Adding an SVG Animation to Example HTML page
    06:27

  • Course Completion
    00:35

Requirements

  • You should have a text editor ready for coding on your computer.
  • You can follow along with creating SVG images in vector tools like Adobe Illustrator. These files are provided for students who don't have the software or just want to code.
  • Should have some experience with HTML & CSS. Know how to use HTML tags for content and style those HTML tags using CSS classes.

Description

★★★★★ "This course is well-structured and easy to follow. The instructor does a great job of explaining how to complete each step and as well as why they are needed." - Dan

★★★★★  "Good introduction to SVG animations. Good clear explanations of each example and providing SVG code for several elements was very helpful." - Michael

★★★★★  "This course is really helpful to get started on SVG animation journey, a wonderful course." - Veera

In this course we will cover the fundamental techniques using in CSS to create animated SVG elements. SVG images look perfect on any screen size and with the importance of mobile web have become increasingly popular. SVG allows you to create animations and take flat illustrations to a whole new level.

This course is perfect for both new and experienced web developers who are yet to use SVG within their projects. If you have used HTML and CSS before you will have the knowledge to follow along with the examples.

By the end of this short course you will have created three separate SVG animations from scratch. Each example adds useful techniques for future projects. In just 2 hours you will have the experience to create your own SVG animations.

Improve your web development skills in this short course and make your next project stand out.

Who this course is for:

  • Students should have some experience with creating websites with HTML & CSS.
  • No experience using SVG images is requied, we explain how to create and use SVG images in code for those with no prior knowledge.
  • This course is not suited for a student who is a complete beginner and never seen HTML code before.

Instructor

Code Collective
Level up your coding.
Code Collective
  • 4.2 Instructor Rating
  • 2,567 Reviews
  • 24,842 Students
  • 2 Courses

Get ahead in the developer world. Learn new skills that will help take your career to the next level. 

Over 1000 positive reviews and 20k students enjoy my courses. 

If you need a specific course please contact us and we can create courses on anything related to coding.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.