A Pen by anon987654321 on CodePen.
Created
November 5, 2024 05:29
-
-
Save anon987654321/469a644b80ab231741d2252aa79f60b1 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wardrobot Logo</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #fff; | |
| margin: 0; | |
| } | |
| .fractal-logo { | |
| font-family: 'Cooper Black', serif; | |
| font-size: 80px; | |
| color: transparent; | |
| background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg fill="%23ff00ff"%3E%3Ccircle cx="50" cy="50" r="40" /%3E%3Ccircle cx="50" cy="50" r="30" fill="%2300ffff" /%3E%3Ccircle cx="50" cy="50" r="20" fill="%23ff0000" /%3E%3Cpolygon points="50,10 75,50 50,90 25,50" fill="%2300ff00" /%3E%3Cpolygon points="50,20 65,50 50,80 35,50" fill="%23ffff00" /%3E%3C/g%3E%3C/svg%3E') center / cover; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| -webkit-text-stroke: 3px #eee; /* Corrected solid 3px outline */ | |
| padding: 10px; | |
| position: relative; | |
| } | |
| .fractal-logo::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: inherit; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| animation: fractalRotate 40s infinite linear, fractalMove 10s ease-in-out infinite; | |
| z-index: -1; | |
| } | |
| /* Smooth movement of fractal pattern */ | |
| @keyframes fractalMove { | |
| 0% { background-position: 0% 0%; } | |
| 50% { background-position: 100% 100%; } | |
| 100% { background-position: 0% 0%; } | |
| } | |
| /* Slow rotation of fractal pattern */ | |
| @keyframes fractalRotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Responsive font size */ | |
| @media (max-width: 768px) { | |
| .fractal-logo { | |
| font-size: 50px; | |
| -webkit-text-stroke-width: 2px; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .fractal-logo { | |
| font-size: 90px; | |
| -webkit-text-stroke-width: 4px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="fractal-logo"> | |
| Wardrobot | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment