back to code snippets home

Use this canvas to add a spinning circle text to a website

04.

To customise speed, size, font, and direction within the css code, go at the Advanced Settings of the page and edit the CSS code accordingly, for example:

Speed:
for faster spinning:
animation: spin 6s linear infinite;

for slower spinning:
animation: spin 20s linear infinite;

Reverse direction:
animation: spin 12s linear infinite reverse;

Text size:
font-size: 14px;

add the code below:

<svg class="circle-rotation" viewBox="0 0 200 200">
<defs>
<path id="circlePath" d="M 100, 100
m -75, 0
a 75,75 0 1,1 150,0
a 75,75 0 1,1 -150,0"></path>
</defs>

<text>
<textPath href="#circlePath">
your spinning text goes here • your spinning text goes here •
</textPath>
</text>
</svg>

1

(2) navigate to the Advanced Settings (by clicking at the page title) and open the Page Loaded CSS code panel and add the below code:

Instructions on Desktop :)

.circle-rotation {
width: 200px;
height: 200px;
animation: spin 16s linear infinite;
}

.circle-rotation text {
font-family: serif; /* change to your brand font */
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
fill: currentColor;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

For every page that is going to use the Spinning Circular Text you need to have an embed code and a string of code in the Page Loaded CSS code panel. This is already pre-loaded for you on the Spinning Circular Text, but if you try to add this to any other page, you will need to copy that code over to the new page.

To access this area, you will need to:

(1) add the Embed code box

03.

To edit the text of the circle, just double click the circular text. This will bring up your EDIT HTML popup so you can type in the text you would like.

Instructions for your new

Spinning Circular Text

01.

In your current design you want to add your counter to, go to the PAGE you would like to add your new canvas. Click the page title in the left sidebar and from the ••• settings menu click Add From Library. Go to My Library and locate the Code snippets by YGrec Studio, select the Spinning Circular Text page and canvas, Apply My Fonts and Colors and ADD.

02.

The animation works on mobile automatically!

Congrats! Your Spinning Circular Text should be setup. 🎉

----------

LICENSE / USAGE

You may use this code:
On unlimited personal or client projects
As part of websites you design

You may not:
Resell or redistribute the code as-is
Claim the code as your own creation