JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="circle-container" id="draggable-circle">
        <div class="center-circle">Hover Me</div>
        <div class="petal" style="--angle: 0deg;">Petal 1</div>
        <div class="petal" style="--angle: 60deg;">Petal 2</div>
        <div class="petal" style="--angle: 120deg;">Petal 3</div>
        <div class="petal" style="--angle: 180deg;">Petal 4</div>
        <div class="petal" style="--angle: 240deg;">Petal 5</div>
        <div class="petal" style="--angle: 300deg;">Petal 6</div>
    </div>

CSS

/* General body styling */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

/* Container for the circle and petals */
.circle-container {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    cursor: pointer;
}

/* Center circle styling */
.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-align: center;
    z-index: 2;
}

/* Petal styling */
.petal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle)) translate(150px) rotate(calc(-1 * var(--angle)));
    transform-origin: 0 0;
    background-color: #ff6347;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Show petals on hover */
.circle-container:hover .petal {
    opacity: 1;
}

JavaScript

// Get the circle element
const draggableCircle = document.getElementById('draggable-circle');

// Variables to store initial positions
let isDragging = false;
let startX, startY, initialX, initialY;

// Mouse down event to start dragging
draggableCircle.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
    initialX = draggableCircle.offsetLeft;
    initialY = draggableCircle.offsetTop;
    draggableCircle.style.cursor = 'grabbing';
});

// Mouse move event to move the circle
document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const currentX = e.clientX;
        const currentY = e.clientY;
        const dx = currentX - startX;
        const dy = currentY - startY;

        draggableCircle.style.left = `${initialX + dx}px`;
        draggableCircle.style.top = `${initialY + dy}px`;
    }
});

// Mouse up event to stop dragging
document.addEventListener('mouseup', () => {
    isDragging = false;
    draggableCircle.style.cursor = 'pointer';
});