home to your local SPACEGIRL 馃挮
arimelody.space
1//
2// pride flag - copyright (c) 2024 ari melody
3//
4// this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
5// freely redistributed and/or modified as you please, however
6// retaining this license in any redistribution.
7//
8// please use this flag to link to an LGBTQI+-supporting page
9// of your choosing!
10//
11// web: https://arimelody.space
12// source: https://forge.arimelody.space/ari/prideflag
13//
14
15const pride_url = "https://forge.arimelody.space/ari/prideflag";
16
17const pride_flag_svg =
18 `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
19 <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
20 <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
21 <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
22 <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
23 <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
24 <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
25
26 <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
27 <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
28 <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
29 <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
30 <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
31
32 <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
33 <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
34 </svg>`;
35
36const pride_flag_css =
37 `#prideflag {
38 position: fixed;
39 top: 0;
40 right: 0;
41 width: 120px;
42 transform-origin: 100% 0%;
43 transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
44 z-index: 8008135;
45 pointer-events: none;
46 }
47 #prideflag:hover {
48 transform: scale(110%);
49 }
50 #prideflag:active {
51 transform: scale(110%);
52 }
53 #prideflag * {
54 pointer-events: all;
55 }`;
56
57function create_pride_flag() {
58 const flag = document.createElement("a");
59 flag.id = "prideflag";
60 flag.href = pride_url;
61 flag.target = "_blank";
62 flag.innerHTML = pride_flag_svg;
63 return flag;
64}
65
66function load_pride_flag_style() {
67 const pride_stylesheet = document.createElement('style');
68 pride_stylesheet.textContent = pride_flag_css;
69 document.head.appendChild(pride_stylesheet);
70}
71
72load_pride_flag_style();
73flag = create_pride_flag();
74document.body.appendChild(flag);