SVG fundamentals for beginners

Discover how to draw lines in SVG using x1, y1, x2, y2, and stroke, including horizontal, vertical, and diagonal examples, and explore default fill and adjustable stroke width.

Learn how SVG rounded rectangles use rx and ry to control corner curvature, with maximums of half the width and height and equal or unequal radii.

Explore how svg polygons form closed shapes of three or more sides using points, connect last point to first, and apply red fill, black stroke, and nonzero and evenodd rules.

Create open-ended shapes with the polyline element by connecting straight lines via a list of x,y points. Fill the polyline with red in a zigzag example.

Learn to style SVG strokes using color formats (named colors, hex, rgb, hsl), set stroke width and opacity, apply dash patterns and stroke-dashoffset, and control linecap and linejoin options.

Explore how the SVG translate transform moves an element by x and y coordinates, changing the origin, with examples of squares translated along the x and the y axes.

Master the rotate transformation in svg by rotating the coordinate system around an origin by a specified degree, with positive clockwise and negative counterclockwise directions, illustrated with circles and hearts.

Explore skewX and skewY transformations in SVG, learning how they skew coordinates along the x or y axis, affect lines and shapes, and interact with translation and styling.

Explore how the Q subcommand defines quadratic Bezier curves in SVG by using moveto and Q commands to draw paths through points, with absolute and relative coordinates.

Learn to create linear gradients in SVG with color stops and offsets. Explore directions from left to right, right to left, up to down, and along a diagonal.

Learn how radial gradients create color transitions along a circle, using stops at 0, 30, 60, 100 percent and adjusting cx, cy, r, fx, and fy.

Position the SVG text element using x and y at the baseline and apply CSS properties such as font weight, font style, text decoration, word spacing, and letter spacing.

Position SVG text with x and y, and set fill, font size, and font family. Use tspan to group characters and lines, and apply line-through.

Create a css animated svg circle using a four-second animation named movement, with keyframes that translate the circle from 0,0 to 1100px to the right at 50% and back.

Animated svg shapes use polygon clip paths and keyframes to morph between star and square while an infinite four-second cycle changes red to blue and 80% to 40% opacity.

Explore how to define starting and ending values for SVG attributes, color, and transformation, set animation timing, and manage CSS versus XML attributes across simple shapes.

Explore how svg animations specify timing with numeric durations and clock values, including start and end references, repeat options, and freeze fills for synchronized circle animations.