Created
April 18, 2021 22:34
-
-
Save featheredtoast/f1bab8f674488637e8db66c6c828a803 to your computer and use it in GitHub Desktop.
animation logo
This file contains 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
| <html> | |
| <head> | |
| <style> | |
| :root { | |
| --base-color: #f06721; | |
| --highlight-color: #e8976f; | |
| } | |
| #luz-logo{ | |
| fill: var(--base-color); | |
| } | |
| #fadeout * { | |
| animation: illuminateOut 1s linear forwards infinite; | |
| } | |
| @keyframes illuminateOut { | |
| from { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| to { | |
| opacity: 0; | |
| transform: translate(var(--x), var(--y)); | |
| } | |
| } | |
| #fadein * { | |
| opacity: 0; | |
| animation: illuminateIn 1s linear forwards infinite; | |
| } | |
| @keyframes illuminateIn { | |
| from { | |
| opacity: 0; | |
| transform: translate(0,0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translate(var(--x), var(--y)); | |
| } | |
| } | |
| #center, #base * { | |
| animation: pulse 1s linear forwards infinite; | |
| animation-delay: var(--delay); | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| r: 25; | |
| height: 50px; | |
| fill: var(--base-color); | |
| } | |
| 50%, 70% { | |
| r: 35; | |
| fill: var(--highlight-color); | |
| } | |
| 70%, 100% { | |
| r: 25; | |
| fill: var(--base-color); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="250" height="450" viewBox="-100 0 450 650" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <g id="luz-logo"> | |
| <g id="fadein" > | |
| <rect style="--y:-75px; --x:0%;" id="top-square-replace" y="75" width="50" height="50" /> | |
| <path style="--y:0%; --x:75px;" id="mid-square-replace" d="M167 250V200H117V250H167Z" /> | |
| <path style="--y:75px; --x:0%;" id="bottom-square-replace" d="M0 375H50L50 325H0L0 375Z" /> | |
| <path style="--y:-50px; --x:50px;" id="top-corner-square-replace" d="M161.715 138.385L126.36 103.03L91.0047 138.385L126.36 173.741L161.715 138.385Z" /> | |
| <path style="--y:50px; --x:50px;" id="bottom-corner-square-replace" d="M126.355 346.715L161.71 311.36L126.355 276.005L90.9993 311.36L126.355 346.715Z" /> | |
| </g> | |
| <g id="fadeout" > | |
| <rect style="--y:-75px; --x:0%;" id="top-square" width="50" height="50" /> | |
| <path style="--y:0%; --x:75px;" id="mid-square" d="M242 250V200H192V250H242Z" /> | |
| <path style="--y:75px; --x:0%;" id="bottom-square" d="M0 450H50L50 400H0L0 450Z" /> | |
| <path style="--y:-50px; --x:50px;" id="top-corner-square" d="M214.744 85.3553L179.388 50L144.033 85.3553L179.388 125.711L214.744 85.3553Z" /> | |
| <path style="--y:50px; --x:50px;" id="bottom-corner-square" d="M179.388 399.744L214.744 364.388L179.388 329.033L144.033 364.388L179.388 399.744Z" /> | |
| </g> | |
| <circle id="center" cx="25" cy="225" r="25"/> | |
| <g id="base" style="--delay: 0.5s;" > | |
| <path id="top-base" d="M0 75H50V103.558C50 130.212 0 134.02 0 103.558V75Z" /> | |
| <path id="mid-base" d="M167 200V250H138.442C111.788 250 107.98 200 138.442 200H167Z" /> | |
| <path id="bottom-base" d="M50 375H0V346.442C0 319.788 50 315.98 50 346.442V375Z" /> | |
| <path id="top-corner-base" d="M126.355 103.033L161.711 138.388L141.517 158.582C122.67 177.429 84.6219 144.766 106.162 123.227L126.355 103.033Z" /> | |
| <path id="bottom-corner-base" d="M161.711 311.355L126.355 346.711L106.162 326.517C87.3146 307.67 119.977 269.622 141.517 291.162L161.711 311.355Z" /> | |
| </g> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment