Create a Circle Shape with Letters

[sample]

The component itself is very simple.
Using div tag and some span tags for letters.

DisplayCircle.js

import styles from "./DisplayCircle.module.css";

export const DisplayCircle = () => {
  return (
    <div className={styles.container}>
      <span className={`${styles.circle} ${styles.circle_1}`}>h</span>
      <span className={`${styles.circle} ${styles.circle_2}`}>e</span>
      <span className={`${styles.circle} ${styles.circle_3}`}>l</span>
      <span className={`${styles.circle} ${styles.circle_4}`}>l</span>
      <span className={`${styles.circle} ${styles.circle_5}`}>o</span>
      <span className={`${styles.circle} ${styles.circle_6}`}>w</span>
      <span className={`${styles.circle} ${styles.circle_7}`}>o</span>
      <span className={`${styles.circle} ${styles.circle_8}`}>r</span>
      <span className={`${styles.circle} ${styles.circle_9}`}>l</span>
      <span className={`${styles.circle} ${styles.circle_10}`}>d</span>
      <span className={`${styles.circle} ${styles.circle_11}`}>!</span>
      <span className={`${styles.circle} ${styles.circle_12}`}>🌎</span>
    </div>
  );
};

For this component, the main part would be css.
The point is to calculate the degree for each letter.
In this case, I use 12 letters so each degree should be 30 deg (360 / 12 = 30) and start from 0 deg.

DisplayCircle.module.css

.container {
  position: relative;
  width: 300px;
  height: 300px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  transform: rotate(-80deg);
}

.circle {
  position: absolute;
  top: 0;
  left: calc(50% - 15px);
  display: inline-block;
  width: 30px;
  height: 150px;
  transform-origin: center bottom;
}

.circle_1 {
  color: red;
  transform: rotate(0deg);
}

.circle_2 {
  transform: rotate(30deg);
}

.circle_3 {
  transform: rotate(60deg);
}

.circle_4 {
  transform: rotate(90deg);
}

.circle_5 {
  transform: rotate(120deg);
}

.circle_6 {
  transform: rotate(150deg);
}

.circle_7 {
  transform: rotate(180deg);
}

.circle_8 {
  transform: rotate(210deg);
}

.circle_9 {
  transform: rotate(240deg);
}

.circle_10 {
  transform: rotate(270deg);
}

.circle_11 {
  transform: rotate(300deg);
}

.circle_12 {
  transform: rotate(330deg);
}

If you want to display a different text message, what you will need to do is to add letters to the component and calculate the degree and modify css.

Codesandbox is here
https://codesandbox.io/s/festive-shirley-90u8m?file=/components/DisplayCircle/DisplayCircle.module.css:0-856

Comments

[Martin Omander]

Excellent article! If you like functionality like this packaged up in a library, consider using circletype.labwire.ca/. I'm not the author, but I've had good luck with it in one of my web apps.

[0xkoji]

@momander
Thank you for sharing!
CircleType.js would be easier than using CSS!