Viz - Stroke

1 - About

A stroke operator is a line along a path.

For each straight or curved segment in the path, the stroked line is centered on the segment with sides parallel to the segment.

Parameters:

  • width
  • opacity
  • dash array: controls the pattern of dashes (long, short, long,…)
  • dash offset: specifies the draw start point of a dash
  • line cap
  • line join
  • miter limit

3 - Properties

3.1 - dasharray

line {
    stroke: black;
    stroke-width: 2;
}
<svg>
    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
</svg>

3.2 - dash-offset

line {
    stroke: black;
    stroke-width: 2;
}
<svg>
    <line stroke-dasharray="50, 15"   stroke-dashoffset="00"          x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="10"          x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="20"          x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="30"          x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="40"          x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="50"          x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="60"          x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="50, 15"   stroke-dashoffset="70"          x1="10" y1="150" x2="190" y2="150" />
</svg>

3.2.1 - Animation

Viz - Key Frame (Target Value)

rect {
  stroke: #ECDCC6;
  stroke-width: 5;
  stroke-dasharray: 600;
  animation: dash 5s linear alternate infinite;
}
 
@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 600;
  }
}
<svg>
<rect
    x="5" 
    y="5" 
    width="200" 
    height="100" 
    fill="none"
    rx="10"
    ry="10"/>
</svg>

4 - Analysis

5 - Documentation / Reference

data/viz/stroke.txt · Last modified: 2017/12/27 20:58 by gerardnico