Simple Path Examples

index.html

<svg viewBox="0 0 10 10" class="svg-1">
  <path d="M2,2 L8,8" />
</svg>

<svg viewBox="0 0 10 10" class="svg-2">
  <path d="M2,8 L5,2 L8,8" />
</svg>

<svg viewBox="0 0 10 10" class="svg-3">
  <path d="M2,2 Q8,2 8,8" />
</svg>

<svg viewBox="0 0 10 10" class="svg-4">
  <path d="M2,5 C2,8 8,8 8,5" />
</svg>

<svg viewBox="0 0 10 10" class="svg-5">
  <path d="M2,2 L8,2 L2,5 L8,5 L2,8 L8,8" />
</svg>

<svg viewBox="0 0 10 10" class="svg-6">
  <path d="M2,5 A 5 25 0 0 1 8 8" />
</svg>

<svg viewBox="0 0 10 10" class="svg-7">
  <path d="M2,5 S2,-2 4,5 S7,8 8,4" />
</svg>

<svg viewBox="0 0 10 10" class="svg-8">
  <path d="M5,2 Q 2,5 5,8" />
</svg>

<svg viewBox="0 0 10 10" class="svg-9">
  <path d="M2,2 Q5,2 5,5 T8,8" />
</svg>

simple-path-examples.markdown

Simple Path Examples

A Pen by Timothy McKenna on CodePen.

License.

style.scss

.svg-1:hover path {
  d: path("M8,2 L2,8");
}
.svg-2:hover path {
  d: path("M2,2 L5,8 L8,2");
}
.svg-3:hover path {
  d: path("M2,2 Q2,8 8,8");
}
.svg-4:hover path {
  d: path("M2,5 C2,2 8,2 8,5");
}
.svg-5:hover path {
  d: path("M3,3 L8,3 L2,5 L8,5 L3,7 L7,7");
}
.svg-6:hover path {
  d: path("M2,5 A 5 25 -15 0 1 8 8");
}
.svg-7:hover path {
  d: path("M2,5 S2,14 4,5 S7,8 8,4")
}
.svg-8:hover path {
  d: path("M5,2 Q 8,5 5,8")
}
.svg-9:hover path {
  d: path("M2,2 Q8,2 5,5 T8,8")
}


body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
svg {
  width: 30%;
  height: 30%;
  background: #eee;
  margin-bottom: 5%;
}
svg polyline,
svg line,
svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s;
}