Mastering GSAP and CSS Animation with SVG

Following quiz provides Multiple Choice Questions (MCQs) related to SVG Framework. You will have to read all the given answers and click over the correct answer. If you are not sure about the answer then you can check the answer using Show Answer button. You can use Next Quiz button to check new set of questions in the quiz.

In this tutorial, you will learn how to include SVG in HTML and CSS . You can also learn about the new SVG tag in HTML and handling it by CSS.

In this tutorial, you will learn SVG viewport and view box property. You can learn how to change the view area of SVG by using viewport and how to span and zoom the SVG image using viewbox attribute of SVG tag in HTML.

In this tutorial you will learn SVG line element .You can learn how to draw a line in svg canvas area and make a shapes with different lines.

In this tutorial, you will learn SVG rect element tag . You can learn how to create a rectangle in SVG with this "Rect" tag.

In this tutorial, you will learn the SVG circle tag. You can learn how to make a circle in SVG with this tutorial video.

In this tutorial, you will learn the SVG ellipse tag. You can learn how to make an ellipse in SVG.

In this tutorial, you will learn SVG polyline tag .You can learn how to polygon type shape in SVG with polyline tag.

In this tutorial, you will learn SVG polygon tags. You can learn how to make a polygon shape in SVG and what is difference between polygon and polyline.

In this tutorial, you will learn the SVG path tags. You can learn how to make lines both horizontal and vertical with a path tag. You will also learn different path commands to make different shapes.

In this tutorial, you will learn SVG path tag .You can learn how to make SVG Cubic Bezier Curves and Quadratic Bezier Curves.

In this tutorial, you will learn SVG path tags. You can learn how to make an arc with an SVG path tag.

In this tutorial, you will learn SVG text tags.You can learn how to write text and its styling within SVG.

In this tutorial, you will learn SVG image tag. You can learn how to add images in SVG tag.

In this tutorial, you will learn SVG stroke properties. You can learn different properties to style the SVG stroke-like stroke-width, stroke-opacity, stroke-dasharray, stroke-linecap, stroke-linejoin.

In this tutorial, you will learn SVG fill properties . You can learn how to change the background color of SVG elements and gave it an opacity with fill-opacity.

In this tutorial, you will learn SVG grouping elements. You can learn how to make a group of two or move SVG elements. In short, grouping means is combine different SVG elements and style them from one place.

In this tutorial, you will learn SVG defs , symbols, and use tags. You can learn how to use a group tag more than one time with SVG use tag and how to make an SVG symbol and definitions.

In this tutorial, you will learn SVG text path tag .You can learn how to set text on path and move it like curves with this svg textpath element.

In this tutorial you will learn svg gradients element.You can learn how to gradient background in svg.You will learn two type of svg gradient that is linear gradient and radial gradient.

In this tutorial, you will learn SVG gradients elements. You can learn how to gradient background in SVG. You will learn two types of SVG gradients that is linear gradients and radial gradients.

in this tutorial, we are going to learn how can we convert vector graphic image into SVG image.

In this tutorial, you will learn SVG ClipPath elements. you are going to learn how to play animation using ClipPath tag.

in this tutorial I am going to introduce you what is svg fitter

in this tutorial we are going to learn how we can implement SVG filter on element

in this tutorial we are going to learn how can we add JavaScript in SVG image.

In this tutorial, you are going to learn the CSS filter property. You can learn different types of image effects in css3 with this filter property.CSS filter has 12 different effects like blur, brightness, contrast, grayscale, hue-rotate, sepia, opacity, invert, saturate, drop-shadow.

In this tutorial, you are going to learn CSS transition properties. You can learn how to animate the HTML elements on hover, focus, and responsive screens with CSS3 property transition. You can also learn transition-duration, transition-delay, transition-timing-function, transition-property for animation of HTML tags. By learning this you can easily make image hover effect, color transition effect, animate the shapes through CSS.

In this tutorial, you are going to learn CSS transform. You can learn different types of 2d transform like rotate, scale, translate, skew, and matrix. By learning this you can easily transform the shape of any HTML tag in 2d view.

In this tutorial, you are going to learn CSS transform 3d .You can learn different types of 3d transform with css3 transform like rotateX, rotateY, rotateZ, translateZ, translate3d, scalesZ, scale3d, perspective, matrix3d.

In this tutorial you are going to learn css perspective.You can learn how to change the perspective view when rotating any html element in 3d.CSS Perspective property is very useful only when you are using tranform properties like rotateX, rotateY and ScaleZ.

In this tutorial you are going to learn css transform-style.You can learn different type of css3 transform-style like preserve-3d and flat.This property is useful when you are using css transform property with 3d values like rotateX, rotateY, translateZ and ScaleZ.

In this tutorial, you are going to learn css backface-visibility.You can learn when we transform in 3d format with css like rotateX or rotateY then how to hidden the background view of the rotating element with this css3 property backface-visibility.

In this tutorial, you are going to learn CSS animation properties. You can learn how to animate any HTML tag with the new css3 animation property. You can also learn other animation-related CSS properties like @keyframes, animation-name, animation-duration, animation-delay, animation-direction, animation-iteration-count, animation-timing-function.

in this project we are going to learn how we can create shape using svg line stroke.

In this tutorial you are going to learn css animation-fill-mode and animation-play-state .You can learn different type of animation fill mode like backwards, forwards and both with animation play state in paused or running mode.

In this tutorial, you are going to learn CSS animation-fill-mode and animation-play-state. You can learn different types of animation fill mode like backward, forwards and both with animation play state is paused or running mode.

in our first project we are going to create svg stroke animation with CSS

In this project we are going to create svg elastic line effect

in this project we are going to learn how can we wrap a title using svg line stroke

in this project, we are going to create editable wavy text animation with 360-degree rotation

in this tutorial we are going to learn how we can create quick SVG loader animation.

in this project we are going to create 3D hover animation using svg

this is one of the most exciting project in our project series, in this project, we are going to create Path tracking animation.

in this section, we are going to learn how we can create multiple page loader using svg.

in this project, we are going to learn how we can create SVG Scroll drawing animation.