V6 Clearleft Patterns

Shape Slat 

<figure class="constrain">
    <div class="Shape-slat__shape anim-square">
        <svg width="60" viewbox="0 0 60 59">
            <path class="green" stroke="#23D8A0" fill="none" stroke-width="11" d="M38.59 12.89H48.59V23.89H38.59z" transform="rotate(15 38.6 12.9)" />
            <path class="grey" fill="#425968" fill-rule="evenodd" d="M8 21.1543H23.4226V36.5769H8V21.1543ZM8 36.5772H23.4226V51.9998H8V36.5772ZM38.8453 36.5772H23.4227V51.9998H38.8453V36.5772Z" clip-rule="evenodd" />
        </svg>
    </div>
</figure>
 
<figure class="constrain">
  <div class="Shape-slat__shape anim-{{ shape }}">
    {% if shape == 'triangle' %}
      {% include '@shapes' %}
    {% elseif shape == 'square' %}
      {% include '@shapes--square' %}
    {% elseif shape == 'circle' %}
      {% include '@shapes--circle' %}
    {% endif %}
  </div>
</figure>
 
{
  "shape": "square"
}

No notes defined.