Make bean

2025-02-27 16:28:04 -07:00 · 2025-02-27 16:28:04 -07:00 · 1f6e47ba98
commit 1f6e47ba98
parent 22b9601d13
3 changed files with 88 additions and 0 deletions
--- a/bean.svg
+++ b/bean.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="bean">
+  <path fill="#d82e42" d="M30.051 17.139c2.309 3.88-.08 8.36-2.008 10.29-3.408 3.41-12.311 6.8-21.284-2.17S1.183 7.369 4.59 3.959c1.929-1.93 6.4-4.32 10.283-2.01 4.216 2.51 2.228 6.06 5.675 9.51s6.995 1.46 9.503 5.68Z"></path>
+  <path fill="#252525" d="M18.98 32.023c-3.949 0-8.476-1.607-12.927-6.056-9.118-9.134-6.292-18.588-2.17-22.715 2.27-2.271 7.206-4.719 11.5-2.162 2.635 1.569 3.174 3.527 3.7 5.42a8.452 8.452 0 0 0 2.175 4.242 8.448 8.448 0 0 0 4.239 2.177c1.892.522 3.849 1.062 5.416 3.7 2.557 4.3.109 9.238-2.161 11.509a14 14 0 0 1-9.772 3.885ZM11.4 2.012a9.328 9.328 0 0 0-6.1 2.654C2.836 7.129-1.569 15.5 7.466 24.553s17.41 4.63 19.87 2.17c1.758-1.76 3.816-5.778 1.856-9.072-1.156-1.946-2.512-2.321-4.229-2.794a10.346 10.346 0 0 1-5.121-2.691 10.363 10.363 0 0 1-2.689-5.125c-.473-1.718-.847-3.075-2.791-4.232a5.7 5.7 0 0 0-2.962-.797Z"></path>
+  <path fill="#252525" d="M21.008 19a8.559 8.559 0 0 1-5.6-2.393A8.57 8.57 0 0 1 13.014 11a1 1 0 1 1 2 0 6.636 6.636 0 0 0 1.806 4.193A6.628 6.628 0 0 0 21.012 17a1 1 0 0 1 0 2Z"></path>
+</svg>
--- a/index.html
+++ b/index.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Centered Bean</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="centered">
+        <img id="bean" src="bean.svg" alt="Bean" onclick="explodeBeans()">
+    </div>
+    <script>
+        function explodeBeans() {
+            const container = document.querySelector('.centered');
+            for (let i = 0; i < 10; i++) {
+                const newBean = document.createElement('img');
+                newBean.src = 'bean.svg';
+                newBean.style.position = 'absolute';
+                newBean.style.width = '50px';
+                newBean.style.height = '50px';
+                newBean.style.transition = 'transform 1s ease-out, opacity 1s ease-out';
+                newBean.style.opacity = '0';
+
+                // Initial position at the center
+                newBean.style.transform = 'translate(0, 0) scale(0.5)';
+
+                container.appendChild(newBean);
+
+                // Random position around the original bean
+                const angle = Math.random() * 2 * Math.PI;
+                const distance = Math.random() * 100 + 50;
+
+                // Trigger the animation
+                setTimeout(() => {
+                    newBean.style.opacity = '1';
+                    newBean.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(1)`;
+                }, 0);
+
+                // Remove the bean after animation
+                setTimeout(() => {
+                    newBean.style.opacity = '0';
+                    setTimeout(() => {
+                        container.removeChild(newBean);
+                    }, 1000);
+                }, 1000);
+            }
+        }
+    </script>
+</body>
+</html>
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,32 @@
+body, html {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+html {
+    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Modern gradient background */
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+#bean {
+    width: 150px;
+    height: 150px;
+    transition: transform 0.3s ease;
+}
+
+#bean:hover {
+    transform: scale(1.1); /* Slightly enlarge the bean on hover */
+}