From 8684f9d6f6f2644dca00cf6d48c2893f64dd1589 Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Wed, 20 Jul 2022 22:12:11 -0600
Subject: [PATCH] Create custom warpgate container for Cyber'ss icon

---
 web-svelte/public/assets/warp-gate-center.svg |  1 +
 web-svelte/public/assets/warp-gate-shell.svg  |  1 +
 .../src/components/icons/warpgate.svelte      | 51 +++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 web-svelte/public/assets/warp-gate-center.svg
 create mode 100644 web-svelte/public/assets/warp-gate-shell.svg
 create mode 100644 web-svelte/src/components/icons/warpgate.svelte

diff --git a/web-svelte/public/assets/warp-gate-center.svg b/web-svelte/public/assets/warp-gate-center.svg
new file mode 100644
index 0000000..5c4f58e
--- /dev/null
+++ b/web-svelte/public/assets/warp-gate-center.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 106 112" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M1.812 41.775c-7.559 28.21 9.182 57.206 37.392 64.764 17.048 4.568 34.384.262 47.102-10.088a52.64 52.64 0 0 0 17.663-27.304L91.71 65.863c-5.745 21.44-27.782 34.162-49.221 28.417C21.049 88.536 8.326 66.5 14.07 45.06L1.812 41.774Z"/><path d="M86.306 96.45s-3.577 4.143 2.237 4.45c10.96.577 5.52 16.887-38.973 7.347-60.155-12.898 36.736-11.796 36.736-11.796Zm17.58-26.994c7.559-28.21-9.182-57.206-37.392-64.765C49.446.123 32.11 4.43 19.393 14.78A52.64 52.64 0 0 0 1.73 42.083l12.258 3.285C19.733 23.928 41.77 11.205 63.21 16.95c21.439 5.745 34.162 27.782 28.417 49.221l12.26 3.285Z"/><path d="M19.393 14.78s3.577-4.142-2.237-4.449c-10.961-.577-5.52-16.887 38.972-7.348C116.283 15.881 19.393 14.78 19.393 14.78Z"/><path d="M52.695 108.277c29.081 0 52.657-23.575 52.657-52.657 0-17.575-8.61-33.14-21.843-42.705a52.419 52.419 0 0 0-30.814-9.952V15.6c22.102 0 40.02 17.918 40.02 40.02 0 22.102-17.918 40.02-40.02 40.02v12.637Z"/><path d="M83.509 12.915s4.906 2.373 3.702-3.298c-2.27-10.691 14.82-9.662 17.112 35.592 3.098 61.185-20.814-32.294-20.814-32.294ZM53.013 2.963C23.93 2.963.355 26.538.355 55.62c0 17.575 8.61 33.14 21.844 42.705a52.419 52.419 0 0 0 30.814 9.952V95.64c-22.103 0-40.02-17.918-40.02-40.02 0-22.102 17.917-40.02 40.02-40.02V2.963Z"/><path d="M22.198 98.325s-4.906-2.373-3.702 3.298c2.27 10.691-14.82 9.662-17.112-35.592-3.098-61.185 20.814 32.294 20.814 32.294Z"/></svg>
\ No newline at end of file
diff --git a/web-svelte/public/assets/warp-gate-shell.svg b/web-svelte/public/assets/warp-gate-shell.svg
new file mode 100644
index 0000000..0c7d98c
--- /dev/null
+++ b/web-svelte/public/assets/warp-gate-shell.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 176 172" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M26.2 142.809 0 109.954l17.367-76.091L87.685 0l70.318 33.863 17.367 76.091-26.201 32.855 8.739 28.746H17.461l8.739-28.746ZM87.685 7.49l59.222 28.52 14.626 64.083-40.982 51.391H54.819l-40.983-51.391L28.463 36.01 87.685 7.49Z"/></svg>
\ No newline at end of file
diff --git a/web-svelte/src/components/icons/warpgate.svelte b/web-svelte/src/components/icons/warpgate.svelte
new file mode 100644
index 0000000..b463b71
--- /dev/null
+++ b/web-svelte/src/components/icons/warpgate.svelte
@@ -0,0 +1,51 @@
+<div class="main">
+	<div class="shell"></div>
+	<div class="center"></div>
+</div>
+
+
+<style lang="scss">
+div {
+	width: 100%;
+	height: 100%;
+}
+
+.main {
+	position: relative;
+}
+
+.shell {
+	background-image: url(/assets/warp-gate-shell.svg);
+	background-repeat: no-repeat;
+	background-position: center;
+	transform: rotate(90deg);
+}
+
+.center {
+	--size: 60%;
+	width: var(--size);
+	height: var(--size);
+	position: absolute;
+	background-image: url(/assets/warp-gate-center.svg);
+	background-repeat: no-repeat;
+	background-position: center;
+	animation: rotate 3s linear infinite;
+	top: 21%;
+	left: 21%;
+}
+
+@media (prefers-reduced-motion) {
+	.center {
+		animation: rotate 10s linear infinite;
+	}
+}
+
+@keyframes rotate {
+	to {
+		transform: rotate(0deg);
+	}
+	from {
+		transform: rotate(360deg);
+	}
+}
+</style>
\ No newline at end of file