JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="400" width="400">
  <defs>
    <linearGradient id="pipeGradient" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0%"  style="stop-color:rgb(0,0,0);      stop-opacity:1" />
      <stop offset="60%" style="stop-color:rgb(200,200,200);stop-opacity:0" />
      <stop offset="70%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(127,127,127);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!--good-->
  <rect width="300" height="40" fill="url(#pipeGradient)" x="80"/>
  <!-- the gradient don't follow path so is't not good-->
  <path d="M20,0 l1,150q0,50 50,50l150,0" stroke="url(#pipeGradient)" stroke-width="40" fill="transparent"/><!-- see the curves and the end that don't look like pipe-->
</svg>