hyprland-website/public/svg/hyprland.svg

<svg fill="none" viewBox="0 0 500 200" width="500" height="200" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
            @font-face {
                font-family: "LondonBetween";
                src: url("data:font/truetype;charset=utf-8;base64,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
            }

            contain {
                width: 100%;
                height: 100%;
                position: absolute;
                max-width: 100%;
                max-height: 100%;
                text-align: center;
            }

            h1 {
                color: white;
                font-family: "LondonBetween";
                font-size: 3rem;
                position: relative;
                top: 28%;
                left: 10%;
                transform: translateY(-50%);
                z-index=2;
                text-align: center;
               // text-shadow: 0 0 0.5rem #2222224d;
                background: linear-gradient(to right, #cfe8f6, #c8e6e3);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                animation: scaleit 4s infinite ease-in-out;
            }

            bgimg {
                position: absolute;
                left: -5%;
                top: 50%;
                -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%);
                z-index=1;
                background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAAAABAACAYAAADyoyQXAAAACXBIWXMAAB7CAAAewgFu0HU+AAAKeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTA3LTE2VDE4OjEwOjU1KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTA3LTE4VDE1OjIxOjExKzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0wNy0xOFQxNToyMToxMSswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZWQzY2FhYmUtOTliYS0wYjRiLWE1NjctN2U0MDM1NTcyM2U2IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OWI4OWE4MmEtY2U0NC1lNjQyLTkyYTEtYmMwZjVkMDViNTM5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NmZiZjQ0YWYtYmU2Yi1lZTRjLWE3ZTAtYTRjMjFiMDRhYjRiIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB0aWZmOk9yaWVudGF0aW9uPSIxIiB0aWZmOlhSZXNvbHV0aW9uPSIyMDAwMDAwLzEwMDAwIiB0aWZmOllSZXNvbHV0aW9uPSIyMDAwMDAwLzEwMDAwIiB0aWZmOlJlc29sdXRpb25Vbml0PSIyIiBleGlmOkNvbG9yU3BhY2U9IjY1NTM1IiBleGlmOlBpeGVsWERpbWVuc2lvbj0iNDA5NiIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjQwOTYiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjZmYmY0NGFmLWJlNmItZWU0Yy1hN2UwLWE0YzIxYjA0YWI0YiIgc3RFdnQ6d2hlbj0iMjAyMi0wNy0xNlQxODoxMDo1NSswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZTllYzlhMi1iNTM0LThmNGItYWY1OS1lNDJmYThiM2U1ODIiIHN0RXZ0OndoZW49IjIwMjItMDctMTZUMTg6MTE6MzIrMDI6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OWE4ZDA1M2EtMGY1MS1mMjQ1LThiNzQtMzU4YzQwZTNhNTQ3IiBzdEV2dDp3aGVuPSIyMDIyLTA3LTE4VDE1OjIxOjExKzAyOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iZGVyaXZlZCIgc3RFdnQ6cGFyYW1ldGVycz0iY29udmVydGVkIGZyb20gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCB0byBpbWFnZS9wbmciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVkM2NhYWJlLTk5YmEtMGI0Yi1hNTY3LTdlNDAzNTU3MjNlNiIgc3RFdnQ6d2hlbj0iMjAyMi0wNy0xOFQxNToyMToxMSswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5YThkMDUzYS0wZjUxLWYyNDUtOGI3NC0zNThjNDBlM2E1NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NmZiZjQ0YWYtYmU2Yi1lZTRjLWE3ZTAtYTRjMjFiMDRhYjRiIiBzdFJlZjpvcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NmZiZjQ0YWYtYmU2Yi1lZTRjLWE3ZTAtYTRjMjFiMDRhYjRiIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+74PgyQAFW+dJREFUeNrs3DENADAMwLCp/Dl3MJrDlkIjs7tPkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiTdNg8AAAAAAAAAAAAAAAAAAAA4ZwAAAAAAAAAAAAAAAAAAAAAAAQYAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAABBgAAAAAAAAAAAAAAAAAAAAAAABBgAAAAAAAAAAAAAAAAAAAAAQYAAAAAAAAAAAAAAAAAAAAAAAAQYAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAABBgAAAAAAAAAAAAAAAAAAAAAAABBgA
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                width: 60%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
            }

            @keyframes scaleit {
                0% {
                    transform: scale(110%);
                }
                50% {
                    transform: scale(100%);
                }
                100% {
                    transform: scale(110%);
                }
            }
            </style>
            <contain>
                <bgimg></bgimg>
            <h1>Hyprland</h1>
            </contain>
        </div>
    </foreignObject>
</svg>