Styled SVG Vector Graphic Components

Implement all required styled SVG vector graphic fractal components the main `ArcticOceanFractal` component will be consist of. Resolves GH-3
arcticicestudio · Jan 8, 2019 · 73f1822 · 73f1822
1 parent 7bf16ba
commit 73f1822
Show file tree

Hide file tree

Showing 25 changed files with 53,392 additions and 0 deletions.
diff --git a/assets/arctic-ocean-fractal.ai b/assets/arctic-ocean-fractal.ai
diff --git a/src/IllustrationCanvas.jsx b/src/IllustrationCanvas.jsx
diff --git a/src/anglerfish/Anglerfish.jsx b/src/anglerfish/Anglerfish.jsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+import posed from "react-pose";
+
+import LightRing from "./styled/LightRing";
+import {
+  poseConfigAnglerfish,
+  poseConfigAnglerfishEyeLens,
+  poseConfigAnglerfishForeheadSkinFold
+} from "../shared/poseConfig";
+import nord from "../shared/nord";
+
+const Group = posed.g(poseConfigAnglerfish);
+const EyeLens = posed.path(poseConfigAnglerfishEyeLens);
+const ForeheadSkinFold = posed.path(poseConfigAnglerfishForeheadSkinFold);
+
+export default React.memo(props => (
+  <Group {...props}>
+    <path
+      d="M510.92 373.25c3.66-.656 7.114-2.281 11.008-1.953 1.919.16 3.402.576 4.595 2.109 4.657 5.984 8.696 12.277 10.2 19.873-.471 1.441-1.643 2.094-2.936 2.611-9.708 3.871-19.372 7.854-29.035 11.836-1.344.553-2.747 1.129-4.2.217-.73-.623-1.335-1.361-1.653-2.256-2.376-6.645-1.99-12.734 1.152-19.252.353-.676.662-1.316.938-1.861 2.235-4.717 6.133-7.976 9.931-11.324z"
+      fill={nord.nord8}
+    />
+    <ForeheadSkinFold
+      d="M501.603 389.482c.52-3.16 1.694-5.855 4.088-7.92.478-.412 1.006-.855 1.615-.277.677.641.079 1.143-.329 1.561-1.869 1.902-3.133 4.1-3.431 6.789-.078.707-.002 1.693-.951 1.678-1.26-.02-.738-1.215-.992-1.831z"
+      fill={nord.nord4}
+    />
+    <path
+      d="M498.148 408.68c1.158.256 2.027-.439 2.972-.895 11.868-4.836 23.736-9.67 35.604-14.504.872 4.807.492 9.418-1.759 13.873-2.794 5.531-7.343 9.17-12.559 12.127a50.333 50.333 0 0 1-14.498 5.49c-7.725-1.516-14.265-4.842-18.313-11.977.216-.844.725-1.564 1.507-1.807 2.362-.729 4.532-2.057 7.046-2.307z"
+      fill={nord.nord9}
+    />
+    <path
+      d="M546.014 411.674c.879 3.168 1.414 6.262-1.782 8.582-1.751 2.832-4.686 2.451-7.237 2.25-2.605-.203-4.784.279-7.15 1.338-6.137 2.742-12.545 4.301-19.35 2.824-1.033-.225-4.141-1.389-4.749-2.377.341-2.148 4.389-1.188 5.846-1.676 2.515-.156 10.909-4.203 15.521-7.918 6.773-5.455 9.948-12.408 8.55-21.184-1.404-5.857-4.102-11.098-7.577-15.971-3.77-5.283-5.528-5.883-11.907-4.42-1.702.391-3.473 1.811-5.258.127 5.684-6.678 15.892-9.32 23.893-6.188 2.045 1.936 1.468 4.443 1.49 6.82.154 1.053.42 1.553 1.045 2.092.883 1.035 1.423.18 2.027-.361 1.085-.973 2.104-2.045 3.285-2.885 1.717-1.223 3.224-.875 3.996 1.154 1.169 3.068 2.986 4.859 6.583 4.443 2.146-.25 2.759 1.387 2.312 3.123-1.05 4.076.12 7.086 3.626 9.436 2.335 1.564 1.425 3.439-.169 4.984-3.013 2.924-6.784 4.467-10.775 5.463-3.384.844-5.293 5.227-3.461 8.186.435.709.828 1.439 1.241 2.158z"
+      fill={nord.nord10}
+    />
+    <path
+      d="M498.148 408.68c-2.463 2.174-5.826 2.484-8.553 4.115-1.286-5.168-.767-12.805 1.395-16.611.275 2.75-.059 5.08.566 7.307.612 2.178 1.288 4.289 3.035 6.363.58-3.18-.427-6.172 1.294-9.277.324 3.15.595 5.845 2.263 8.103zm6.053-14.225c-.041-1.908 2.105-4.217 4.016-4.061 2.245.182 3.65 1.57 3.948 3.789.255 1.9-1.938 4.139-3.873 4.191-2.124.06-4.046-1.782-4.091-3.919z"
+      fill={nord.nord4}
+    />
+    <EyeLens
+      d="M510.627 394.234c-.058 1.494-.773 2.412-2.228 2.527-1.088.088-2.628-.535-2.127-1.459.591-1.092-.728-3.514 1.952-3.344 1.48.097 2.225.899 2.403 2.276z"
+      fill={nord.nord3}
+    />
+    <path
+      d="M471.178 378.67c.369-.344.624-.615 1.003-.975 3.427-3.242 7.373-2.975 11.444-1.688 4.877 1.541 8.991 4.354 12.74 7.771 1.119 1.02 2.206 1.805 3.686 2.656.238-.467.701-1.395.938-1.861-1.076-.977-2.162-1.941-3.23-2.926-4.517-4.166-9.561-7.4-15.653-8.721-6.281-1.363-10.383.426-13.047 5.609.168-.006.333-.023.504-.023l1.615.158z"
+      fill={nord.nord7}
+    />
+    <LightRing d="M457.267,390.807a12.295,12.295 0 1,0 24.59,0a12.295,12.295 0 1,0 -24.59,0" />
+    <LightRing d="M469.597 381.592c1.566.553 3.383.611 4.788 1.436 3.575 2.102 5.124 7.023 3.696 11.023-1.39 3.895-5.493 6.561-9.546 6.205-3.99-.352-7.656-3.637-8.275-7.416-.771-4.719 1.092-8.365 5.244-10.246.943-.426 1.957-.557 2.904-.977l.117.223c.113 2.508-.917 3.313-2.085 4.961-2.289 2.346-2.806 4.236-1.539 6.342 1.231 2.041 3.003 3.076 5.478 2.719 2.416-.346 3.678-1.918 4.091-4.102.45-2.377-.565-4.289-2.657-5.488-1.703-1.629-2.251-2.139-2.387-4.387l.171-.293z" />
+    <LightRing d="M469.597 381.592c-.167 1.734.259 2.777 2.256 3.338 2.707.762 4.496 3.969 3.993 6.666-.504 2.695-1.797 4.91-4.803 5.471-3.291.615-6.188-.785-7.537-3.576-1.296-2.684-.69-5.439 1.93-7.475 1.523-1.184 3.027-2.221 2.973-4.398l1.188-.026z" />
+    <path
+      d="M468.611 385.336c.358 1.316.878 2.135 2.146 2.779 1.642.836 2.81 2.359 1.328 4.359-1.141 1.541-2.707 2.156-4.349.996-1.747-1.234-1.71-3.064-.583-4.699.722-1.046 1.497-1.984 1.458-3.435z"
+      fill={nord.nord13}
+    />
+  </Group>
+));
diff --git a/src/anglerfish/index.js b/src/anglerfish/index.js
@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+export { default } from "./Anglerfish";
diff --git a/src/anglerfish/styled/LightRing.jsx b/src/anglerfish/styled/LightRing.jsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+import nord from "../../shared/nord";
+
+const animLightRingGlow = keyframes`
+  0% {
+    opacity: 0.6;
+    fill: ${nord.nord4};
+  }
+
+  100% {
+    opacity: 0.9;
+    fill: ${nord.nord6};
+  }
+`;
+
+const LightRing = styled.path`
+  animation: ${animLightRingGlow} 3s linear infinite alternate;
+  transform-style: preserve-3d;
+`;
+
+export default React.memo(props => <LightRing {...props} />);
diff --git a/src/bubbles/BubblesFishSwarm.jsx b/src/bubbles/BubblesFishSwarm.jsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { fishSwarmCircles } from "./pathData";
+import BubbleFloating from "./styled/BubbleFloating";
+
+export default React.memo(props => (
+  <g>
+    {fishSwarmCircles.map(({ cx, cy, r }, idx) => (
+      <BubbleFloating key={`${cx}-${cy}-${r}`} animDelay={idx} cx={cx} cy={cy} r={r} {...props} />
+    ))}
+  </g>
+));
diff --git a/src/bubbles/BubblesGroundHoleCenter.jsx b/src/bubbles/BubblesGroundHoleCenter.jsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { groundHoleCenterCircles } from "./pathData";
+import BubbleGroundHole from "./styled/BubbleGroundHole";
+
+export default React.memo(props => (
+  <g>
+    {groundHoleCenterCircles.map(({ cx, cy, r }, idx) => (
+      <BubbleGroundHole key={`${cx}-${cy}-${r}`} animDelay={idx} cx={cx} cy={cy} r={r} {...props} />
+    ))}
+  </g>
+));
diff --git a/src/bubbles/BubblesGroundHoleOverflow.jsx b/src/bubbles/BubblesGroundHoleOverflow.jsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { groundHoleOverflowCircles } from "./pathData";
+import BubbleGroundHole from "./styled/BubbleGroundHole";
+
+export default React.memo(props => (
+  <g>
+    {groundHoleOverflowCircles.map(({ cx, cy, r }, idx) => (
+      <BubbleGroundHole key={`${cx}-${cy}-${r}`} animDelay={idx} cx={cx} cy={cy} r={r} {...props} />
+    ))}
+  </g>
+));
diff --git a/src/bubbles/BubblesGroundHoleTop.jsx b/src/bubbles/BubblesGroundHoleTop.jsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { groundHoleTopCircles } from "./pathData";
+import BubbleGroundHole from "./styled/BubbleGroundHole";
+
+export default React.memo(props => (
+  <g>
+    {groundHoleTopCircles.map(({ cx, cy, r }, idx) => (
+      <BubbleGroundHole key={`${cx}-${cy}-${r}`} animDelay={idx} cx={cx} cy={cy} r={r} {...props} />
+    ))}
+  </g>
+));
diff --git a/src/bubbles/BubblesWater.jsx b/src/bubbles/BubblesWater.jsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { waterCircles } from "./pathData";
+import BubbleFloating from "./styled/BubbleFloating";
+
+export default React.memo(props => (
+  <g>
+    {waterCircles.map(({ cx, cy, r }, idx) => (
+      <BubbleFloating key={`${cx}-${cy}-${r}`} animDelay={idx} cx={cx} cy={cy} r={r} {...props} />
+    ))}
+  </g>
+));
diff --git a/src/bubbles/index.js b/src/bubbles/index.js
@@ -0,0 +1,16 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import BubblesFishSwarm from "./BubblesFishSwarm";
+import BubblesGroundHoleCenter from "./BubblesGroundHoleCenter";
+import BubblesGroundHoleOverflow from "./BubblesGroundHoleOverflow";
+import BubblesGroundHoleTop from "./BubblesGroundHoleTop";
+import BubblesWater from "./BubblesWater";
+
+export { BubblesFishSwarm, BubblesGroundHoleCenter, BubblesGroundHoleOverflow, BubblesGroundHoleTop, BubblesWater };
diff --git a/src/bubbles/pathData.js b/src/bubbles/pathData.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+const fishSwarmCircles = [
+  { cx: 506.47, cy: 73.944, r: 1.659 },
+  { cx: 497.269, cy: 81.748, r: 1.021 },
+  { cx: 507.294, cy: 86.211, r: 1.021 },
+  { cx: 511.745, cy: 94.431, r: 1.539 }
+];
+
+const groundHoleCenterCircles = [
+  { cx: 474.314, cy: 512.314, r: 5.168 },
+  { cx: 496.762, cy: 520.93, r: 3.445 },
+  { cx: 488.382, cy: 533.275, r: 3.733 },
+  { cx: 492.046, cy: 551.104, r: 1.446 },
+  { cx: 480.436, cy: 567.336, r: 2.212 }
+];
+
+const groundHoleOverflowCircles = [
+  { cx: 374.469, cy: 530.736, r: 4.526 },
+  { cx: 406.118, cy: 552.25, r: 3.52 },
+  { cx: 413.85, cy: 574.08, r: 4.723 },
+  { cx: 390.16, cy: 591.476, r: 5.993 },
+  { cx: 396.37, cy: 623.139, r: 4.172 }
+];
+
+const groundHoleTopCircles = [
+  { cx: 610.294, cy: 396.273, r: 4.157 },
+  { cx: 587.557, cy: 417.539, r: 5.29 },
+  { cx: 617.032, cy: 432.512, r: 1.446 },
+  { cx: 605.422, cy: 448.744, r: 2.213 }
+];
+
+const waterCircles = [
+  { cx: 272.146, cy: 169.538, r: 2.466 },
+  { cx: 255.331, cy: 189.043, r: 3.138 },
+  { cx: 271.018, cy: 211.905, r: 1.337 }
+];
+
+export { fishSwarmCircles, groundHoleCenterCircles, groundHoleOverflowCircles, groundHoleTopCircles, waterCircles };
diff --git a/src/bubbles/styled/BubbleFloating.jsx b/src/bubbles/styled/BubbleFloating.jsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+import nord from "../../shared/nord";
+
+const animBubbleFloat = keyframes`
+  0% { opacity: 0; }
+  20% { opacity: 1; }
+  100% { opacity: 0; }
+`;
+
+const BubbleFloating = styled.circle`
+  animation: ${animBubbleFloat} 5s linear ${({ animDelay }) => animDelay}s infinite;
+  fill: ${nord.nord3};
+  opacity: 0;
+`;
+
+export default React.memo(props => <BubbleFloating {...props} />);
diff --git a/src/bubbles/styled/BubbleGroundHole.jsx b/src/bubbles/styled/BubbleGroundHole.jsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2019-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2019-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ocean Fractal
+ * Repository: https://github.com/arcticicestudio/arctic-ocean-fractal
+ * License:    MIT
+ */
+
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+import nord from "../../shared/nord";
+
+const animBubbleRiseUp = keyframes`
+  0% {
+    transform: translate3d(0.2%, 0, 0);
+    opacity: 0;
+  }
+
+  13% {
+    transform: translate3d(0.4%, -1%, 0);
+    opacity: 1;
+  }
+
+  20% { transform: translate3d(0.6%, -2%, 0) }
+  30% { transform: translate3d(0, -3%, 0); }
+  40% { transform: translate3d(0.4%, -4%, 0); }
+  50% { transform: translate3d(0.5%, -5%, 0); }
+  60% { transform: translate3d(0.6%, -6%, 0); }
+  70% {
+    transform: translate3d(0.7%, -7%, 0);
+    opacity: 0.4;
+  }
+
+  80% {
+    transform: translate3d(0.4%, -7%, 0);
+    opacity: 0.2;
+  }
+
+  90%,
+  100% {
+    transform: translate3d(0.2%, -8%, 0);
+    opacity: 0;
+  }
+`;
+
+const BubbleGroundHole = styled.circle`
+  animation: ${animBubbleRiseUp} 5s linear ${({ animDelay }) => animDelay}s infinite;
+  fill: ${nord.nord4};
+  opacity: 0;
+`;
+
+export default React.memo(props => <BubbleGroundHole {...props} />);