CSS + SVG: A Little Love Story

• Little, Story

10 seconds. (44 words)

jeremiepat.github.io/svg-css-bff

Once Upon A Time…















CSS

  1. SVG Properties (fill, stroke, …)
  2. Geometry Properties (x, y, rx, …)
  3. CSS Custom Properties
  4. 2D & 3D Transform
  5. Masking & Clipping
  6. Transition & Animation

SVG

  1. One single element
  2. Many elements
  3. A customizable
  4. A drop shadow
  5. Some linear and radial gradients