inject css at runtime- no onmouse events!

README.md

@@ -1,20 +1,32 @@
 # progressive pride flag! 🌈
-## made with ❤ by mellodoot!
 
-a lovely little pride flag made in vector, and optimised to be nice and lightweight!
+## made with ❤ by mellodoot
 
-it tucks into the top-left or top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :)
+a lovely little pride flag made in svg, loaded with js, and optimised to be nice and lightweight!
+
+it tucks into the top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :)
 
 ![progressive pride flag](pridetriangle.svg)
 
-this flag is currently in use over at my own website, [mellodoot.com](https://mellodoot.com)! feel free to check it out if you'd like to see it in action!
+this flag currently represents:
 
-### how do I put this in the top-right of my website?
+- original LGBTQ+ colours! 🏳️‍🌈
-simple! just add `right` as an attribute to the surrounding `<a>` tag! the css stylesheet will handle the rest :)
+- marginalized people of colour (POC) communities! 🧑🏾🧔🏿
+- trans pride! 🏳️‍⚧️
+- intersex! ♂️ ♀️
+
+this flag is currently in use over at my own website, [mellodoot.com](https://www.mellodoot.com)! feel free to check it out if you'd like to see it in action!
+
+## how do I use this on my own website?
+
+simple! just slap this code into your html document, and the js file will be automagically loaded into your site, generating your flag!
 
-**example:**
 ```html
-<a id="pride-triangle" ... right>
+<script type="text/javascript" src="https://www.mellodoot.com/js/pridetriangle.js" defer></script>
+<!-- in case this goes down, try the below example! -->
+<script type="text/javascript" src="https://github.com/mellodoot/prideflag/blob/main/prideflag.js" defer></script>
 ```
 
+...or copy the code from `prideflag.js` and drop it into your own self-hosted file. up to you!
+
 have fun spreading the gay! 🌈

index.html

@@ -1,5 +0,0 @@
-<link rel="stylesheet" href="pride-triangle.css">
-
-<a id="pride-triangle" href="https://www.github.com/mellodoot/prideflag/" target="_blank">
-    <img src="pridetriangle.svg" alt="Progressive Pride Flag" />
-</a>

pride-triangle.css

@@ -1,27 +0,0 @@
-#pride-triangle img {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 120px;
-    transform-origin: 0% 0%;
-    transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
-    z-index: 100;
-}
-#pride-triangle[right] img {
-    left: initial;
-    right: -120px;
-    rotate: 90deg;
-}
-#pride-triangle img:hover {
-    transform: scale(110%);
-}
-#pride-triangle img:active {
-    transform: scale(90%);
-}
-
-@media only screen and (max-width: 720px) {
-    #pride-triangle img {
-        width: 6rem;
-        right: -6rem;
-    }
-}

prideflag-generator.js

@@ -0,0 +1,143 @@
+/**
+ * 🏳️‍🌈🏳️‍⚧️💖 pride flag 💖🏳️‍⚧️🏳️‍🌈
+ * made with ❤️ by mellodoot, 2023
+ * 
+ * an alternate, insanely over-engineered version of prideflag.js
+ * which generates all required svg elements at runtime.
+ * 
+ * given the svg doesn't exactly change however, this turned
+ * out to be wholly unnecessary.
+ * 
+ * neat proof of concept, though!
+ */
+
+/**
+ * Creates an SVG path using the given parameters.
+ * @param {string} id The SVG `id` tag to give the path element.
+ * @param {string} d An SVG draw path.
+ * @param {string} fill A fill colour to apply within an included `style` tag.
+ * @returns An SVG path.
+ */
+function create_path(id, d, fill) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute('id', id);
+    path.setAttribute('d', d);
+    path.setAttribute('style', `fill:${fill}`);
+    return path;
+}
+
+/**
+ * Creates an SVG rectangle using the given parameters.
+ * @param {string} id The SVG `id` tag to give the rectangle element.
+ * @param {number} x The X coordinate of the rectangle.
+ * @param {number} y The Y coordinate of the rectangle.
+ * @param {number} width The width of the rectangle.
+ * @param {number} height The height of the rectangle.
+ * @param {string} fill A fill colour to apply within an included `style` tag.
+ * @returns An SVG rectangle.
+ */
+function create_rect(id, x, y, width, height, fill) {
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute('id', id);
+    rect.setAttribute('x', x);
+    rect.setAttribute('y', y);
+    rect.setAttribute('width', width);
+    rect.setAttribute('height', height);
+    rect.setAttribute('style', `fill:${fill}`);
+    return rect;
+}
+
+/**
+ * Creates an SVG circle using the given parameters.
+ * @param {string} id The SVG `id` tag to give the circle element.
+ * @param {number} x The X coordinate of the circle.
+ * @param {number} y The Y coordinate of the circle.
+ * @param {number} radius The radius of the circle.
+ * @param {string} stroke_colour The stroke colour of the rectangle.
+ * @param {number} stroke_width The stroke width of the rectangle.
+ * @param {string} fill A fill colour to apply within an included `style` tag.
+ * @returns An SVG rectangle.
+ */
+function create_circle(id, x, y, radius, stroke_colour, stroke_width, fill) {
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute('id', id);
+    circle.setAttribute('cx', x);
+    circle.setAttribute('cy', y);
+    circle.setAttribute('r', radius);
+    circle.setAttribute('stroke', stroke_colour);
+    circle.setAttribute('stroke-width', stroke_width);
+    circle.setAttribute('fill', fill);
+    return circle;
+}
+
+/**
+ * Uses the included SVG generation methods to create a complete
+ * pride flag SVG element.
+ * @returns An SVG pride flag.
+ */
+function create_pride_flag_svg() {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 120 120");
+
+    const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    title.textContent = "Progressive Pride Flag";
+    svg.appendChild(title);
+
+    svg.appendChild(create_path("red", "M40,0 H0 L20,20 Z", "#d20605"));
+    svg.appendChild(create_path("orange", "M80,0 H40 L20,20 L40,40 Z", "#ef9c00"));
+    svg.appendChild(create_path("yellow", "M120,0 H80 L40,40 L60,60 Z", "#e5fe02"));
+    svg.appendChild(create_path("green", "M120,40 V0 L60,60 L80,80 Z", "#09be01"));
+    svg.appendChild(create_path("blue", "M120,80 V40 L80,80 L100,100 Z", "#081a9a"));
+    svg.appendChild(create_path("purple", "M120,80 L100,100 L120,120 Z", "#76008a"));
+
+    svg.appendChild(create_rect("black", "60", "0", "60", "60", "#010101"));
+    svg.appendChild(create_rect("brown", "70", "0", "50", "50", "#603814"));
+    svg.appendChild(create_rect("lightblue", "80", "0", "40", "40", "#73d6ed"));
+    svg.appendChild(create_rect("pink", "90", "0", "30", "30", "#ffafc8"));
+    svg.appendChild(create_rect("white", "100", "0", "20", "20", "#ffffff"));
+
+    svg.appendChild(create_rect("intyellow", "110", "0", "10", "10", "#fed800"));
+    svg.appendChild(create_circle("intpurple", "120", "0", "5", "#7800ab", "2", "none"));
+
+    return svg;
+}
+
+/**
+ * @returns A completed pride flag with link and animations.
+ */
+function create_pride_flag() {
+    const link = document.createElement("a");
+    link.id = "pride-triangle";
+    link.href = "https://github.com/mellodoot/prideflag";
+    link.target = "_blank";
+
+    const triangle = create_pride_flag_svg();
+    triangle.style.position = "fixed";
+    triangle.style.top = "0";
+    triangle.style.right = "0";
+    triangle.style.width = "120px";
+    triangle.style.transformOrigin = "100% 0%";
+    triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)";
+    triangle.style.zIndex = "100";
+
+    triangle.onmouseenter = function () {
+        this.style.transform = "scale(110%)";
+    };
+    triangle.onmouseleave = function () {
+        this.style.transform = "initial";
+    };
+
+    triangle.onmousedown = function () {
+        this.style.transform = "scale(90%)";
+    };
+    triangle.onmouseup = function () {
+        this.style.transform = "initial";
+    };
+
+    link.appendChild(triangle);
+
+    return link;
+}
+
+const triangle = create_pride_flag();
+document.body.appendChild(triangle);

prideflag.js

@@ -0,0 +1,66 @@
+/**
+ * 🏳️‍🌈🏳️‍⚧️💖 pride flag 💖🏳️‍⚧️🏳️‍🌈
+ * made with ❤️ by mellodoot, 2023
+ * 
+ * web: https://mellodoot.com
+ * source: https://github.com/mellodoot/prideflag
+ */
+
+const pride_flag_svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
+        <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
+        <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
+        <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
+        <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
+        <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
+        <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
+
+        <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
+        <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
+        <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
+        <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
+        <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
+        
+        <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
+        <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
+    </svg>`;
+
+const pride_flag_css =
+    `#pride-flag svg {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 120px;
+        transform-origin: 100% 0%;
+        transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
+        z-index: 8008135;
+        pointer-events: none;
+    }
+    #pride-flag svg:hover {
+        transform: scale(110%);
+    }
+    #pride-flag svg:active {
+        transform: scale(110%);
+    }
+    #pride-flag svg * {
+        pointer-events: all;
+    }`;
+
+function create_pride_flag() {
+    const container = document.createElement("a");
+    container.id = "pride-flag";
+    container.href = "https://github.com/mellodoot/prideflag";
+    container.target = "_blank";
+    container.innerHTML = pride_flag_svg;
+    return container;
+}
+
+function load_pride_flag_style() {
+    const pride_stylesheet = document.createElement('style');
+    pride_stylesheet.textContent = pride_flag_css;
+    document.head.appendChild(pride_stylesheet);
+}
+
+load_pride_flag_style();
+pride_flag = create_pride_flag();
+document.body.appendChild(pride_flag);

pridetriangle.svg

@@ -1,13 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
-  <path id="red" d="M0,80 L20,100 L0,120 Z" style="fill:#d20605"/>
+  <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
-  <path id="orange" d="M0,80 V40 L40,80 L20,100 Z" style="fill:#ef9c00"/>
+  <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
-  <path id="yellow" d="M0,40 V0 L60,60 L40,80 Z" style="fill:#e5fe02"/>
+  <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
-  <path id="green" d="M0,0 H40 L80,40 L60,60 Z" style="fill:#09be01"/>
+  <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
-  <path id="blue" d="M40,0 H80 L100,20 L80,40 Z" style="fill:#081a9a"/>
+  <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
-  <path id="purple" d="M80,0 H120 L100,20 Z" style="fill:#76008a"/>
+  <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
-  <rect id="black" width="50" height="50" style="fill:#010101"/>
+
-  <rect id="brown" width="40" height="40" style="fill:#603814"/>
+  <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
-  <rect id="lightblue" width="30" height="30" style="fill:#73d6ed"/>
+  <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
-  <rect id="pink" width="20" height="20" style="fill:#ffafc8"/>
+  <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
-  <rect id="white" width="10" height="10" style="fill:#fff"/>
+  <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
+  <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
+  
+  <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
+  <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
 </svg>