<svg>
  <defs>
    <g id="rainbow">  
      <rect x="0%" y="0" width="<%= (100/5) %>%" height="100%" class="colour-2"/>
      <rect x="<%= (100/5)*1 %>%" y="0" width="<%= (100/5) %>%" height="100%" class="colour-5"/>
      <rect x="<%= (100/5)*2 %>%" y="0" width="<%= (100/5) %>%" height="100%" class="colour-4"/>
      <rect x="<%= (100/5)*3 %>%" y="0" width="<%= (100/5) %>%" height="100%" class="colour-3"/>
      <rect x="<%= (100/5)*4 %>%" y="0" width="<%= (100/5) %>%" height="100%" class="colour-1"/>
    </g>
    <image x="0" y="0" width="100%" height="100%" xlink:href="<%= @conference.cover_url || image_path('default_poster.jpg') %>" id="banner-image" preserveAspectRatio="xMidYMid slice"/>
  
    <filter id="f1" x="0" y="0" width="1" height="1">
      <feImage xlink:href="#rainbow" result="rainbow"/>
      <feImage xlink:href="#banner-image" result="banner-image"/>
      <feBlend mode="multiply" in="rainbow" in2="banner-image" />
    </filter>
  </defs>
 
  <rect width="100%" height="100%" filter="url(#f1)"/>
</svg>
