Circles

by ckissi

HTML

<div class="circle-container" id="circle-container">
        <!-- Center image -->
        <img src="https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:5htjlplvb63k7nhsrltadcfh/bafkreidc5u2ffv4n4cojsgy5zcrr3d2g2rcsntihf3xxrxle4bcqdig6he@jpeg" alt="Center Image" class="center-image">
    </div>

CSS

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .circle-container {
            position: relative;
            width: 700px;
            height: 700px;
        }
        .circle-container img {
            position: absolute;
            border-radius: 50%;
            object-fit: cover;
        }
        .center-image {
            width: 100px; /* Adjust center image size */
            height: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Keep the center image above others */
            border: 2px solid #ddd;
        }
        .circle-image {
            transform-origin: center;
        }

JavaScript

const centerImage = "https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:5htjlplvb63k7nhsrltadcfh/bafkreidc5u2ffv4n4cojsgy5zcrr3d2g2rcsntihf3xxrxle4bcqdig6he@jpeg";

        const innerCircleImages = [
            "https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:w5jbtqdckfcsulvb2mw7n2qt/bafkreiemxkuywwnxvks63s52d6qk6ngcqjjebcdz3oueqocr4y63hka47y@jpeg", "inner2.jpg", "inner3.jpg", "inner4.jpg",
            "inner5.jpg", "inner6.jpg", "inner7.jpg", "inner8.jpg"
        ];

        const middleCircleImages = [
            "middle1.jpg", "middle2.jpg", "middle3.jpg", "middle4.jpg",
            "middle5.jpg", "middle6.jpg", "middle7.jpg", "middle8.jpg",
            "middle9.jpg", "middle10.jpg", "middle11.jpg", "middle12.jpg",
            "middle13.jpg", "middle14.jpg", "middle15.jpg"
        ];

        const outerCircleImages = [
            "outer1.jpg", "outer2.jpg", "outer3.jpg", "outer4.jpg", "outer5.jpg",
            "outer6.jpg", "outer7.jpg", "outer8.jpg", "outer9.jpg", "outer10.jpg",
            "outer11.jpg", "outer12.jpg", "outer13.jpg", "outer14.jpg", "outer15.jpg",
            "outer16.jpg", "outer17.jpg", "outer18.jpg", "outer19.jpg", "outer20.jpg",
            "outer21.jpg", "outer22.jpg", "outer23.jpg", "outer24.jpg", "outer25.jpg",
            "outer26.jpg"
        ];

        // Array of circle configurations
        const imageGroups = [
            { images: innerCircleImages, radius: 150, size: 50 },  // Inner circle
            { images: middleCircleImages, radius: 250, size: 40 }, // Middle circle
            { images: outerCircleImages, radius: 350, size: 30 }   // Outer circle
        ];

        const container = document.getElementById("circle-container");

        // Add images for each circle
        imageGroups.forEach(group => {
            const { images, radius, size } = group;

            images.forEach((src, index) => {
                const angle = (360 / images.length) * index; // Evenly space the images
             ...