<svg class="svg-pattern" height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>

 {{! Evenly sized diagonal stripes}}
 <pattern id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
  <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzMnLz4KPC9zdmc+" x="0" y="0" width="10" height="10"></image>
 </pattern>

  <linearGradient class="das-gradient" id="recommendation-chart-decrease-gradient" x2="100%" y2="0">
    <stop offset="0%" stop-color="var(--full-color)" />
    <stop offset="100%" stop-color="var(--faint-color)" />
  </linearGradient>
  <linearGradient class="das-gradient" id="recommendation-chart-increase-gradient" x2="100%" y2="0">
    <stop offset="0%" stop-color="var(--faint-color)" />
    <stop offset="100%" stop-color="var(--full-color)" />
  </linearGradient>

 </defs>
</svg>
