SVG Vectorial Graphics: Illustrate and Animate with Code

Overview

“Gradients are another common property in CSS, and SVG has its own way of declaring them. The interesting thing about these gradients is the possibility of combining them with other SVG elements and getting things that are not possible in normal HTML, such as applying a gradient to a text. Let's see how they work.”

In this video lesson Javier Usobiaga Ferrer addresses the topic: Gradients, which is part of the Domestika online course: SVG Vectorial Graphics: Illustrate and Animate with Code. Learn to create vector illustrations for your website, from basic lines to interactive animations.

Partial transcription of the video

“[Music] As in CCS, SVG can declare gradients, but the interesting of these gradients, is to combine them with other SVG elements and do things that do not are possible with normal HTML , let's see it. To create a gradient, declare inside the label Defs, definitions and we will group inside the label linear gradient. Inside of this label in turn we will put the stop labels by each color we want have our gradient, in this example we are seeing a gradient of two colors, starts in this yellow and ends in this orange, the colors are indicated with the attribute stop color inside the stop label a...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code

• Level: Beginner
• 98% positive reviews (271)
• 9106 students
• 7 units
• 32 lessons (2h 2m)
• 6 downloads

• Category

  Web & App Design

• Software

  Adobe Illustrator, Sketch

• Areas

  Animation, Interactive Design, Web Design, Web Development