Animated SVG version of the Pipeline-Component logo

logo-pipeline-components-animated.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81.5 81.5">
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="50%" spreadMethod="reflect" />

    <!-- Gradients for Pipes and Stoppers -->
    <linearGradient id="gradient-orange" xlink:href="#gradient">
      <stop offset="0%" stop-color="#8D5010" />
      <stop offset="100%" stop-color="#FDEAD2" />
    </linearGradient>

    <linearGradient id="gradient-blue" xlink:href="#gradient">
      <stop offset="0%" stop-color="#0F5ECB" />
      <stop offset="100%" stop-color="#CFE3FD" />
    </linearGradient>

    <linearGradient id="gradient-green" xlink:href="#gradient">
      <stop offset="0%" stop-color="#064D0A" />
      <stop offset="100%" stop-color="#D0FDD3" />
    </linearGradient>

    <linearGradient id="gradient-red" xlink:href="#gradient">
      <stop offset="0%" stop-color="#8D1D0B" />
      <stop offset="100%" stop-color="#FBA592" />
    </linearGradient>

    <linearGradient id="gradient-blue-2" xlink:href="#gradient-blue" x1="0" y1="0" x2="50%" y2="0" />
    <linearGradient id="gradient-red-2" xlink:href="#gradient-red" x1="0" y1="0" x2="50%" y2="0" />
    <radialGradient id="gradient-red-curve" xlink:href="#gradient-red" cx="100%" cy="0" fr="0.15" r="1">
      <stop offset="0%" stop-color="#8D1D0B" />
      <stop offset="50%" stop-color="#FBA592" />
      <stop offset="100%" stop-color="#8D1D0B" />
    </radialGradient>

    <!-- Gradients for labels-->
    <linearGradient id="orange-label" xlink:href="#gradient">
      <stop offset="0%" stop-color="#8D5010" />
      <stop offset="100%" stop-color="#FD962C" />
    </linearGradient>
    <linearGradient id="blue-label" xlink:href="#gradient" x1="0" y1="0" x2="50%" y2="0">
      <stop offset="0%" stop-color="#0F5ECB" />
      <stop offset="100%" stop-color="#368DF9" />
    </linearGradient>
    <linearGradient id="green-label" xlink:href="#gradient">
      <stop offset="0%" stop-color="#064D0A" />
      <stop offset="100%" stop-color="#128D19" />
    </linearGradient>
    <linearGradient id="red-label" xlink:href="#gradient">
      <stop offset="0%" stop-color="#8D1D0B" />
      <stop offset="100%" stop-color="#CD2A15" />
    </linearGradient>
  </defs>

  <g stroke="#000" stroke-width="1" stroke-linejoin="round">
    <g>
      <rect x="15" y="12" stroke="orange" fill="transparent" width="6" height="1" stroke-dasharray="1">
        <animate attributeType="XML" attributeName="x" from="15" to="17" dur="1s" repeatCount="indefinite"/>
      </rect>
      <rect x="15" y="12" stroke="lime" fill="transparent" width="6" height="1" stroke-dasharray="1">
        <animate attributeType="XML" attributeName="x" from="55" to="67" dur="1s" repeatCount="indefinite"/>
      </rect>
      <rect x="40" y="12" stroke="red" fill="transparent" width="1" height="5" stroke-dasharray="1">
        <animate attributeType="XML" attributeName="y" from="38" to="53" dur="1s" repeatCount="indefinite"/>
      </rect>
    </g>
    <!-- Orange (Pause) pipe -->
    <g class="pipe">
      <rect class="body"    x="0"  y="7" width="11" height="11" fill="url(#gradient-orange)" stroke-dasharray="11" />
      <rect class="stopper" x="11" y="3" width="5"  height="19" fill="url(#gradient-orange)" />
      <circle cx="5.25" cy="12.5" r="4" fill="#FFF" stroke="url(#orange-label)" />
      <rect x="4" y="11" width="2.5" height="3" stroke-width="1.5" stroke="#FD962C" fill="transparent" stroke-dasharray="0.7,1,4.5,1.1,4" stroke-linejoin="miter"/>
    </g>

    <!-- Blue (Running) pipe -->
    <g class="pipe">
      <rect class="body"    x="25" y="7" width="31" height="11" fill="url(#gradient-blue)" stroke-dasharray="31,11"/>
      <rect class="stopper" x="20" y="3" width="5"  height="19" fill="url(#gradient-blue)" />
      <rect class="stopper" x="56" y="3" width="5"  height="19" fill="url(#gradient-blue)" />

      <rect class="body"    x="34.5" y="17.5" width="11" height="21" stroke-dasharray="0,11,21,11,21"/>        
      <polygon points="35,38.5 35,17.5 40,12.5 45,17.5 45,38.5" fill="url(#gradient-blue-2)" stroke-width="0"/>
      <rect class="stopper" x="30.5" y="39" width="19"  height="5" fill="url(#gradient-blue-2)" />
      <circle cx="40" cy="26" r="4" fill="#FFF" stroke="url(#blue-label)"/>
      <path d="M40,26 V23.5 A2.4,2.4 45 1,1 37.8,27 Z" fill="#368DF9" stroke="#368DF9" />
    </g>

    <!-- Green (Success) pipe -->
    <g class="pipe">
      <rect class="body"    x="70.5"  y="7" width="11" height="11" fill="url(#gradient-green)" stroke-dasharray="11" />
      <rect class="stopper" x="65" y="3" width="5"  height="19" fill="url(#gradient-green)" />
      <circle cx="76" cy="12.5" r="4" fill="#FFF" stroke="url(#green-label)" />
      <rect x="68.5" y="-36" width="2" height="4" stroke="#128D19" fill="transparent" stroke-dasharray="0,2,6.5,4" transform="rotate(35)"/>
    </g>    

    <!-- Red (Failed) pipe -->
    <g class="pipe">
      <rect class="body"    x="34.5" y="52.5" width="11"  height="9"  fill="url(#gradient-red-2)" stroke-dasharray="0,11,9,11,9" />
      <rect class="stopper" x="30.5" y="47"   width="19"  height="5"  fill="url(#gradient-red-2)" />        
      <rect class="body"    x="47"   y="63"   width="32"  height="11" fill="url(#gradient-red)" stroke-dasharray="32,11" />
      <path d="M45.5,61 V61 Q46,62.5 47.5,63 H47.5 V74 H46.5 Q 34.5,72.5 34.5,62 V61 Z" fill="url(#gradient-red-curve)" stroke-dasharray="3.4,10,22,10"/>
      <rect class="stopper" x="76" y="59" width="5" height="19" fill="url(#gradient-red)" />
      <circle cx="60" cy="68.5" r="4" fill="#FFF" stroke="url(#red-label)" />
      <text x="57.85" y="70" stroke="#CD2A15" font-size="5" font-family="sans" >✕</text>
    </g>
  </g>
</svg>