Shopify Curved SVG Marquee – Flowing Text Animation

                    <!-- 
========================================
Section Name: Curved Marquee SVG
Tech Stack: Liquid, HTML, CSS, JavaScript, SVG
What This Section Does: 
- Displays animated text that flows along a curved SVG path.
- Features customizable text segments with individual color controls.
- Includes adjustable font size, letter spacing, and animation duration.
- Creates a smooth, continuous flowing text effect for visual interest.

Promotion: 
Add visual elegance to your Shopify store with a curved SVG text marquee. Create flowing text animations that follow a graceful path. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="curved-svg-marquee" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <svg id="svg" viewBox="0 20 1040 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="curve" d="M 0,7000 C 0,7000 0,350 -50,350 C 152.13333333333333,306 304.26666666666665,262 445,298 C 585.7333333333333,334 715.0666666666668,450 879,472 C 1042.9333333333332,494 1241.4666666666667,422 1440,350 C 1440,350 1440,700 1440,700 Z">
    </path>
    <text x="-2000" style="font-size: {{ section.settings.font_size }}px; letter-spacing: {{ section.settings.letter_spacing }}px;">
      <textPath xlink:href="#curve">
        {% for i in (1..6) %}
          {% for block in section.blocks %}
            {% if block.type == 'text_segment' %}
              <tspan style="fill: {{ block.settings.text_color }};">{{ block.settings.text | escape }}</tspan>
            {% endif %}
          {% endfor %}
        {% endfor %}
      </textPath>
      <animate attributeName="x" dur="{{ section.settings.animation_duration }}s" values="-4000;0" repeatCount="indefinite"></animate>
    </text>
  </svg>
</section>

<style>
  .curved-svg-marquee {
    background: {{ section.settings.background_color }};
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .curved-svg-marquee svg {
    text-transform: uppercase;
    width: 100%;
    height: 100%;
  }

  .curved-svg-marquee svg path {
    fill: transparent;
  }
</style>

{% schema %}
{
  "name": "Curved Marquee SVG",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f8f3ed"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 20,
      "max": 200,
      "step": 5,
      "unit": "px",
      "label": "Font Size",
      "default": 100
    },
    {
      "type": "range",
      "id": "letter_spacing",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Letter Spacing",
      "default": 2
    },
    {
      "type": "range",
      "id": "animation_duration",
      "min": 10,
      "max": 60,
      "step": 5,
      "label": "Animation Duration (seconds)",
      "default": 30
    },
  
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 0,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 0,
      "min": 0,
      "max": 100,
      "step": 5
    }
  ],
  "blocks": [
    {
      "type": "text_segment",
      "name": "Text Segment",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "CURVE MARQUEE • "
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#000000"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Curved Marquee SVG",
      "category": "Text",
      "blocks": [
        {
          "type": "text_segment"
        },
        {
          "type": "text_segment",
          "settings": {
            "text_color": "#FF0000"
          }
        }
      ]
    }
  ]
}
{% endschema %}