I have attached the code. Would like to know if there was a way to level the text, that is make it flat/horizontal in spite of it being around the circle? Kind of like its done here - replacing the images with text will illustrate this.

I tweaked the code a bit as I needed the wifi signals to be pointing outwards and so the the text seems to also be shaped accordingly. I considered perhaps trying to find the angle at which all elements around the circle would be horizontal but am unsure how to go about doing this. Does anyone know how to make the texts flat regardless of how many elements are around the circle?

CodePudding user response：

Yes basically reverse the container rotation on the text. Also turn -45deg because it was added in the first place.

Change this in your .text classes

&:nth-of-type(#{$i}) .text {
  transform: rotate(-$rot * 1deg - 45deg);
}