Fabric composition bar

1<div class="gpl-fabcomp">2  <div class="gpl-fabcomp__bar">3    {%- assign rows = parts | newline_to_br | split: '<br />' -%}4    {%- assign i = 0 -%}5    {%- for row in rows -%}6      {%- assign parts2 = row | strip | split: '|' -%}7      <span class="gpl-fabcomp__seg" style="width: {{ parts2[1] | strip }}%; background: hsl({{ i | times: 60 }}, 60%, 70%)"></span>8      {%- assign i = i | plus: 1 -%}9    {%- endfor -%}10  </div>11  <div class="gpl-fabcomp__legend">12    {%- assign i = 0 -%}13    {%- for row in rows -%}14      {%- assign parts2 = row | strip | split: '|' -%}