+<svg width="312" height="612" viewBox="0 0 312 612" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <rect x="270.777" y="26.3993" width="41" height="587" rx="8.5" transform="rotate(10 270.777 26.3993)" fill="url(#paint0_linear_0_1)" stroke="black" stroke-width="3"/>

+ <path d="M1.96411 186.288L34.6489 3.14581C90.5304 31.8814 148.202 49.2747 285.92 44.3675L253.093 230.539C198.252 237.65 157.174 238.491 118.976 231.62C80.8091 224.756 45.4158 210.173 1.96411 186.288Z" fill="url(#paint1_linear_0_1)" stroke="black" stroke-width="3"/>

+ <ellipse cx="94.0001" cy="96.5001" rx="27" ry="38.5" transform="rotate(10 94.0001 96.5001)" fill="white"/>

+ <ellipse cx="94.0001" cy="96.5001" rx="27" ry="38.5" transform="rotate(10 94.0001 96.5001)" fill="white"/>

+ <circle cx="91.2729" cy="111.273" r="17.5" transform="rotate(10 91.2729 111.273)" fill="black"/>

+ <ellipse cx="200.275" cy="110.604" rx="27" ry="38.5" transform="rotate(10 200.275 110.604)" fill="white"/>

+ <ellipse cx="200.275" cy="110.604" rx="27" ry="38.5" transform="rotate(10 200.275 110.604)" fill="white"/>

+ <circle cx="197.548" cy="125.376" r="17.5" transform="rotate(10 197.548 125.376)" fill="black"/>

+ <rect x="73.2827" y="173.735" width="111.544" height="13.1452" transform="rotate(10 73.2827 173.735)" fill="black"/>

+ <defs>

+ <linearGradient id="paint0_linear_0_1" x1="264.327" y1="369.65" x2="316.608" y2="369.57" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#BB8029"/>

+ <stop offset="0.5" stop-color="#A4742E"/>

+ <stop offset="1" stop-color="#BB8029"/>

+ </linearGradient>

+ <linearGradient id="paint1_linear_0_1" x1="160.679" y1="20.4006" x2="223.457" y2="262.428" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#F30000"/>

+ <stop offset="1" stop-color="#8D0000"/>

+ </linearGradient>

+ </defs>

+</svg>

+<svg width="312" height="612" viewBox="0 0 312 612" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <rect x="270.777" y="26.3993" width="41" height="587" rx="8.5" transform="rotate(10 270.777 26.3993)" fill="url(#paint0_linear_0_1)" stroke="black" stroke-width="3"/>

+ <path d="M1.96411 186.288L34.6489 3.14581C90.5304 31.8814 148.202 49.2747 285.92 44.3675L253.093 230.539C198.252 237.65 157.174 238.491 118.976 231.62C80.8091 224.756 45.4158 210.173 1.96411 186.288Z" fill="url(#paint1_linear_0_1)" stroke="black" stroke-width="3"/>

+ <ellipse cx="94.0001" cy="96.5001" rx="27" ry="38.5" transform="rotate(10 94.0001 96.5001)" fill="white"/>

+ <ellipse cx="94.0001" cy="96.5001" rx="27" ry="38.5" transform="rotate(10 94.0001 96.5001)" fill="white"/>

+ <circle cx="91.2729" cy="111.273" r="17.5" transform="rotate(10 91.2729 111.273)" fill="black"/>

+ <ellipse cx="200.275" cy="110.604" rx="27" ry="38.5" transform="rotate(10 200.275 110.604)" fill="white"/>

+ <ellipse cx="200.275" cy="110.604" rx="27" ry="38.5" transform="rotate(10 200.275 110.604)" fill="white"/>

+ <circle cx="197.548" cy="125.376" r="17.5" transform="rotate(10 197.548 125.376)" fill="black"/>

+ <path fill-rule="evenodd" clip-rule="evenodd" d="M186.135 182.391C174.501 189.702 152.531 192.264 128.413 188.011C104.423 183.781 84.7363 173.942 76.2296 163.161C76.0753 163.681 75.9502 164.21 75.8553 164.748C73.1738 179.955 95.6422 196.629 126.04 201.989C156.438 207.349 183.254 199.366 185.936 184.158C186.039 183.571 186.105 182.982 186.135 182.391Z" fill="#121212"/>

+ <defs>

+ <linearGradient id="paint0_linear_0_1" x1="264.327" y1="369.65" x2="316.608" y2="369.57" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#BB8029"/>

+ <stop offset="0.5" stop-color="#A4742E"/>

+ <stop offset="1" stop-color="#BB8029"/>

+ </linearGradient>

+ <linearGradient id="paint1_linear_0_1" x1="160.679" y1="20.4006" x2="223.457" y2="262.428" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#F30000"/>

+ <stop offset="1" stop-color="#8D0000"/>

+ </linearGradient>

+ </defs>

+</svg>

+<svg width="312" height="612" viewBox="0 0 312 612" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <rect x="270.777" y="26.3993" width="41" height="587" rx="8.5" transform="rotate(10 270.777 26.3993)" fill="url(#paint0_linear_0_1)" stroke="black" stroke-width="3"/>

+ <path d="M1.96411 186.288L34.6489 3.14581C90.5304 31.8814 148.202 49.2747 285.92 44.3675L253.093 230.539C198.252 237.65 157.174 238.491 118.976 231.62C80.8091 224.756 45.4158 210.173 1.96411 186.288Z" fill="url(#paint1_linear_0_1)" stroke="black" stroke-width="3"/>

+ <ellipse cx="94.0001" cy="96.5001" rx="27" ry="38.5" transform="rotate(10 94.0001 96.5001)" fill="white"/>

+ <ellipse cx="94.0001" cy="96.5001" rx="27" ry="38.5" transform="rotate(10 94.0001 96.5001)" fill="white"/>

+ <circle cx="91.2729" cy="111.273" r="17.5" transform="rotate(10 91.2729 111.273)" fill="black"/>

+ <ellipse cx="200.275" cy="110.604" rx="27" ry="38.5" transform="rotate(10 200.275 110.604)" fill="white"/>

+ <ellipse cx="200.275" cy="110.604" rx="27" ry="38.5" transform="rotate(10 200.275 110.604)" fill="white"/>

+ <circle cx="197.548" cy="125.376" r="17.5" transform="rotate(10 197.548 125.376)" fill="black"/>

+ <path fill-rule="evenodd" clip-rule="evenodd" d="M71.1091 192.303C82.7428 184.992 104.713 182.43 128.831 186.683C152.821 190.913 172.507 200.752 181.014 211.533C181.169 211.013 181.294 210.484 181.388 209.946C184.07 194.738 161.602 178.065 131.204 172.705C100.806 167.345 73.9897 175.328 71.3082 190.536C71.2047 191.123 71.1387 191.712 71.1091 192.303Z" fill="#121212"/>

+ <defs>

+ <linearGradient id="paint0_linear_0_1" x1="264.327" y1="369.65" x2="316.608" y2="369.57" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#BB8029"/>

+ <stop offset="0.5" stop-color="#A4742E"/>

+ <stop offset="1" stop-color="#BB8029"/>

+ </linearGradient>

+ <linearGradient id="paint1_linear_0_1" x1="160.679" y1="20.4006" x2="223.457" y2="262.428" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#F30000"/>

+ <stop offset="1" stop-color="#8D0000"/>

+ </linearGradient>

+ </defs>

+</svg>

+<svg width="894" height="667" viewBox="0 0 894 667" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M274.61 149.987L512.43 499.368H36.7908L274.61 149.987Z" fill="url(#paint0_linear_19_67)"/>

+ <path d="M511.105 0L842.702 500.25H179.508L511.105 0Z" fill="url(#paint1_linear_19_67)"/>

+ <defs>

+ <linearGradient id="paint0_linear_19_67" x1="274.61" y1="149.987" x2="274.61" y2="615.828" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#9D9D9D"/>

+ <stop offset="1" stop-color="#737373"/>

+ </linearGradient>

+ <linearGradient id="paint1_linear_19_67" x1="511.105" y1="6.05691e-06" x2="687.704" y2="665.423" gradientUnits="userSpaceOnUse">

+ <stop stop-color="#C1C1C1"/>

+ <stop offset="1" stop-color="#979797"/>

+ </linearGradient>

+ </defs>

+</svg>

+<!doctype html>

+<html>

+<head>

+ <meta charset="UTF-8"/>

+ <meta name="viewport" content="width=device-width"/>

+ <title>LARS</title>

+ <link rel="stylesheet" href="style.css">

+

+</head>

+<body>

+<section id="start">

+ <div id="mcontainer" class="center">

+ <span id="text1"></span>

+ <span id="text2"></span>

+ </div>

+

+ <svg id="filters">

+ <defs>

+ <filter id="threshold">

+ <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0

+ 0 1 0 0 0

+ 0 0 1 0 0

+ 0 0 0 255 -140"/>

+ </filter>

+ </defs>

+ </svg>

+</section>

+

+<section id="flaggy_section">

+ <h1 id="worthy">Are you worthy of flaggy?</h1>

+ <img src="assets/flaggy_happy.svg" alt="flaggy happy" id="flaggy_happy" class="flaggy">

+ <img src="assets/flaggy_sad.svg" alt="flaggy sad" id="flaggy_sad" class="flaggy">

+ <img src="assets/flaggy_base.svg" alt="flaggy base" id="flaggy_neutral" class="flaggy">

+ <img src="assets/rock.svg" alt="rock" id="rock">

+

+</section>

+<section>

+ <link href='//fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

+ <div id="demo"></div>

+</section>

+

+<section>

+

+ <h1>Flag Showcase</h1>

+ <canvas id="flags"></canvas>

+

+</section>

+

+</body>

+

+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"

+ integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="

+ crossorigin="anonymous" referrerpolicy="no-referrer"></script>

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>

+

+<!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/EasePack.min.js"></script>

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/Observer.min.js"></script>

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/MotionPathPlugin.min.js"></script>

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/PixiPlugin.min.js"></script>

+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/TextPlugin.min.js"></script>

+<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

+

+<script src="script.js"></script>

+</html> \ No newline at end of file

+gsap.registerPlugin(TextPlugin, EasePack);

+

+var tl = gsap.timeline({defaults: {duration: 2, ease: "none"}});

+

+

+

+

+

+

+const elts = {

+ text1: document.getElementById("text1"),

+ text2: document.getElementById("text2")

+};

+

+const texts = [

+ "L",

+ "A",

+ "R",

+ "S",

+];

+

+const morphTime = 1;

+const cooldownTime = 0.25;

+

+let textIndex = texts.length - 1;

+let time = new Date();

+let morph = 0;

+let cooldown = cooldownTime;

+

+elts.text1.textContent = texts[textIndex % texts.length];

+elts.text2.textContent = texts[(textIndex + 1) % texts.length];

+

+function doMorph() {

+ morph -= cooldown;

+ cooldown = 0;

+

+ let fraction = morph / morphTime;

+

+ if (fraction > 1) {

+ cooldown = cooldownTime;

+ fraction = 1;

+ }

+

+ setMorph(fraction);

+}

+

+function setMorph(fraction) {

+ elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;

+ elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

+

+ fraction = 1 - fraction;

+ elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;

+ elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

+

+ elts.text1.textContent = texts[textIndex % texts.length];

+ elts.text2.textContent = texts[(textIndex + 1) % texts.length];

+}

+

+function doCooldown() {

+ morph = 0;

+

+ elts.text2.style.filter = "";

+ elts.text2.style.opacity = "100%";

+

+ elts.text1.style.filter = "";

+ elts.text1.style.opacity = "0%";

+}

+

+function animate() {

+ requestAnimationFrame(animate);

+

+ let newTime = new Date();

+ let shouldIncrementIndex = cooldown > 0;

+ let dt = (newTime - time) / 1000;

+ time = newTime;

+

+ cooldown -= dt;

+

+ if (cooldown <= 0) {

+ if (shouldIncrementIndex) {

+ textIndex++;

+ }

+

+ doMorph();

+ } else {

+ doCooldown();

+ }

+}

+

+animate();

+

+flaggy_neutral = document.getElementById("flaggy_neutral");

+flaggy_happy = document.getElementById("flaggy_happy");

+flaggy_sad = document.getElementById("flaggy_sad");

+all_flaggies = [flaggy_sad, flaggy_happy, flaggy_neutral];

+// Make the DIV element draggable:

+

+for (let i = 0; i < all_flaggies.length; i++) {

+ dragElement(all_flaggies[i]);

+}

+

+

+let rotCount = 0;

+let check = null

+

+function dragElement(elmnt) {

+ var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

+ if (document.getElementById(elmnt.id + "header")) {

+ // if present, the header is where you move the DIV from:

+ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;

+ } else {

+ // otherwise, move the DIV from anywhere inside the DIV:

+ elmnt.onmousedown = dragMouseDown;

+ }

+

+ function dragMouseDown(e) {

+ if (check === null) {

+ check = prompt("Is L.A.R.S. the best CTF team in the world?", "Yes")

+ }

+ if (check.toLowerCase() !== "yes") {

+ flaggy_neutral.style.display = "none";

+ flaggy_sad.style.display = "block";

+ flaggy_happy.style.display = "none";

+

+ alert("You are not allowed to pull out the flaggy until you admit that L.A.R.S. is the best CTF team in the world!")

+ check = null;

+ return;

+ }

+ flaggy_neutral.style.display = "none";

+ flaggy_sad.style.display = "none";

+ flaggy_happy.style.display = "block";

+

+

+ e = e || window.event;

+ e.preventDefault();

+ // get the mouse cursor position at startup:

+ pos3 = e.clientX;

+ pos4 = e.clientY;

+ document.onmouseup = closeDragElement;

+ // call a function whenever the cursor moves:

+ document.onmousemove = elementDrag;

+ }

+

+ function elementDrag(e) {

+

+ e = e || window.event;

+ e.preventDefault();

+ // calculate the new cursor position:

+

+ pos2 = pos4 - e.clientY;

+ pos3 = e.clientX;

+ pos4 = e.clientY;

+ // set the element's new position:

+ let angle = Math.floor(Math.random() * 20) - 10;

+

+ for (let i = 0; i < all_flaggies.length; i++) {

+ let elmnt = all_flaggies[i];

+ elmnt.style.top = (elmnt.offsetTop - pos2) + "px";

+ elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";

+

+

+ if (rotCount % 10 === 0)

+ elmnt.style.transform = "rotate(" + angle + "deg)";

+ }

+

+

+ rotCount += 1;

+ }

+

+ elmnt.offsetTop - pos2

+

+ function closeDragElement() {

+ // stop moving when mouse button is released:

+ document.onmouseup = null;

+ document.onmousemove = null;

+ }

+}

+

+

+

+

+

+

+

+

+var container = $("#demo"),

+ _sentenceEndExp = /(\.|\?|!)$/g; //regular expression to sense punctuation that indicates the end of a sentence so that we can adjust timing accordingly

+

+//this function just takes a string of text and splits it into an array based on the maximum length that should be allowed to exist in each line, and when it encounters the end of a sentence (ending in ".", "?", or "!"), it will force a line break too.

+function buildChunks(text, maxLength) {

+ if (maxLength === undefined) {

+ return text.split(" ");

+ }

+ var words = text.split(" "),

+ wordCount = words.length,

+ chunk = [],

+ chunks = [], i;

+ for (i = 0; i < wordCount; i++){

+ chunk.push(words[i]);

+ if (_sentenceEndExp.test(words[i]) || i === wordCount - 1 || chunk.join(" ").length + words[i+1].length > maxLength) {

+ chunks.push(chunk.join(" "));

+ chunk = [];

+ }

+ }

+ return chunks;

+}

+

+

+/* taken from https://codepen.io/GreenSock/pen/DpRrWV */

+function machineGun(chunks, maxLength) {

+ //in case "chunks" isn't an array, we'll build chunks automatically

+ if (!(chunks instanceof Array)) {

+ chunks = buildChunks(chunks, maxLength);

+ }

+

+ var tl = new TimelineMax({delay:0.6, repeat:2, repeatDelay:4}),

+ time = 0,

+ chunk, element, duration, isSentenceEnd, i;

+

+ for (i = 0; i < chunks.length; i++) {

+ chunk = chunks[i];

+ isSentenceEnd = _sentenceEndExp.test(chunk) || (i === chunks.length - 1);

+ element = $("<h3>" + chunk + "</h3>").appendTo(container);

+ duration = Math.max(0.5, chunk.length * 0.08); //longer words take longer to read, so adjust timing. Minimum of 0.5 seconds.

+ if (isSentenceEnd) {

+ duration += 0.5; //if it's the last word in a sentence, drag out the timing a bit for a dramatic pause.

+ }

+ //set opacity and scale to 0 initially. We set z to 0.01 just to kick in 3D rendering in the browser which makes things render a bit more smoothly.

+ TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01});

+ //the SlowMo ease is like an easeOutIn but it's configurable in terms of strength and how long the slope is linear. See https://www.greensock.com/v12/#slowmo and https://api.greensock.com/js/com/greensock/easing/SlowMo.html

+ tl.to(element, duration, {scale:1.2, ease:SlowMo.ease.config(0.25, 0.9)}, time)

+ //notice the 3rd parameter of the SlowMo config is true in the following tween - that causes it to yoyo, meaning opacity (autoAlpha) will go up to 1 during the tween, and then back down to 0 at the end.

+ .to(element, duration, {autoAlpha:1, ease:SlowMo.ease.config(0.25, 0.9, true)}, time);

+ time += duration - 0.05;

+ if (isSentenceEnd) {

+ time += 0.5; //at the end of a sentence, add a pause for dramatic effect.

+ }

+ }

+}

+

+machineGun("We are L.A.R.S. We win every CTF. We are the best in the World. No one can defeat us. We never lose. We always win. We take all flags and we don't give them back. You should be scared, because we also take your flag.", 12);

+

+

+const canvas = document.getElementById('flags')

+

+const jsConfetti = new JSConfetti({ canvas })

+

+function fire() {

+ jsConfetti.addConfetti({

+ emojis: ['🏳️‍🌈', '🚩️', '🏳️‍⚧️', '🏴‍☠️', '🏳️', '🏴'],

+ })

+ setTimeout(fire, 700)

+}

+fire()

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');

+

+html, body {

+ background-color: #000;

+ color: #fff;

+ padding: 0;

+ margin: 0;

+ text-align: center;

+ font-size: 69px;

+ font-family: 'Courier New', Courier, monospace;

+ font-weight: bold;

+}

+

+section{

+ height: 100vh;

+}

+

+.center {

+ position: absolute;

+ top: 50%;

+ left: 50%;

+ transform: translate(-50%, -50%);

+}

+

+.blink {

+ animation: blink .2s infinite;

+}

+

+@keyframes blink {

+ 0% {

+ opacity: 1;

+ }

+ 50% {

+ opacity: 0;

+ }

+ 100% {

+ opacity: 1;

+ }

+}

+

+.bg {

+ z-index: 1;

+ width: 100%;

+ height: 200vh;

+ position: absolute;

+ top: 0;

+ left: 0;

+}

+

+.page {

+ height: 100vh;

+ position: relative;

+}

+

+.note {

+ position: absolute;

+ bottom: 0;

+ left: 0;

+ right: 0;

+ font-size: 28px;

+}

+

+.colored {

+ background-color: pink;

+}

+

+ul, li, ol {

+ list-style: none;

+}

+

+a:link, a:visited {

+ color: #fff;

+}

+

+@media (prefers-reduced-motion: reduce) {

+ .blink {

+ animation: none;

+ }

+

+ .bg {

+ display: none;

+ }

+}

+

+div {

+ display: flex;

+ justify-content: center;

+ align-items: center;

+ height: 100vh;

+}

+

+

+

+#mcontainer {

+ /* Center the text in the viewport. */

+ position: absolute;

+ margin: auto;

+ height: 80pt;

+ top: 0;

+ bottom: 0;

+

+ filter: url(#threshold) blur(0.6px);

+}

+

+#text1, #text2 {

+ position: absolute;

+ width: 100%;

+ display: inline-block;

+

+ font-family: 'Raleway', sans-serif;

+ font-size: 80pt;

+

+ text-align: center;

+

+ user-select: none;

+}

+

+#flaggy_section img{

+ position: absolute;

+}

+

+#rock{

+ top: 150%;

+ left: 50%;

+ transform: translate(-50%, -0%);

+ width: 30%;

+}

+

+.flaggy {

+ top: 150%;

+ left: 50%;

+ transform: translate(-50%, -60%);

+ width: 10%;

+}

+

+

+#demo *{

+ position: absolute;

+ top: 250%;

+ left: 50%;

+ transform: translate(-50%, -50%);

+ color: white;

+}

+

+#flags{

+ position: absolute;

+ top: 350%;

+ left: 50%;

+ transform: translate(-50%, -40%);

+ width: 100%;

+ height: 100vh;

+} \ No newline at end of file