This page cannot be displayed because your browser does not support scroll-driven animations with CSS.

Open this page in Chrome on desktop.

Or

Watch this summary as a video on YouTube:

Back to Home

Browser window too small

This page shows an interactive slide deck that is currently not responsive. Resize your browser window to at least 770px wide and 650px tall.

SVG Tutorial

Summary

Slide
export const Page = () => (
  <html>
    <h1>Hi there</h1>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="25" fill="red" />
    </svg>
  </html>
);
SVG is an XML-based markup language for vector graphics.
Since HTML5, you can inline an SVG in HTML.

This means you can generate an SVG from React or any other frontend library.

Slide
Slide
Slide
0, 0
100, 100 100, 100
200, 200 
<svg
  width="100"
  height="100"
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" />
</svg>
0, 0
100, 100 100, 100
200, 200 
<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" />
</svg>
-100, -100
0, 0 0, 0
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle r="50" />
</svg>
You can define an SVG by setting its size with the width and height attributes and its coordinate system with the viewBox attribute.
The coordinate system can also start at a negative coordinate. This way, the center of the second image is at 0,0.
Slide
Slide
0, 0
100, 100 100, 100 100, 100 100, 100 100, 100 100, 100
200, 200 
<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle
    cx="100"
    cy="100"
    r="50"
    fill="red"
    fill="none"
    stroke="red"
    stroke-width="5"
    class="red-circle"
  />
</svg>

.red-circle {
    fill: none;
    stroke: red;
    stroke-width: 2;
}
Now, let’s talk about this circle.

We can define a circle by setting its center coordinates, cx and cy, and its radius, r.

To change its color, we can set the fill attribute. We can use any value that’s valid in CSS.

To set the border color and width, we can use the stroke and stroke-width attributes.

We can also move the styling properties to CSS.
Slide
Slide
Slide
Slide
Slide
0, 0
25, 50 25, 50
200, 200 
<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <rect
    x="25"
    y="50"
    width="150"
    height="100"
  />
</svg>
Of course, we can also draw a rectangle.
Here, we have to set the top-left coordinates, x and y, and the size with width and height.
Slide
Slide
function Diagram() {
  const dataPoints = [3, 4, 7, 5, 3, 6];

  return (
    <svg width="200" height="200">
      {dataPoints.map((dataPoint, index) => (
        <rect
          key={index}
          x={42.5 + index * 20}
          y={150 - dataPoint * 10}
          width="15"
          height={dataPoint * 10}
          fill="#CD803D"
        />
      ))}
    </svg>
  );
}
With this knowledge, we can draw a diagram.
Here, we map some data points in React to rectangles.
Slide
Slide
<path d=". . ." />
To draw more complex shapes, we can use the path element.
Slide
0, 0
50, 40 150, 40 50, 100 150, 100 50, 160 150, 160 50, 100 150, 100 50, 40 150, 40 50, 100 150, 100 50, 160 150, 160 50, 100 150, 100
200, 200 
<svg width="100" height="100" viewBox="0 0 100 100">
  <path
    class="line"
    d="M 50, 100 L 150, 100"
    d="
      M 50, 40 L 150, 40
      M 50, 100 L 150, 100
      M 50, 160 L 150, 160"
  />
</svg>

.line {
    stroke: #333333;
    stroke-width: 24;
    stroke-linecap: round;
}
The d attribute of a path consists of segments. Here, we have a Move-to and a Line-to segment. We set a coordinate for both.
A path doesn’t have to be continuous. We can use multiple move-to and line-to segments in the same path.
Slide
Slide
We can already create basic icons this way.
Slide
-15, -15
0, 0 0, 11 0, 14 0, 0 0, 11 0, 14
30, 30 
<svg width="200" height="200" viewBox="-15 -15 30 30">
  <circle r="6" />
  <path id="ray" d="M 0, 11 L 0, 14" />
  <use href="#ray" transform="rotate(45)" />
  <use href="#ray" transform="rotate(90)" />
  <use href="#ray" transform="rotate(135)" />
  <use href="#ray" transform="rotate(180)" />
  <use href="#ray" transform="rotate(225)" />
  <use href="#ray" transform="rotate(270)" />
  <use href="#ray" transform="rotate(315)" />
</svg>

#ray {
  stroke: black;
  stroke-width: 2;
  stroke-linecap: round;
}
Now, let’s look into this sun icon.
Here, we center the coordinate system with the viewBox property.
Then, we draw a straight line with a path.
We can set an id to this path, reuse it with the use element, and rotate it into position.
Slide
Slide
Slide
Slide
<svg width="200" height="400">
  <g id="windmill-head">
    <circle r="8" />
    <path
      id="arm"
      d="
        M -7 -20
        C -7 -10 7 -10 7 -20
        L 2 -80
        L -2 -80" />
    <use href="#arm" transform="rotate(+120)" />
    <use href="#arm" transform="rotate(-120)" />
  </g>
  <path d="M 93 300 L 107 300 L 103 165 L 97 165" />
</svg>

#windmill-head {
  translate: 100, 150;
  animation: 4s linear infinite rotate;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
We can also animate an SVG with CSS.
Here, we wrap the moving part of this windmill into a group with the g element.
Then, set a keyframe animation for this group in CSS.
Slide
Slide
Slide
We can also set transformations dynamically with JavaScript.
Slide
Slide
Slide
100, 350225, 50350, 350
<svg width="450" height="450" >
  <path 
    d="M 100 350
Start Position
 Q 225 50
Control Point
 350 350
End Position
 " 
    stroke="#fa3838" stroke-width="20" fill="none" 
  />
</svg>

The quadratic bezier curve has one control point that defines how to bend the line. Drag the coordinates to see how the code changes.

Slide
100, 35070, 100380, 100350, 350
<svg width="450" height="450" >
  <path 
    d="M 100 350
Start Position
 C 70 100
Control Point 1
 380 100
Control Point 2
 350 350
End Position
 " 
    stroke="#fa3838" stroke-width="20" fill="none" 
  />
</svg>

A cubic bezier curve has two control points, giving you much greater flexibility.

Slide
-100, -100
-90, 0 -30, -30 30, -60 60, -30 30, 30 0, 90 -90, 0 -30, -30 30, -60 60, -30 30, 30 0, 90
200, 200
-100, -100
-30, 70 30, 0 90, -70 -80, -30 -20, 10 40, 50 -30, 70 30, 0 90, -70 -80, -30 -20, 10 40, 50
200, 200
Cubic bezier curves are great for creating smooth transitions between line segments. Hover over the paths to see how they connect two straight line segment.
Slide
20°150120145, 174288, 314
<svg width="450" height="450" >
  <path 
    d="M 145 174
Start Position
 A 150
Radius X
 120
Radius Y
 20
Rotation
 0
Large Arc Flag
 0
Sweep Flag
 288 314
End Position
 " 
    stroke="#fa3838" stroke-width="20" fill="none" 
  />
</svg>

Arcs are one of the most complicated path segments. Click here to read more about them.

Slide

Learn more at SVG-Tutorial.com

Connect on LinkedIn and Twitter

Slide