liquidcarbon · July 10, 2024 16:44
diff --git a/rotating-not-quite-triangle.html b/rotating-not-quite-triangle.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Ball-and-Stick Triangle</title>
    <style>
        .triangle-container {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: rotate 5s linear infinite;
        }

        .stick {
            position: absolute;
            width: 4px;
            background-color: black;
        }

        .stick1 {
            height: 150px;
            top: 25px;
            left: 98px;
            transform: rotate(60deg);
            transform-origin: top left;
        }

        .stick2 {
            height: 150px;
            top: 25px;
            left: 102px;
            transform: rotate(-60deg);
            transform-origin: top right;
        }

        .stick3 {
            height: 174px;
            top: 25px;
            left: 25px;
            transform: rotate(0deg);
        }

        .ball {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
        }

        .ball1 {
            top: 20px;
            left: 90px;
        }

        .ball2 {
            bottom: 0;
            left: 0;
        }

        .ball3 {
            bottom: 0;
            right: 0;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
 </head>
 <body style="display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0;">

 <div class="triangle-container">
    <div class="stick stick1"></div>
    <div class="stick stick2"></div>
    <div class="stick stick3"></div>
    <div class="ball ball1"></div>
    <div class="ball ball2"></div>
    <div class="ball ball3"></div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Animated Ball-and-Stick Triangle</title>
	<style>
	.triangle-container {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: rotate 5s linear infinite;
	}

	.stick {
	position: absolute;
	width: 4px;
	background-color: black;
	}

	.stick1 {
	height: 150px;
	top: 25px;
	left: 98px;
	transform: rotate(60deg);
	transform-origin: top left;
	}

	.stick2 {
	height: 150px;
	top: 25px;
	left: 102px;
	transform: rotate(-60deg);
	transform-origin: top right;
	}

	.stick3 {
	height: 174px;
	top: 25px;
	left: 25px;
	transform: rotate(0deg);
	}

	.ball {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: red;
	border-radius: 50%;
	}

	.ball1 {
	top: 20px;
	left: 90px;
	}

	.ball2 {
	bottom: 0;
	left: 0;
	}

	.ball3 {
	bottom: 0;
	right: 0;
	}

	@keyframes rotate {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	</head>
	<body style="display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0;">

	<div class="triangle-container">
	<div class="stick stick1"></div>
	<div class="stick stick2"></div>
	<div class="stick stick3"></div>
	<div class="ball ball1"></div>
	<div class="ball ball2"></div>
	<div class="ball ball3"></div>
	</div>

	</body>
	</html>