examples/pipeline.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="85mm" height="146mm" viewBox="-3 5 85 146">
  <style>
    <![CDATA[
      svg { background: none; }
      svg * { stroke-linecap: round; stroke-linejoin: round; }
      rect, circle, ellipse, polygon { stroke-width: 0.5; fill: white; stroke: black; }
      line, polyline, path { stroke-width: 0.5; fill: none; stroke: black; }
      text, tspan { stroke-width: 0; font-family: sans-serif; font-size: 3px; fill: black; paint-order: stroke; stroke: white; }
      text.d-text, text.d-text * { text-anchor: middle; dominant-baseline: central; }
    ]]>
  </style>

    <defs>
        <filter id="softshadow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="0.7"/>
            <feOffset dx="1" dy="1"/>
            <feComposite in2="SourceGraphic" operator="arithmetic" k1="0" k2="0.4" k3="1" k4="0"/>
        </filter>
        <filter id="hardshadow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="0.2"/>
            <feOffset dx="1" dy="1"/>
            <feComposite in2="SourceGraphic" operator="arithmetic" k1="0" k2="0.6" k3="1" k4="0"/>
        </filter>
    </defs>

    <style>
        <![CDATA[
            rect {
                fill: white;
                stroke: black;
                stroke-width: 0.5px;
                filter: url(#softshadow);
            }
            text {
                font-size: 3px;
                dominant-baseline: central;
                text-anchor: middle;
            }
            line {
                stroke-width: 0.2px;
                stroke: black;
            }
            .pipeline {
                stroke-width: 0.2px;
                stroke: black;
                fill: none;
            }
        ]]>
    </style>

    <rect x="2" y="10" width="36" height="10"/>
    <text x="20" y="15" class="d-text">State hypothesis</text>
    <rect x="2" y="28" width="36" height="10"/>
    <text x="20" y="33" class="d-text">Design experiment</text>
    <rect x="2" y="46" width="36" height="10"/>
    <text x="20" y="51" class="d-text">Perform experiment</text>
    <rect x="2" y="64" width="36" height="10"/>
    <text x="20" y="69" class="d-text">Gather data</text>
    <rect x="2" y="82" width="36" height="10"/>
    <text x="20" y="87" class="d-text">Clean data</text>
    <rect x="2" y="100" width="36" height="10"/>
    <text x="20" y="105" class="d-text">Create model</text>
    <rect x="2" y="118" width="36" height="10"/>
    <text x="20" y="123" class="d-text">Evaluate model</text>
    <rect x="2" y="136" width="36" height="10"/>
    <text x="20" y="141" class="d-text">Check hypothesis</text>

    <path d="M 4 0
        a 4 8 0 0 0 0 16
        a 4 8 0 0 0 0 -16
        h 22
        a 4 8 0 0 1 0 16
        h -22" transform="translate(45, 20)" class="pipeline_h"/>
    <rect x="43" y="18" width="34" height="19" style="fill:none"/>

    <path d="M 0 2.5
        a 5 2.5 0 0 0 10 0
        a 5 2.5 0 0 0 -10 0
        v 60
        a 5 2.5 0 0 0 10 0
        v -60" transform="translate(45, 60)" class="pipeline_v"/>
    <path d="M 0 2
        a 4 2 0 0 0 8 0
        a 4 2 0 0 0 -8 0
        v 61
        a 4 2 0 0 0 8 0
        v -61" transform="translate(57, 60)" class="pipeline_v"/>
    <path d="M 0 1.25
        a 2.5 1.25 0 0 0 5 0
        a 2.5 1.25 0 0 0 -5 0
        v 62.5
        a 2.5 1.25 0 0 0 5 0
        v -62.5" transform="translate(67, 60)" class="pipeline_v"/>
    <path d="M 0 0.75
        a 1.5 0.75 0 0 0 3 0
        a 1.5 0.75 0 0 0 -3 0
        v 63.5
        a 1.5 0.75 0 0 0 3 0
        v -63.5" transform="translate(74, 60)" class="pipeline_v"/>

</svg>