Decorate your SpaceHey logo with any image/pride flag you want!

Tags: pride, twilight, logo, gradient, background

Description:

CURRENTLY BROKEN, SORRY

I've updated it so that if static.spacehey.net gets CORS it'll work, but I don't know if that's happening.

Ever wanted to give the SpaceHey logo a certain gradient but haven't been able to?

Or perhaps you wanna put a pattern image under it?

Don't want to bother with image editing just to see how it'd look? Here you go!

(This may not work on some browsers — mask is still an experimental CSS property! Check https://caniuse.com/css-masks for more info. This has been tested on latest desktop Chrome and latest desktop Firefox. If your browser doesn't support it, it should gracefully failback to the original logo.)

By default, this will put the SpaceHey logo in trans flag colors.

You can either replace the "background:" rule with background: url([your image you want to use]), or replace it with one of these for more pride flags!

(Please leave the credit comment in the style tag in when you use it!)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Twilight Sparkle (https://layouts.spacehey.com/layout?id=1805) -->

<style>
/* Logo modifier by Twilight Sparkle! https://layouts.spacehey.com/layout?id=1805 */
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  .top > .left > a > .logo {
    display: none;
  }
  .top .left a {
    background: linear-gradient(180deg, #5BCEFA 20%, #F5A9B8 20%, 40%, #FFFFFF 40%, 60%, #F5A9B8 60%, 80%, #5BCEFA 80%);
    background-size: cover;
    mask: url("https://static.spacehey.net/img/logo.svg") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("https://static.spacehey.net/img/logo.svg") no-repeat center;
    -webkit-mask-size: contain;
    height: 42px;
    width: 165px;
    display: inline-block;
  }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 44 comments ( View all | Add Comment )

x_nd3rrr	1713925846 IM GONNA TRY FIGURING OUT HOW TO USE DIS!!! YIPEE!! SO PROBABLY USING!!! Report Comment
⌗ Mike Alexander !! 💫⃟	1713491629 USANDOO! Report Comment
Robyn :3	1713139594 usign :3 Report Comment
explosivecupcakes	1713077119 Probably using!! Report Comment
Midori	1713007071 usingg ^_^ Report Comment
benny ☆⋆｡𖦹°‧★	1712651284 using ty ^_^ !! Report Comment
LILITHHH!	1712091768 USINGGGGGGG AAAAHHHHH Report Comment
T_suki67	1712067713 using LOL Report Comment bro how many times did u use ;-; by 𝐗𝐚𝐧𝐭𝐡𝐞ᡣ𐭩; 1712509085; Report
T_suki67	1712067713 using LOL Report Comment
T_suki67	1712067711 using LOL Report Comment
T_suki67	1712067711 using LOL Report Comment
enzo wnzo	1711664890 USINGFGG Report Comment
skyler	1711137795 im gonna use this but idk how to tag 3: Report Comment
Nora	1709807272 Usinggg Report Comment
mintytails	1709005455 im gonna pretend that i understood how to do that Report Comment
medkitguy	1708799110 nvm.. Report Comment
medkitguy	1708798854 using Report Comment
H3arts4Gb3	1708214961 using probs Report Comment
sweetheart!	1708135299 using ^^ Report Comment