I'm curious if it's possible to create a scrolling marquee on an SVG path with the use of HTML and CSS?

I am interested in creating a unique effect similar to what is showcased on this website or in the main menu of Colin McRae Rally 2.0.

My goal is to generate a path and animate text along it, with the letters wrapping around to the start as they reach the end of the path.

After examining the HTML code of the first example, I noticed that JavaScript was used to achieve this effect. Although I prefer to avoid using JS if possible, it's not a requirement.

I apologize for the vagueness of my question as I don't have any specific code to present. It seems like my challenge lies in identifying the correct search terms to find the necessary resources for implementing this concept.

javascripthtmlcsssvg

Answer №1

To create dynamic text animations along a path in SVG, you can utilize the textPath feature along with SVG animation using SMIL.

I have implemented two identical texts that move along a specific path and animated them accordingly. However, achieving perfect alignment is your upcoming challenge.

<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <style>
        text { font-size: 8px }
    </style>

    <symbol id="s1">
        <path id="p1" d="M 0,0 C 5,10 5,40 20,40 35,40 60,55 60,70 60,85 100,100 100,100" />
    </symbol>

    <use href="#s1" stroke="silver" stroke-width="10" fill="none" />

    <text dominant-baseline="middle">
        <textPath href="#p1" startOffset="100%">
            Text 1, text 2, text 3, text 3, text 4
        <animate
        attributeName="startOffset" from="100%" to="-100%"
        dur="10s" repeatCount="indefinite" />
        </textPath>
    </text>

    <text dominant-baseline="middle">
        <textPath href="#p1" startOffset="100%">
            Text 1, text 2, text 3, text 3, text 4
        <animate
        attributeName="startOffset" from="100%" to="-100%"
        dur="10s" begin="5s" repeatCount="indefinite" />
        </textPath>
    </text>
    
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I position an element at the center of a div using CSS?

Here is some HTML code that I need help with: <div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5&ap ...

css

The execution of the enzyme wrapper.update() function results in the removal of the value prop from the ref input

Take a look at this Code Sandbox that showcases a test scenario related to the issue being discussed. The test in the mentioned Code Sandbox is failing as outlined in the question: https://codesandbox.io/s/react-jest-and-enzyme-testing-c7vng The goal here ...

javascriptreactjsjestjsenzyme

What could be causing my code to not align vertically in the Grid layout?

As I delve into developing with React and MaterialUI, a perplexing issue has arisen where elements refuse to align vertically. My expertise lies mostly in backend development, leaving me with minimal knowledge of frontend development nuances, especially co ...

cssreactjsmaterial-uicss-grid

Dependency injection of an Angular app factory toaster is causing the application to malfunction

I am currently working on an Angular application that utilizes Firebase as its backend. My goal is to inject 'toaster' as a dependency within my authorization app factory. Below is the initial setup of the app.factory: app.factory('principa ...

javascriptangularjsfirebase

What strategies can be employed to minimize redundant re-rendering of React components while utilizing the useEffect hook?

Hey everyone, I'm facing a challenge in my React/Electron project where I need to minimize renders while using the useEffect hook to meet my client's requirements. Currently, I have a container/component structure with an index.js file that house ...

javascriptreactjsreact-reduxelectron

Tips on removing authentication token when logging out in react native

Working with the Django Rest Framework and React Native for the front-end, I am currently facing an issue where the authentication token persists even after a user logs out from the front-end. This is evident as the token still shows in the Django admin pa ...

javascriptreactjsreact-nativedjango-rest-framework

There is a lack of 'Access-Control-Allow-Origin' header, resulting in no access to the API

Having some trouble with the UK Parliament API, I keep encountering this error: XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not a ...

javascriptjqueryjsonapi

`Trigger a page reload when redirecting`

Currently, I am tackling some bug fixes on an older Zend Framework 1.10 project and encountering difficulties with redirection and page refresh. The issue: The task at hand is to make an AJAX call, verify if a person has insurance assigned, and prevent de ...

javascriptphpjqueryajaxzend-framework

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss

Troubleshooting Node.js TypeScript breakpoints in Visual Studio Code

I've attempted multiple solutions, but none seem to be working for me. Although the code is running, I'm having trouble setting breakpoints and debugging it. Can you offer any assistance? Below is the configuration script I've tried in VSCo ...

javascriptnode.jstypescriptvisual-studio-codevscode-debugger

Exploring the integration of data from two Firestore collections using JavaScript

I manage two different types of collections, one being called CURRENCY-PAIR and the other Alerts. The collection CURRENCY-PAIR includes the following information: Currency-Pair Name Currency-AskPrice Currency-BidPrice On the other hand, the Alerts colle ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Setting the default value for ngModel does not receive any information from the model

I am trying to populate a form with default values using the code below: <h3>ِStart Time</h3> <div class="row" > <div class="col"> <label for="startTime">Hour(s) </label> <input type="numb ...

htmlcssangulartypescript

Choose the identical selection once more from a drop-down menu using JQuery

Below is the code containing a Select: http://jsfiddle.net/pdkg1mzo/18/ The issue I'm facing is that I need to trigger an alert every time a select option is clicked, even if the clicked option is already selected. ...

javascriptjqueryhtml

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

javascripthtmlangularjsionic-frameworkhtml5-canvas

Issues with nested array filtering in JS/Angular causing unexpected outcomes

I am faced with a particular scenario where I need to make three HTTP requests to a REST API. Once the data is loaded, I have to perform post-processing on the client side. Here's what I have: An array of "brands" An array of "materials" An array o ...

javascriptangularjsfilter

Tips for displaying the sum of a grouped field in the balloonText using Amchart

I recently started working with Amcharts and I am seeking advice on what I may be doing incorrectly. Below is the snippet of my JavaScript code: var chartData1 = []; generateChartData(); function generateChartData() { var month = new Array( ...

javascriptgroupingamcharts

Create proper spacing for string formatting within an AngularJS modal

I am working with a popup that displays output as one string with spaces and newline characters. Each line is concatenated to the previous line, allowing for individual adjustments. Test1 : Success : 200 Test2 : Su ...

javascriptangularjs

Removing data entry from MySQL database table using PDO

I'm facing an issue with deleting a row from my database. Despite trying various methods like PDO and MySQL, the data is not getting deleted, but it shows as if it has been deleted. Can someone please help me identify what might be wrong with my code? ...

phphtmlmysqlpdo

Do all descendants consistently trigger rerenders?

Recently, I was exploring the React new documentation here, where I came across this interesting piece of information: The context value mentioned here is a JavaScript object with two properties, one being a function. Whenever MyApp re-renders (for examp ...

javascriptreactjs

Leveraging numerous identifiers in jQuery

I created a small jQuery script to check if the input box value is greater than 5, but I have two tags with IDs and only one of them seems to be working. <div id="register"> <form id="register"> <input id="first" type="text" /> <a ...

javascriptjquery