Text effect - text on a circular (spiral) path

Made with Shotcut
4

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.

1 Like