How do I change this text to be shaped like a circle?

Question

As the title says, I want this text: 'English.Math.Science.HSIE.Agriculture.PDHPE.IST.Photography' to be turned into a circle shape instead of being a straight line. What code is required for this?

This is the code I have right now

#rotatingtext{
    position: absolute;
    top: 1800px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    font-weight: nold;
    animation: rotatingtext 20s infinite linear;
}

@keyframes rotatingtext{
    0% {
        transform: translateY(0) rotate(0deg);
        
    }
    100% {
        transform: translateY(0) rotate(360deg);

    }
}

<div id="rotatingtext">English.Math.Science.HSIE.Agriculture.PDHPE.IST.Photography</div>

score 0 · Answer 1 · answered Apr 13 '21 at 04:41

You can try this Thanks >>>!

const degreeToRadian = angle => {
    return angle * (Math.PI / 180);
}

const pointOnCircle = (radius, angle = 0) => {
    const xPos = radius * Math.cos(degreeToRadian(angle));
    const yPos = radius * Math.sin(degreeToRadian(angle));
    return {
        x: xPos,
        y: yPos
    }
}

const radius = 200;
const diameter = radius * 2;

const circle = document.querySelector('#circular-text');

circle.style.width = `${diameter}px`;
circle.style.height = `${diameter}px`;

const text = circle.innerText;
const characters = text.split('');
circle.innerText = null;

const startAngle = -90;
const endAngle = 270;
const angleRange = endAngle - startAngle;

const deltaAngle = angleRange / characters.length;
let currentAngle = startAngle;

characters.forEach((char, index) => {
    const charElement = document.createElement('span');
    charElement.innerText = char;
    circle.appendChild(charElement);

    let { x: xPos, y: yPos } = pointOnCircle(radius, currentAngle);
    
    /**
     * Move center of drawn circle to 
     * match parents center.
     */
    xPos += radius;
    yPos += radius;

    const translate = `translate(${xPos}px, ${yPos}px)`;
    const rotate = `rotate(${index * deltaAngle}deg)`;

    charElement.style.transform = `${translate} ${rotate}`;

    currentAngle += deltaAngle;
});

@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap");

body {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Anonymous Pro", "Monospace";
  font-size: 30px;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
#circular-text {
  position: relative;
  background: #fff;
  color: #000;
  border-radius: 100%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

#circular-text span {
  position: absolute;
  transform-origin: top left;
}

<div id='circular-text'>Keep calm and stay put.</div>

Masoud Keshavarz · Accepted Answer · 2021-04-13T06:56:19.780

You could use Text SVG

<svg viewBox="0 0 1000 500">
  <defs>
    <path id="CircularPath"
          d="M 200, 200
             m -150, 0
             a 150,150 0 1,0 300,0
             a 150,150 0 1,0 -300,0" />
  </defs>

  <use href="#CircularPath" fill="none" />
  <text font-family="Verdana" font-size="29.5" fill="blue" >
    <textPath href="#CircularPath">
      English.Math.Science.HSIE.Agriculture.PDHPE.IST.Photography
    </textPath>
  </text>

</svg>

According to this answer you can change the x, y and the r of the CircularPath with the following formula:

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

You can determine whether text be inside or outside of the circle using side attribute but unfortunately side is not widely supported by a lot of browsers.

How do I change this text to be shaped like a circle?

2 Answers2