[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
Top comments (2)
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.
@momander
Thank you for sharing!
CircleType.js would be easier than using CSS!