Pride Logos

This component has been posted to the main wiki site on the last day of Pridefest 2024.

The sandbox page is reserved for potential future uses related to LGBTQ+ contents. Don't use this component of sandbox version since it might become out of maintenance or missing resources at any time.

To use the final released version, →See here←

GENDER REVEAL BOX

💛🤍💜🖤

Even if you out yourself as nonbinary, some ppl still struggles to find your "real gender". Man I have chosen to be honest with you bc my real gender IS nonbinary.
We are not Schrodinger's-Cat boxes yet to be open and the quantum state collapses when opened to give you a satisfying absolute boy/girl answer!!

—]

THE PRIDE NEVER ENDS

— Inspired by the Pride Highlighter and the Trans Pride Theme —

🌈To use this component, please read the instruction below and insert the corresponding code into the source code of your page.

---

For Sigma-10 themes:

Sigma-10 is the current default site theme on the English wiki. It's an updated version of Sigma-9.

[[include :scp-wiki:component:pride-logos s10=-]
|code=input the code
]]

The "code" is a short name for pride flags, and can be found below in the table. Example:

[[include :scp-wiki:component:pride-logos s10=-]
|code=trans
]]

---

For Sigma-9 themes:

Sigma-9 is the former default site theme. Some other language branches, sister sites, and sandboxes may still use it as default.

[[include :scp-wiki:component:pride-logos s9=-]
|code=input the code
]]

---

For Black Highlighter themes:

[[include :scp-wiki:component:pride-logos bhl=-]
|code=input the code
]]

---

For Bedrock themes: (Experimental)

Bedrock-based themes include the well-known Basalt, and some aesthetic themes.

[[include :scp-wiki:component:pride-logos bedrock=-]
|code=input the code
]]

You need to place this code after the theme's include.

+ Combine Different Logos, Use Custom Logos, and More

🌈Combine Two Logos

You can fuse/join two logos together, one half on the left side, another half on the right side by introducing a code2 attribute:

[[include :scp-wiki:component:pride-logos s10=-]
|code=code for the left half
|code2=code for the right half
]]

Example:

[[include :scp-wiki:component:pride-logos s10=-]
|code= nonbinary
|code2= pan
]]

This will put together the nonbinary flag and pan pride flag to make a whole logo, and might be useful for those who hope to display two identities.

Vertical

If you think it looks better to join the two halves by a different angle, just add the angle attribute to change the division to non-vertical:

[[include :scp-wiki:component:pride-logos s10=-]
|code=code for the first logo
|code2=code for the second logo
|angle=The tilt angle of the seam, 0-360
]]

At 0° it will be combined horizontally. The default angle is vertical (90°). The tilt angle starts from the left (negative x-axis) then rotates clockwise.

E.g. this will change the join angle to 60°：

[[include :scp-wiki:component:pride-logos s10=-]
|code=nonbinary
|code2=pan
|angle=60
]]

Tilted

---

🌈Combine Three Logos (Experimental)

If you want to combine 3 different flags in one logo, it will be displayed as a parallel collage.

The angle attribute still apply. You can specify the third logo by code3.

Example:

[[include :scp-wiki:component:pride-logos s10=-]
|code=trans-alt3
|code2=nonbinary-alt3
|code3=genderfluid-alt3
|angle=70
]]

Vertical

Tilted

This option cannot be used on Bedrock themes. Bedrock only supports joining two logos.

---

🌈Upload Your Own Image

If the ready-made logos listed below didn't satisfy you, this will assure you a chance to make your own pride! Just use the custom attribute to insert a URL:

[[include :scp-wiki:component:pride-logos s10=-]
|custom=url(URL of your custom logo)
]]

You must include the url() brackets.

The combination technique (including the angle option) still works. You can use this together with built-in codes, like:

[[include :scp-wiki:component:pride-logos s10=-]
|code=abro
|custom2=url(https://example.com/my-image.png)
]]

Or three (you can still use code and custom together):

[[include :scp-wiki:component:pride-logos s10=-]
|custom=url(first custom logo)
|custom2=url(second custom logo)
|custom3=url(third custom logo)
]]

Images with a equal width and height will work best, otherwise it will be scaled and stretched.

⚠ Due to a limitation of Sigma and BHL themes, when combining logos together, hollow logos (which inner part is transparent or semi-transparent, like the default site logo) do not display well. The first logo can be partly seen beneath other logos. However, Bedrock does not have this problem.

---

🌈More Advanced Effects?

Q: Can I combine more than 3 logos?

Currently, no. If you want to, I recommend making it to a whole image in Photoshop or other software, then use the custom option.

Q: Can I animate the logos?

Currently, @keyframe animation cannot directly apply to the mask-image property. To animate the logo might be very complicated.

Q: How is the fading logo on this page made? Can I also use gradients?

Yes.

This component uses CSS mask to display combined logos. CSS masks can blend two images, by displaying one of them only within the scope of the mask.

The second logo is cut to a half, then it was put on the top of the first logo. By default, it is designed to cut at 50% sharp:

mask-image: linear-gradient(to right, transparent 50%, black 50%);

This is a CSS gradient. The logo will correspond with the mask's transparency pixel-by-pixel. You can change the color stops, and add a mask attribute to override the existing mask-image:

[[include :scp-wiki:component:pride-logos s10=-]
|mask=gradients, svgs, or something else
]]

For reference, the gradient logo for this page (rainbow fade-in) is coded as:

mask-image: linear-gradient(60deg, transparent 30%, black 60%);

Only the linear-gradient(60deg, transparent 30%, black 60%) field is required. The former angle attribute will then be rendered invalid.

It shall be written as:

[[include :scp-wiki:component:pride-logos s10=-]
|code=default
|code2=pride
|mask=linear-gradient(60deg, transparent 30%, black 60%)
]]

You can also make this

For the 3 logos option, you can use another mask2 for the third logo. However, the result might be a bit funky.

---

🌈Pride Header

If you would like to use only the animated rainbow header, insert this line of code:

[[include :scp-wiki:component:pride-logos header=-]]]

This could coexist with the logo. For example, if you want to use both the logo and the header:

[[include :scp-wiki:component:pride-logos s10=-]
|header= -]
|code= phil
|code2= intersex
]]

Please notice that using this header will necessarily introduce the default Sigma header background to your page. This might overwrite other customized header backgrounds.

---

ℹ️ Please notice that in most cases, for the logo to take effect properly, you need to place the code of this component after the code of any theme(s) you use.

This is flexible but highly recommended, since faults were seen occuring because of this.

+ Example

✅ You are supposed to use:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:deus-ex-machina]]

[[include :scp-wiki:component:pride-logos bhl=-]
|code=pride-alt3
]]

<Content of your article>

❌ Don't place the code like this:

[[include :scp-wiki:component:pride-logos bhl=-]
|code=pride-alt3
]]

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:deus-ex-machina]]

<Content of your article>

This problem is largely caused by CSS override rules.

If you believe you have placed the code correctly, but the logo still doesn't appear/appears wrong, check if you have typos in the code, including missing symbols like brackets [[ or ]], hyphens -, vertical bars |, or equal signs =.

If it is still broken, DM me with your page link.

---

🌈Logos Available Now (In Alphabetical Order)：

Black Transparent	White Transparent	Mixed Transparent	Mixed Transparent Alt
black	white	mix	mix-alt

Default	Inverse
default	inverse

Rainbow Pride	Alternates
pride	pride-alt	pride-alt2	pride-alt3

Philadelphia Pride	Alternates
phil	phil-alt	phil-alt2	phil-alt3

Progress Pride	Alternates
progress	progress-alt	progress-alt2	progress-alt3

---

Abrosexual / Abroromantic Pride	Alternates
abro	abro-alt	abro-alt2	abro-alt3

Agender Pride	Alternates
agender	agender-alt	agender-alt2	agender-alt3

Aromantic Pride	Alternates
aromantic	aromantic-alt	aromantic-alt2	aromantic-alt3

Aroace Pride	Alternates
aroace	aroace-alt	aroace-alt2	aroace-alt3

Asexual Pride	Alternates
asexual	asexual-alt	asexual-alt2	asexual-alt3

Autosexual Pride	Alternates
autosexual	autosexual-alt	autosexual-alt2	autosexual-alt3

Auto-spectrum Pride

auto

Bisexual / Biromantic Pride	Alternates
bi	bi-alt	bi-alt2	bi-alt3

Bigender Pride	Alternates
bigender	bigender-alt	bigender-alt2	bigender-alt3

Demiboy Pride	Alternates
demiboy	demiboy-alt	demiboy-alt2	demiboy-alt3

Demigirl Pride	Alternates
demigirl	demigirl-alt	demigirl-alt2	demigirl-alt3

Demiromantic Pride	Alternates
demiromantic	demiromantic-alt	demiromantic-alt2	demiromantic-alt3

Demisexual Pride	Alternates
demisexual	demisexual-alt	demisexual-alt2	demisexual-alt3

Enbian Pride	Alternates
enbian	enbian-alt	enbian-alt2	enbian-alt3

Gay Men Pride	Alternates
gay	gay-alt	gay-alt2	gay-alt3

Genderfluid Pride	Alternates
genderfluid	genderfluid-alt	genderfluid-alt2	genderfluid-alt3

Genderflux Pride	Alternates
genderflux	genderflux-alt	genderflux-alt2	genderflux-alt3

Genderqueer Pride	Alternates
genderqueer	genderqueer-alt	genderqueer-alt2	genderqueer-alt3

Grayaroace Pride	Alternates
grayaroace	grayaroace-alt	grayaroace-alt2	grayaroace-alt3

Grayromantic Pride	Alternates
grayromantic	grayromantic-alt	grayromantic-alt2	grayromantic-alt3

Graysexual Pride	Alternates
graysexual	graysexual-alt	graysexual-alt2	graysexual-alt3

Intersex Pride	Alternates
intersex	intersex-alt	intersex-alt2	intersex-alt3

Intersex Pride Redesign	Alternate
intersex-re	intersex-re-alt

Lesbian Pride	Alternates
lesbian	lesbian-alt	lesbian-alt2	lesbian-alt3

Neutrois Pride	Alternates
neutrois	neutrois-alt	neutrois-alt2	neutrois-alt3

Nonbinary Pride	Alternates
nonbinary	nonbinary-alt	nonbinary-alt2	nonbinary-alt3

Omnisexual / Omniromantic Pride	Alternates
omni	omni-alt	omni-alt2	omni-alt3

Pansexual / Panromantic Pride	Alternates
pan	pan-alt	pan-alt2	pan-alt3

Pangender Pride	Alternates
pangender	pangender-alt	pangender-alt2	pangender-alt3

Polysexual / Polyromantic Pride	Alternates
poly	poly-alt	poly-alt2	poly-alt3

Queerplatonic Pride	Alternates
queerplatonic	queerplatonic-alt	queerplatonic-alt2	queerplatonic-alt3

Transgender Pride	Alternates
trans	trans-alt	trans-alt2	trans-alt3

Transfeminine Pride	Alternates
transfem	transfem-alt	transfem-alt2	transfem-alt3

Transmasculine Pride	Alternates
transmasc	transmasc-alt	transmasc-alt2	transmasc-alt3

Transneutral Pride	Alternates
transneutral	transneutral-alt	transneutral-alt2	transneutral-alt3

+ Anarchism Logos

Anarcho-Communism	Alternates
ancom	ancom-alt	ancom-alt2	ancom-alt3

Anarcho-Transhumanism	Alternates
antrans	antrans-alt	antrans-alt2	antrans-alt3

Anarcho-Queer	Alternates
anqueer	anqueer-alt	anqueer-alt2	anqueer-alt3

---

▲ Back to Top ▲

---

🔗 View CSS Code 🎛️

---

Feel free to comment or message Dr Talcite to let me know if you encountered problems or bugs, or have any questions or suggestions, or want more logos added!