This content originally appeared on DEV Community and was authored by prakasha
Building a spin Wheel was in my to-do list for a very long time; finally, finally i was able to spend time on this.
Step 1: Calculate segmentAngle
Let's assume we want to show 6 items in the wheel. const itemsCount = 6;
Divide the size of the wheel by the number of items => 360/6.
const segmentAngle = 360 / itemsCount;
Step 2: Identifying Radian & width from segmentAngle
You might be thinking, why do we need to identify radians 🧐?
I too had the same question. To find the exact width, we had to identify Radian.
Before even looking into this solution, i had used a random value as 45% 😂
Formula 1: radians = degrees * (π/180);
Formula 1: SegmentWidth = 2*radiusOfWheel*sin(segmentAngle)/2);
ref: Formula based on the central angle 🙏🏽
// Assume circle diameter is 300px
const radians = segmentAngle * (3.14 / 180); // 1.0466666666666669
const segmentWidth = 2 * 150 * Math.sin(1.0466666666666669 / 2); // 149.93103079293073
Step 3: Set Height for segment
Wondering why it cannot be 100%, because if you do, then the UI breaks. 😹
We had to adjust the height of each segment to fit correctly inside the circle.
To make it look like a pizza slice, adjust height = 50% and transformY to 50%
This is how it will look like now.
Step 4: Implementing random rotation
Take a random number and multiply it by the segmentAngle to get a random rotation.
And add 5 spins to it.
const randomSpin = Math.floor(Math.random() * itemsCount) * segmentAngle;
const totalRotation = rotation + (360 * 5) + randomSpin; // 5 full rotations
Below is my final result!
This content originally appeared on DEV Community and was authored by prakasha
prakasha | Sciencx (2025-02-09T20:51:54+00:00) Building a Spin Wheel in React. Retrieved from https://www.scien.cx/2025/02/09/building-a-spin-wheel-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.