🏳‍🌈Pride Logos🏳‍⚧

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

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：

Basic Logos

Transparent
black	white	mix	mix-alt

You can also download these four as templates to create your own pride logos. Using these frames, the logo created will be perfectly compatible with other logos listed below.

Solid
default	inverse

---

General Pride Logos

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

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

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

MOGAI1 Pride
mogai

MOGAI Pride Redesign
mogai-re	mogai-re-alt	mogai-re-alt2	mogai-re-alt3

---

All Pride Logos

(In Alphabetical Order)

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

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

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

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

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

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

Auto-spectrum Pride
auto	auto-alt

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

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

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

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

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

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

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

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

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

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

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

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

Grayautosexual Pride
grayauto	grayauto-alt

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

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

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

Intersex Pride Redesign
intersex-re	intersex-re-alt

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

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

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

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

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

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

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

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

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

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

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

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

Unlabeled Pride
unlabeled	unlabeled-alt	unlabeled-alt2	unlabeled-alt3

Xenogender Pride
xenogender	xenogender-alt	xenogender-alt2	xenogender-alt3

Xenogender Pride Redesign
xenogender-re	xenogender-re-alt

+ Anarchism Logos

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

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

Anarcho-Queer
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!

Footnotes

1. Acronym for "Marginalized Orientations, Gender Alignments, and Intersex".