ChrisMerinoDev - Hypnotic Loop (#2975)

ChrisMerinoDev · web-flow · commit 9c526fd30e0f · 2025-08-31T18:51:12.000+02:00
* New Art by ChrisMerinoDev - Hypnotic Loop

* Fixed Meta.json file indentation

* Fixed meta.json file indentation &amp; added all other files, ChrisMerinoDev - HypnoticLoop
diff --git a/Art/ChrisMerinoDev-HypnoticLoop/index.html b/Art/ChrisMerinoDev-HypnoticLoop/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Hypnotizing Loop</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="stage">
+    <div class="disc" aria-hidden="true"></div>
+  </div>
+
+  <div class="overlay">Hypnotizing Loop</div>
+</body>
+</html>
diff --git a/Art/ChrisMerinoDev-HypnoticLoop/meta.json b/Art/ChrisMerinoDev-HypnoticLoop/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "HypnoticLoop",
+    "githubHandle": "ChrisMerinoDev"
+}
diff --git a/Art/ChrisMerinoDev-HypnoticLoop/styles.css b/Art/ChrisMerinoDev-HypnoticLoop/styles.css
@@ -0,0 +1,71 @@
+:root{
+    --speed: 20s;       
+    --segment: 18deg;   
+    --bg: #000;         /* black */
+    --fg: #fff;         /* white */
+    --diameter: 220vmax;
+  }
+  
+  *{ box-sizing:border-box; }
+  
+  html, body{
+    height:100%;
+    margin:0;
+    background: var(--bg);
+    overflow:hidden;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  }
+  
+  .stage{
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+  }
+  
+  .disc{
+    position: absolute;
+    top:50%;
+    left:50%;
+    width: var(--diameter);
+    height: var(--diameter);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    background:
+      repeating-conic-gradient(
+        from 0deg,
+        var(--bg) 0 var(--segment),
+        var(--fg) var(--segment) calc(var(--segment) * 2)
+      );
+    animation: spin var(--speed) linear infinite;
+    will-change: transform;
+  }
+  
+  .overlay{
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    font-weight: bold;
+  
+    background: linear-gradient(90deg, black, white);
+    background-clip: text;
+    -webkit-background-clip: text;
+
+    color: white;
+    -webkit-text-fill-color: white;
+  
+    mix-blend-mode: difference;
+  
+    pointer-events: none;
+    font-size: 3rem; 
+  }
+  
+  @keyframes spin{
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+  }
+  
+  @media (prefers-reduced-motion: reduce){
+    .disc{ animation: none; }
+  }
+  

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +    "artName": "HypnoticLoop",
 +    "githubHandle": "ChrisMerinoDev"
 +}