Text effect - text on a circular (spiral) path

I had an idea and set myself a challenge to create text which flows “typewriter” style - but on a circular or spiral path.

I did it - by using quite a complex mixture of an HTML animation from Codepen (which I PM’ed Elusien about, who kindly adapted it for me), and a clever AutoHotkey script (provided my by a person on the AutoHotKey forum) which automates the mouse positions and draws a perfect spiral on screen. I’ve just uploaded the Demo I made today to Youtube. I’ve written a more detailed description of how I did it in the description below the video on Youtube.

The effect probably isn’t very useful practically but it was great fun to do and I achieved my challenge! :smile:

11 Likes

GREAT!

Best regards

Hello,

This song written by a french guy doesn’t talk about spiral in the original lyrics… But it’s really fun to watch the writing of the text in this way! :slight_smile: As you said, the effect probably isn’t very useful practically but it is the beauty of the thing, I like it.

Glad to see you got the spiral working. Here is a simple HTM fileL which has the effect of Text written on an arc of a circle, Then rotated. It is fairly simple to follow. Basically there are two parameters: --start = degrees at which the text starts, --end = degrees at which the text ends.

<!DOCTYPE html>
<html>
<head>
  <title>Text on an Arc plus Rotation</title>
  <style>
body {
  background      : black;
  color           : white;
  text-shadow     : -0 0 1px black;
  font-size       : 8vh;
  font-weight     : bold;
  font-family     : monospace;
}

.container {
  overflow        : hidden;
  display         : flex;        /* Use 'flex' to centre on the screen */
  flex-direction  : row;
  justify-content : center;      /* Centre text  vertically  inside the logo */
  align-items     : center;      /* Centre text horizontally inside the logo */
  margin          : 0;
  width           : 100%;
  height          : 100%;
}

div.circleText {
  transform       : translateX(50%);
  width           : 800px;
  height          : 800px;
  --start         :   -90;        /* Start of the arc (in degrees) */
  --end           :   270;        /*  End  of the arc (in degrees) */
  
}

.container { animation: rotate 5s linear 2s; }

@keyframes rotate {
    0% {transform: rotateZ(  0deg);}
  100% {transform: rotateZ(360deg);}
}
</style>
</head>
<body>
  <div class="container">
    <div class="circleText">
S.A. NATIONAL AERONAUTICS AND SPACE ADMINISTRATION U.
    </div>
  </div>
<script>
  var circleText = document.getElementsByClassName("circleText")[0];
  var       text = circleText.innerText.split('');
  circleText.innerText = '';
  var      style = getComputedStyle(circleText);
  var      start = +style.getPropertyValue('--start');
  var        end = +style.getPropertyValue('--end');
  var     radius = 0.5 * parseInt(style.width);
  var  arcintval = (end - start) / text.length;
  var     origin;
  for (let i = 0; i < text.length; i++) {
    origin                = 90 - start + (i * arcintval);
    circleText.innerHTML += `<div style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${text[i]}</div>`;
  }
</script>
</body>

Please feel free to use it. To see the effect just copy the code into an HTML file and run it in a browser window.

This is exactly what the challenges are all about. - The wonderful result afterwards! :smiley:

I guess that for the spiral a mathematical function (sin, cos) was used to plot the individual letters?

For my effect each character is in its own <div> each of which is rotated by an amount equal to the number of degrees of arc divided by the number of characters multiplied by the index of the character in the string. It is easier to see this here:

Oh, only a picture…
But the picture literally cries out for a video, isn’t it?! :smile:

Best regards

Happy to oblige.

2 Likes

This is with Chroma?! Wow, looks very well.
I have always some issues with Chroma…
Howsoever, to be honest, I thought more in direction of fan out the single parts…, I think I will keep it in my mind… :slight_smile:

Best regards

Awesome! Just a little thing, we usually read from left to right and from top to bottom, wouldn’t it be better if the rotation was counter clock wise instead of clock wise (I’m not English native, I’m not sure of the words)?

The NASA seal is as shown (apart from the fact that “U.S.A” should be the correct way up, not upside down. Whether it rotates clockwise or counter-clockwise I suppose is a matter of preference. I tend to favour clockwise, but others may prefer the opposite. It is easy to change in the CSS; rather than:

  100% {transform: rotateZ(360deg);}

you would have:

  100% {transform: rotateZ(-360deg);}

I used Chroma key, but if WebVfx was not being discontinued I would make it into a proper Text:HTML filter, like the “sniperscope” filter I did a couple of years ago. I’d also be tempted to do “Text on a Bezier Curve” the you could have more or less any shape you wanted.

1 Like

Cool effect, @elusien! I just made another demo replacing the easing “linear” in your code with a cubic-bezier animation to make the circle begin slower and end slower. (I could have just written “ease” but the circle accelerated too fast, I thought). Then in a second example I applied a different cubic-bezier code to get the circle to reverse anticlockwise slightly before continuing clockwise, then reversing slightly at the end! Both animations are in this demo -

https://streamable.com/ih3iez

I got the animations from the site cubic-bezier.com -

Here’s the 2 cubic-bezier codes I used (I copied the code from the site):

Your “text on a Bezier curve” sounds a great idea.

2 Likes

I think it was Michel Legrand wrote/performed it. There are other versions by Dusty Springfield and Barbra Streisand.

Impressive!