-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from stephfuchs/feature/update-readme
Feature/update readme
- Loading branch information
Showing
28 changed files
with
495 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| .idea |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,294 @@ | ||
| # queer-flags-as-svg | ||
| Repo for queer flags as SVG files (6000x6000) | ||
| # Pride Flags (LGBTQIA+ Community) as SVG plus ally flag | ||
|
|
||
| [](https://github.com/stephfuchs/queer-flags-as-svg/releases) | ||
| [](https://github.com/stephfuchs/queer-flags-as-svg/releases) | ||
| [](https://github.com/stephfuchs/queer-flags-as-svg/blob/main/LICENSE) | ||
|
|
||
| This repository includes the SVG data for queer flags. As extra there will also be the (straight) ally flag. | ||
|
|
||
| ## Pride flags | ||
|
|
||
| <img src="./pride-flags/a-gender.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/a-romantic.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/a-sexuality.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/bi.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/demisexual.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/gay.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/inter.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/lesbian.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/nonbinary.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/pan.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/poly-sexuality.svg" alt="queer flag preview" height="50px"> <img src="./pride-flags/trans.svg" alt="queer flag preview" height="50px"> | ||
|
|
||
| ## Special flags | ||
|
|
||
| <img src="./special-flags/ally.svg" alt="queer flag preview" height="50px"> <img src="./special-flags/rainbow.svg" alt="queer flag preview" height="50px"> <img src="./special-flags/rainbow-philadelphia.svg" alt="queer flag preview" height="50px"> <img src="./special-flags/rainbow-progress.svg" alt="queer flag preview" height="50px"> | ||
|
|
||
| ## SVG Viewbox calculation | ||
|
|
||
| The `viewbox` of each flag is calculated by its stripe count and the height of a stripe. In general is the height of | ||
| each stripe set to `1000px`. The origin is always set to `x=0.0` and `y=0.0` | ||
|
|
||
| ```text | ||
| viewboxHeight = stripeCount * 1000px | ||
| viewboxWidth = viewboxHeight + 2000px | ||
| xPosStripe = 0 | ||
| yPosStripe = viewboxHeight - 1000 | ||
| widthStripe = 100% | ||
| heightStripe = 1000px | ||
| ``` | ||
|
|
||
| ### Stripe calculation | ||
|
|
||
| Table for the `x` and `y` position of a single stripe. | ||
|
|
||
| stripe position | x position | y position | ||
| --- | --- | --- | ||
| #1 | 0 | 0 | ||
| #2 | 0 | 1000 | ||
| #3 | 0 | 2000 | ||
| #4 | 0 | 3000 | ||
| #5 | 0 | 4000 | ||
| #6 | 0 | 5000 | ||
| #7 | 0 | 6000 | ||
| #8 | 0 | 7000 | ||
| #9 | 0 | 8000 | ||
| #10 | 0 | 9000 | ||
|
|
||
| Table for the flag `width` and `height` by given stripe count. | ||
|
|
||
| stripe count (on flag) | flag width (in px) | flag height (in px) | ||
| --- | --- | --- | | ||
| 1 | 3000 | 1000 | ||
| 2 | 4000 | 2000 | ||
| 3 | 5000 | 3000 | ||
| 4 | 6000 | 4000 | ||
| 5 | 7000 | 5000 | ||
| 6 | 8000 | 6000 | ||
| 7 | 9000 | 7000 | ||
| 8 | 10000 | 8000 | ||
| 8 | 11000 | 9000 | ||
| 8 | 12000 | 10000 | ||
|
|
||
| ### Example for 5 stripes | ||
|
|
||
| ```svg | ||
|
|
||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7000 5000"> | ||
| <rect fill="#000000" width="100%" height="1000" y="0" x="0"/> | ||
| <rect fill="#A9A8A8" width="100%" height="1000" y="1000" x="0"/> | ||
| <rect fill="#FFFFFF" width="100%" height="1000" y="2000" x="0"/> | ||
| <rect fill="#AACE79" width="100%" height="1000" y="3000" x="0"/> | ||
| <rect fill="#FFFFFF" width="100%" height="1000" y="4000" x="0"/> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ## Boilerplate flags | ||
|
|
||
| In case you want create a flag the easy way, please feel free to use the the boilerplates within the `flag-boilerplates` | ||
| folder. | ||
|
|
||
| ## Pride flag color overview | ||
|
|
||
| The following tables containing all used colors (incl. their hex value) for the pride flags. Most of the are used in | ||
| other flags as well. It's an alphabetic order. | ||
|
|
||
| ### A-Gender | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#000000` |  | ||
| `#A9A8A8` |  | ||
| `#FFFFFF` |  | ||
| `#AACE79` |  | ||
| `#FFFFFF` |  | ||
| `#A9A8A8` |  | ||
| `#000000` |  | ||
|
|
||
| ### A-Romantic | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#3DA543` |  | ||
| `#AACE79` |  | ||
| `#FFFFFF` |  | ||
| `#A9A8A8` |  | ||
| `#000000` |  | ||
|
|
||
| ### A-Sexuality | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#000000` |  | ||
| `#808080` |  | ||
| `#FFFFFF` |  | ||
| `#730099` |  | ||
|
|
||
| ### Bi | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#D60270` |  | ||
| `#9B4F96` |  | ||
| `#0038A8` |  | ||
|
|
||
| ### Demisexual | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#000000` |  | ||
| `#FFFFFF` |  | ||
| `#730099` |  | ||
| `#808080` |  | ||
|
|
||
| ### Gay | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#3d1a78` |  | ||
| `#7bade2` |  | ||
| `#FFFFFF` |  | ||
| `#98e8c1` |  | ||
| `#078e70` |  | ||
|
|
||
| ### Genderfluid | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#ff66b3` |  | ||
| `#FFFFFF` |  | ||
| `#6E2381` |  | ||
| `#000000` |  | ||
| `#2E57A4` |  | ||
|
|
||
| ### Genderqueer | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#A37EB6` |  | ||
| `#FFFFFF` |  | ||
| `#4C8331` |  | ||
|
|
||
| ### Inter | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#ffcc00` |  | ||
| `#730099` |  | ||
|
|
||
| ### Lesbian | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#e62e00` |  | ||
| `#ff8533` |  | ||
| `#FFFFFF` |  | ||
| `#ff66b3` |  | ||
| `#b30086` |  | ||
|
|
||
| ### Non-Binary | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#ffcc00` |  | ||
| `#FFFFFF` |  | ||
| `#730099` |  | ||
| `#000000` |  | ||
|
|
||
| ### Pan | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#ff33cc` |  | ||
| `#ffcc00` |  | ||
| `#3399ff` |  | ||
|
|
||
| ### Poly-Sexuality | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#730099` |  | ||
| `#028137` |  | ||
| `#2E57A4` |  | ||
|
|
||
| ### Trans | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#3399ff` |  | ||
| `#FFAFC8` |  | ||
| `#FFFFFF` |  | ||
| `#FFAFC8` |  | ||
| `#74D7EE` |  | ||
|
|
||
| ### special pride flags | ||
|
|
||
| This is a list of flags which represent the queer community | ||
|
|
||
| #### Rainbow flag (1979) | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#E30613` |  | ||
| `#F18815` |  | ||
| `#FFED00` |  | ||
| `#028137` |  | ||
| `#2E57A4` |  | ||
| `#6E2381` |  | ||
|
|
||
| #### Rainbow flag (Philadelphia People Of Color Inclusive, 2017) | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#000000` |  | ||
| `#613915` |  | ||
| `#E30613` |  | ||
| `#F18815` |  | ||
| `#FFED00` |  | ||
| `#028137` |  | ||
| `#2E57A4` |  | ||
| `#6E2381` |  | ||
|
|
||
| #### Rainbow flag (progress pride flag, 2018) | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#FFFFFF` |  | ||
| `#FFAFC8` |  | ||
| `#74D7EE` |  | ||
| `#613915` |  | ||
| `#000000` |  | ||
| `#E30613` |  | ||
| `#F18815` |  | ||
| `#FFED00` |  | ||
| `#028137` |  | ||
| `#2E57A4` |  | ||
| `#6E2381` |  | ||
|
|
||
| #### Ally flag (also known as _straight allys_) | ||
|
|
||
| hex-value | color | ||
| --- | --- | ||
| `#000000` |  | ||
| `#FFFFFF` |  | ||
| `#E30613` |  | ||
| `#F18815` |  | ||
| `#FFED00` |  | ||
| `#028137` |  | ||
| `#2E57A4` |  | ||
| `#6E2381` |  | ||
|
|
||
| ## Issue tracker | ||
|
|
||
| Missing a flag? Wrong color? Other bugs found or having any questions? Please feel free to add a ticket | ||
| in [`Issues`](https://github.com/stephfuchs/queer-flags-as-svg/issues). | ||
|
|
||
| ## License | ||
|
|
||
| MIT License | ||
|
|
||
| Copyright (c) 2021 Stephfuchs | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated | ||
| documentation files (the "Software"), to deal in the Software without restriction, including without limitation the | ||
| rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit | ||
| persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all copies or substantial portions of the | ||
| Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE | ||
| WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR | ||
| COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR | ||
| OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.