title: High performance line-gradient in OpenLayers
body: <p>I'd like to make an IGC player for analysing paragliding competitions, where there'd be up to 150 lines (one for each pilot), each with up to 20k segments.</p>
  <p>What is the best performing way to only draw a line partially, up till a point, like this?</p>
  <p><a href="https://i.stack.imgur.com/JFX2N.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JFX2N.jpg" alt="example" /></a></p>
  <p>I'm both interested in hiding/showing with a clear cut (like on the screenshot), as well as controlling the line opacity with a gradient. Mapbox GL JS has <code>line-gradient</code> and <code>line-opacity</code> for this.</p>
  <p>How could I achieve this in OpenLayers with 30 FPS?</p>
  <p>I've looked at <a href="https://openlayers.org/en/latest/examples/flight-animation.html" rel="nofollow noreferrer">Flight Animation</a> example, which achieves the clear cut version, but how would I do a smooth gradient?</p>