Create custom warpgate container for Cyber'ss icon

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>