JSFiddle - React, Tailwind, and code Playground

by itbeard

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Ball in Rotating Square</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: sans-serif;
        }

        /* The container that holds the square */
        #stage {
            position: relative;
            width: 400px;
            height: 400px;
        }

        /* The rotating square wrapper */
        #square-container {
            width: 100%;
            height: 100%;
            position: absolute;
            /* This rotates the visual element */
            transform-origin: center center; 
        }

        /* The SVG Canvas where ball and walls live (stays flat) */
        #gameCanvas {
            width: 400px;
            height: 400px;
            background-color: transparent; /* Transparent so we see the HTML square behind/through it if needed */
        }

        .info {
            position: absolute;
            top: 20px;
            color: #888;
            z-index: -1;
        }
    </style>
</head>
<body>

    <div class="info">Rotating Square with Bouncing Ball</div>

    <!-- The Visual Wrapper for the Rotation -->
    <div id="stage">
        <div id="square-container">
            <!-- We put an SVG here. This is our "Canvas" that rotates visually but has axis-aligned logic internally -->
            <svg id="gameCanvas" viewBox="0 0 400 400">
                <!-- The Walls (The Boundary) -->
                <!-- We use a rect with rx/ry to make rounded corners. This prevents the ball from getting stuck on sharp edges during rotation calculations -->
               ...