diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34492129b..4366f4f54 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#561]
+  - **Description:** Update KLogo for new branding guidelines
+  - **Products impact:** Enables general use of KLogo for all frontend logo usage. Changes props API for square logo presentation.
+  - **Addresses:** Updates logo to new logo, adds all permissible alternates, adds animated form.
+  - **Components:** KLogo
+  - **Breaking:** Yes
+  - **Impacts a11y:** No
+  - **Guidance:** Rendering the Kolibri logo can now be done using the KLogo component, as well as the loading animation.
+
+[#561]: https://github.com/learningequality/kolibri-design-system/pull/561
+
 - [#580]
   - **Description:** Remove use of KResponsiveWindowMixin internally
   - **Products impact:** - none
diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue
index 9608d5a0c..a332183f0 100644
--- a/docs/common/DocsPageTemplate/SideNav/index.vue
+++ b/docs/common/DocsPageTemplate/SideNav/index.vue
@@ -8,7 +8,7 @@
     >
       <template if="loaded">
         <h1 class="header">
-          <file-svg src="./kolibri-logo.svg" class="logo" />
+          <KLogo altText="Design System" size="60" :showBackground="true" />
           <span class="header-text">Design System</span>
         </h1>
 
diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue
index cb09e6d8d..c39801023 100644
--- a/docs/pages/klogo.vue
+++ b/docs/pages/klogo.vue
@@ -2,27 +2,150 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
+      <p><code>KLogo</code> displays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.</p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <h3>Default display</h3>
       <p>Shows Kolibri logo.</p>
 
       <DocsShow>
         <KLogo
+          ref="defaultLogoNoBackground"
           altText="Kolibri Logo"
-          :height="150"
-          width="100%"
-          :maxWidth="150"
+          :size="150"
         />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoNoBackground')">
+            Save SVG
+          </KButton>
+        </div>
       </DocsShow>
       <DocsShowCode language="html">
         <KLogo
           altText="Kolibri logo"
-          :height="150"
-          width="100%"
-          :maxWidth="150"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with backgrounds</h3>
+      <p>Shows Kolibri logo with background.</p>
+
+      <DocsShow>
+        <KLogo
+          ref="defaultLogoWithBackground"
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="150"
+        />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoWithBackground')">
+            Save SVG
+          </KButton>
+        </div>
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <p>Shows Kolibri logo with rectangular background.</p>
+
+      <DocsShow>
+        <KLogo
+          ref="defaultLogoWithRectBackground"
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="150"
+        />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoWithRectBackground')">
+            Save SVG
+          </KButton>
+        </div>
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with animation</h3>
+      <p>Shows Kolibri logo with loading animation.</p>
+
+      <DocsShow>
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :size="150"
+        />
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with different color schemes</h3>
+      <p>Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.</p>
+
+      <DocsShow>
+        <template
+          v-for="colorScheme in ['monoBlack', 'monoWhite', 'monoPrimary', 'monoSecondary', 'whiteGrey', 'blackGrey']"
+        >
+          <p :key="`text${colorScheme}`">
+            Color scheme: {{ colorScheme }}
+          </p>
+          <KLogo
+            :ref="`${colorScheme}LogoWithBackground`"
+            :key="colorScheme"
+            class="halfsquare-background"
+            :colorScheme="colorScheme"
+            altText="Kolibri Logo"
+            :showBackground="true"
+            :size="150"
+          />
+          <div 
+            :key="`button${colorScheme}`"
+            style="width: 100%; text-align: center; display: none;"
+          >
+            <KButton @click="saveSVG(`${colorScheme}LogoWithBackground`)">
+              Save SVG
+            </KButton>
+          </div>
+        </template>
+      </DocsShow>
+
+      <h3>Dimensions</h3>
+
+      <p>
+        You can apply the most common dimensions to the image container via the props <DocsInternalLink href="/kimg#prop:size">
+          <code>size</code>
+        </DocsInternalLink>, <DocsInternalLink href="/kimg#prop:maxSize">
+          <code>maxSize</code>
+        </DocsInternalLink>, and <DocsInternalLink href="/kimg#prop:minSize">
+          <code>minSize</code>
+        </DocsInternalLink>. Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: <code>%, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw</code>. If you don't provide a unit, <code>px</code> will be used by default.
+      </p>
+
+      <DocsShowCode language="html">
+        <KLogo
+          altText="A hummingbird logo"
+          size="250px"
+          maxSize="10vw"
+          :minSize="25"
         />
       </DocsShowCode>
-    </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
       <h3>Alternative text</h3>
 
       <p>Alternative text (<code>altText</code>) is required for the logo image. When creating it, consider the following:</p>
@@ -32,13 +155,6 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
-      <ul>
-        <li>
-          <code>KLogo</code> is derived from <DocsLibraryLink component="KImg" /> and provides a subset of <code>KImg</code>'s API.
-        </li>
-      </ul>
-    </DocsPageSection>
   </DocsPageTemplate>
 
 </template>
@@ -46,6 +162,54 @@
 
 <script>
 
-  export default {};
+  // Note for developers, to utilize the saveSVG method, select all of:
+  // style="width: 100%; text-align: center; display: none;"
+  // and replace with:
+  // style="width: 100%; text-align: center;"
+  // we keep this hidden for future usage, but it doesn't need to be here all the time.
+
+  export default {
+    methods: {
+      saveSVG(refName) {
+        const svgElement = this.$refs[refName].$el || this.$refs[refName][0].$el;
+        // Get the SVG data as a string
+        const svgData = svgElement.outerHTML;
+        // Create a Blob from the SVG data
+        const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+        // Create a URL for the Blob
+        const url = URL.createObjectURL(blob);
+
+        // Create a temporary anchor (`<a>`) element
+        const downloadLink = document.createElement('a');
+        // Set the download attribute to the desired file name
+        downloadLink.download = `${refName}.svg`;
+        // Set the href to the Blob URL
+        downloadLink.href = url;
+        // Append the anchor to the document
+        document.body.appendChild(downloadLink);
+        // Programmatically click the anchor to trigger the download
+        downloadLink.click();
+        // Clean up by revoking the Blob URL and removing the anchor from the document
+        URL.revokeObjectURL(url);
+        downloadLink.remove();
+      },
+    },
+  };
 
 </script>
+
+
+<style scoped>
+
+  .halfsquare-background {
+    background-size: 10px 10px; /* size of the squares */
+    background-image: 
+      linear-gradient(45deg, #ffffff 50%, #F5F5F5 50%),
+      linear-gradient(45deg, #F5F5F5 50%, #ffffff 50%);
+    background-position:
+      0 0, /* this is the position of the first pattern */
+      5px 5px; /* this position offsets the second pattern to create the checker effect */
+    background-repeat: repeat;
+  }
+
+</style>
\ No newline at end of file
diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue
index 20b07acf9..1334a7bea 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -53,6 +53,8 @@
 
 <script>
 
+  import { validateAndFormatUnits } from './utils';
+
   const ScaleTypes = {
     CENTER_INSIDE: 'centerInside',
     CONTAIN: 'contain',
@@ -226,12 +228,12 @@
             backgroundColor,
             borderRadius,
             overflow: 'hidden',
-            height: this.validateAndFormatUnits(this.height),
-            width: this.validateAndFormatUnits(this.width),
-            maxHeight: this.validateAndFormatUnits(this.maxHeight),
-            minHeight: this.validateAndFormatUnits(this.minHeight),
-            maxWidth: this.validateAndFormatUnits(this.maxWidth),
-            minWidth: this.validateAndFormatUnits(this.minWidth),
+            height: validateAndFormatUnits(this.height),
+            width: validateAndFormatUnits(this.width),
+            maxHeight: validateAndFormatUnits(this.maxHeight),
+            minHeight: validateAndFormatUnits(this.minHeight),
+            maxWidth: validateAndFormatUnits(this.maxWidth),
+            minWidth: validateAndFormatUnits(this.minWidth),
           },
           ratioContainer: {
             display: 'block',
@@ -358,36 +360,6 @@
       }
     },
     methods: {
-      validateAndFormatUnits(propValue) {
-        if (propValue) {
-          if (!isNaN(propValue)) {
-            return `${propValue}px`;
-          } else {
-            // split numbers apart from units
-            const [, ...arr] = propValue.match(/(\d*\.?\d+)([a-zA-Z | %]*)/);
-            const validUnits = [
-              '%',
-              'cm',
-              'em',
-              'ex',
-              'ch',
-              'in',
-              'lh',
-              'mm',
-              'px',
-              'rem',
-              'rlh',
-              'vh',
-              'vw',
-            ];
-
-            // if made up of valid numbers and valid units
-            if (!isNaN(arr[0]) && validUnits.includes(arr[1])) {
-              return propValue;
-            }
-          }
-        }
-      },
       onError(event) {
         /**
          * Emitted when the image fails to load. The DOM event that triggered the error is available in the payload.
diff --git a/lib/KImg/utils.js b/lib/KImg/utils.js
new file mode 100644
index 000000000..baea41f1d
--- /dev/null
+++ b/lib/KImg/utils.js
@@ -0,0 +1,30 @@
+export function validateAndFormatUnits(propValue) {
+  if (propValue) {
+    if (!isNaN(propValue)) {
+      return `${propValue}px`;
+    } else {
+      // split numbers apart from units
+      const [, ...arr] = propValue.match(/(\d*\.?\d+)([a-zA-Z | %]*)/);
+      const validUnits = [
+        '%',
+        'cm',
+        'em',
+        'ex',
+        'ch',
+        'in',
+        'lh',
+        'mm',
+        'px',
+        'rem',
+        'rlh',
+        'vh',
+        'vw',
+      ];
+
+      // if made up of valid numbers and valid units
+      if (!isNaN(arr[0]) && validUnits.includes(arr[1])) {
+        return propValue;
+      }
+    }
+  }
+}
diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue
index b178eef10..88236428e 100644
--- a/lib/KLogo/index.vue
+++ b/lib/KLogo/index.vue
@@ -1,22 +1,167 @@
 <template>
 
-  <KImg
-    :src="logo"
-    :altText="altText"
-    :height="height"
-    :width="width"
-    :maxHeight="maxHeight"
-    :minHeight="minHeight"
-    :maxWidth="maxWidth"
-    :minWidth="minWidth"
-  />
+  <svg
+    :class="{ animate }"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    :width="validateAndFormatUnits(size)"
+    :height="validateAndFormatUnits(size)"
+    :max-width="validateAndFormatUnits(maxSize)"
+    :min-width="validateAndFormatUnits(minSize)"
+    :max-height="validateAndFormatUnits(maxSize)"
+    :min-height="validateAndFormatUnits(minSize)"
+    viewBox="0 0 200 200"
+    fill="none"
+    :aria-label="altText"
+  >
+    <title>{{ altText }}</title>
+    <use v-if="showBackground" :href="backgroundHref" :fill="blobColor" :mask="applyMask ? 'url(#cutout-mask)' : null" />
+    <use v-if="!applyMask" href="#body" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#right-wing-inner" class="wing-inner" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#right-wing-middle" class="wing-middle" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#right-wing-outer" class="wing-outer" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#left-wing-inner" class="wing-inner" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#left-wing-middle" class="wing-middle" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#left-wing-outer" class="wing-outer" :stroke="strokeColor" />
+    <defs>
+      <g id="blob-background">
+        <path
+          d="M0.320842 109.741C-1.24406 129.508 2.71248 151.014 16.6884 165.088C22.7511
+          171.176 30.3394 175.515 38.1148 179.132C86.5579 201.626 153.445 202.012 187.716
+          156.301C206.721 130.98 198.68 92.0596 185.846 65.0188C174.783 41.704 155.65 22.0559
+          132.039 11.797C99.2149 -2.50425 69.157 3.26763 43.0949 25.8313C18.8241 46.8631
+          2.86012 77.5805 0.320842 109.741Z"
+        />
+      </g>
+      <g id="rect-background">
+        <rect width="200" height="200" rx="20" ry="20" />
+      </g>
+      <g id="body">
+        <path
+          d="M105 133.5C106.125 135.248 111.046 140.575 113.5 145.5C115.084 148.678 116.043
+          151.879 115.5 154.5C114.566 159.01 110.376 162.409 106.255 159.3C104.108 157.681
+          102.698 154.847 102.209 152.3C101.265 147.375 102.751 141.099 105 133.5ZM105 133.5C92
+          121.5 80.5894 106.993 86.0001 88C87.8773 81.4102 91.5066 76.5374 92.5907 67.8576C92.9229
+          65.1979 92.0525 63.0863 92.5907 60.3303C93.1958 57.2315 95.7567 53.5948 99.6458 52.8029C101.94
+          52.3358 104.538 52.8993 106.701 54.6847C108.251 55.9644 109.53 57.5443 109.801 59.5775C110.137
+          62.0918 109.848 65.8372 109.969 68.8091C110.064 71.1567 111.01 74.3275 111.846 76.5C123.727
+          101.615 117 110.5 105 133.5ZM102.455 52.7427C104.844 53.1793 107.316 54.5807 111.846
+          51.9511C117.52 46.8315 124.682 39.4836 129.898 34.0323C123.952 40.1759 122.341 41.8109
+          114.35 49.692C112.985 51.7283 111.085 54.0494 110.647 55.8138C110.089 58.0588 109.812
+          61.4633 109.967 63.8191"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <g id="right-wing-inner">
+        <path
+          d="M128.866 81.1332C128.866 81.1332 136.087 86.4496
+          136.087 97.0824C136.087 107.715 128.866 112.875 128.866 112.875"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <g id="right-wing-middle">
+        <path
+          d="M140.213 70.8939C140.213 70.8939 151.559 79.6402
+          151.559 97.1328C151.559 114.625 140.213 123.114 140.213 123.114"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <g id="right-wing-outer">
+        <path
+          d="M150.528 60.6545C150.528 60.6545 166 72.8308 166 97.1832C166
+          121.536 150.528 133.354 150.528 133.354"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <g id="left-wing-inner">
+        <path
+          d="M72.1338 81.1332C72.1338 81.1332 64.9133 86.4496
+          64.9133 97.0824C64.9133 107.715 72.1338 112.875 72.1338 112.875"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <g id="left-wing-middle">
+        <path
+          d="M60.7874 70.8939C60.7874 70.8939 49.4409 79.6402
+          49.4409 97.1328C49.4409 114.625 60.7874 123.114 60.7874 123.114"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <g id="left-wing-outer">
+        <path
+          d="M50.4724 60.6545C50.4724 60.6545 35 72.8308 35 97.1832C35
+          121.536 50.4724 133.354 50.4724 133.354"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <mask id="cutout-mask">
+        <!-- Start with a white rectangle as the base of the mask -->
+        <rect x="0" y="0" width="200" height="200" fill="white" />
+        <!-- Cut out the shapes that make up the logo from the mask -->
+        <use href="#body" stroke="black" />
+        <use href="#right-wing-inner" class="wing-inner" stroke="black" />
+        <use href="#right-wing-middle" class="wing-middle" stroke="black" />
+        <use href="#right-wing-outer" class="wing-outer" stroke="black" />
+        <use href="#left-wing-inner" class="wing-inner" stroke="black" />
+        <use href="#left-wing-middle" class="wing-middle" stroke="black" />
+        <use href="#left-wing-outer" class="wing-outer" stroke="black" />
+      </mask>
+    </defs>
+  </svg>
 
 </template>
 
 
 <script>
 
-  import kolibriLogo from './kolibri-logo.svg';
+  import { validateAndFormatUnits } from '../KImg/utils';
+  // We do not retheme the Kolibri logo, so we always reference default colors here
+  // rather than using the dynamic branding or themeing.
+  import { defaultBrandColors } from '../styles/colorsDefault';
+  import materialColors from '../styles/colorsMaterial';
+
+  const colorScheme = {
+    default: {
+      blobColor: defaultBrandColors.secondary.v_1000,
+      strokeColor: defaultBrandColors.primary.v_1000,
+    },
+    monoBlack: {
+      blobColor: materialColors.black,
+    },
+    monoWhite: {
+      blobColor: materialColors.white,
+    },
+    monoPrimary: {
+      blobColor: defaultBrandColors.primary.v_1000,
+    },
+    monoSecondary: {
+      blobColor: defaultBrandColors.secondary.v_1000,
+    },
+    whiteGrey: {
+      blobColor: materialColors.grey.v_200,
+      strokeColor: materialColors.white,
+    },
+    blackGrey: {
+      blobColor: materialColors.grey.v_200,
+      strokeColor: materialColors.black,
+    },
+  };
+
+  const backgroundStyles = ['blob', 'rect'];
 
   export default {
     name: 'KLogo',
@@ -30,53 +175,151 @@
         default: '',
       },
       /**
-       * Sets the height for the logo
+       * Sets the size for the logo
        */
-      height: {
+      size: {
         type: [Number, String],
         default: undefined,
       },
       /**
-       * Sets the width for the logo
+       * Sets the maximum size for the logo
        */
-      width: {
+      maxSize: {
         type: [Number, String],
         default: undefined,
       },
       /**
-       * Sets the maximum height for the logo
+       * Sets the minimum size for the logo
        */
-      maxHeight: {
+      minSize: {
         type: [Number, String],
         default: undefined,
       },
       /**
-       * Sets the minimum height for the logo
+       * Whether to show the blob background for the logo
        */
-      minHeight: {
-        type: [Number, String],
-        default: undefined,
+      showBackground: {
+        type: Boolean,
+        default: false,
       },
       /**
-       * Sets the maximum width for the logo
+       * The background style for the logo: blob, rect
        */
-      maxWidth: {
-        type: [Number, String],
-        default: undefined,
+      backgroundStyle: {
+        type: String,
+        default: 'blob',
+        validator: value => backgroundStyles.includes(value),
       },
       /**
-       * 	Sets the minimum width for the logo
+       * The color scheme for the logo: default, monoBlack, monoWhite, monoPrimary, monoSecondary, whiteGrey, blackGrey
        */
-      minWidth: {
-        type: [Number, String],
-        default: undefined,
+      colorScheme: {
+        type: String,
+        default: 'default',
+        validator: value => colorScheme[value] !== undefined,
+      },
+      /**
+       * Whether to show the loading animation for the logo - only works for non-mono colorSchemes
+       */
+      animate: {
+        type: Boolean,
+        default: false,
       },
     },
     computed: {
-      logo() {
-        return kolibriLogo;
+      scheme() {
+        if (!this.showBackground) {
+          return colorScheme.default;
+        }
+        return colorScheme[this.colorScheme] || colorScheme.default;
+      },
+      applyMask() {
+        return this.colorScheme.startsWith('mono');
+      },
+      blobColor() {
+        return this.scheme.blobColor;
+      },
+      strokeColor() {
+        return this.scheme.strokeColor;
+      },
+      backgroundHref() {
+        return `#${this.backgroundStyle || 'blob'}-background`;
       },
     },
+    methods: {
+      validateAndFormatUnits,
+    },
   };
 
 </script>
+
+
+<style>
+
+  .animate .wing-inner {
+    animation: flapInner 2s 1.2s both infinite;
+  }
+
+  .animate .wing-middle {
+    animation: flapMiddle 2s 1.2s both infinite;
+  }
+
+  .animate .wing-outer {
+    animation: flapOuter 2s 1.2s both infinite;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes flapInner {
+    0% {
+      opacity: 0;
+    }
+    10% {
+      opacity: 1;
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes flapMiddle {
+    0% {
+      opacity: 0;
+    }
+    20% {
+      opacity: 0;
+    }
+    40% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes flapOuter {
+    0% {
+      opacity: 0;
+    }
+    40% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/lib/KLogo/kolibri-logo.svg b/lib/KLogo/kolibri-logo.svg
deleted file mode 100644
index f26d5bdfc..000000000
--- a/lib/KLogo/kolibri-logo.svg
+++ /dev/null
@@ -1,178 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.6 193.6">
-  <path fill="#99B1A3" d="M113.7 35.5l7.7 6.7L127 34z"/>
-  <path fill="#C7E1D1" d="M131.9 41.9L127 34l-5.6 8.2z"/>
-  <path fill="#87AFA6" d="M113.7 35.5l-9.8 11.2 17.5-4.5z"/>
-  <path fill="#B8C7C1" d="M101.6 59.6l19.8-17.4-17.5 4.5z"/>
-  <path fill="#ABDCD2" d="M132.9 60.7l-1-18.8-10.5.3z"/>
-  <path fill="#BDD6CE" d="M122.7 63.5l-1.3-21.3-19.8 17.4z"/>
-  <path fill="#A0D0C6" d="M132.9 60.7l-10.2 2.8-1.3-21.3z"/>
-  <path fill="#7C8886" d="M99.6 65.5l23.1-2-21.1-3.9z"/>
-  <path fill="#91AAAE" d="M122.7 63.5L92.8 76.3l6.8-10.8z"/>
-  <path fill="#7BAEA9" d="M118.5 81l-25.7-4.7 29.9-12.8z"/>
-  <path fill="#C8E8E1" d="M132.9 60.7L118.5 81l4.2-17.5z"/>
-  <path fill="#DBEFE5" d="M140.6 77.9L118.5 81l14.4-20.3z"/>
-  <path fill="#9BC8D1" d="M117.8 117.3l.7-36.3-25.7-4.7z"/>
-  <path fill="#A1AEBC" d="M93.8 112.6l24 4.7-25-41z"/>
-  <path fill="#C5E0DF" d="M140.6 77.9l-22.8 39.4.7-36.3z"/>
-  <path fill="#DAE7E7" d="M140.6 112.9l-22.8 4.4 22.8-39.4z"/>
-  <path fill="#B8BAC8" d="M117.7 128.9l22.9-16-22.8 4.4z"/>
-  <path fill="#8E9BAF" d="M93.8 112.6l23.9 16.3.1-11.6z"/>
-  <path fill="#8B7F96" d="M108.2 135.3l9.5-6.4-23.9-16.3z"/>
-  <path fill="#766C81" d="M126.9 135.3l-9.2-6.4-9.5 6.4z"/>
-  <path fill="#97A2B1" d="M126.9 135.3l-9.2-6.4 22.9-16z"/>
-  <path fill="#9F96AE" d="M118.6 141.9l8.3-6.6h-18.7z"/>
-  <path fill="#9792B5" d="M93.5 172.8l25.1-30.9-10.4-6.6z"/>
-  <path fill="#ABA0CB" d="M112.2 186.2l-18.7-13.3 25.1-31z"/>
-  <path fill="#C3B1D6" d="M124.2 186.1l-12 .1 6.4-44.3z"/>
-  <path fill="#DCC0DD" d="M142.6 173l-18.4 13.1-5.6-44.2z"/>
-  <path fill="#B8CEE7" d="M126.9 135.3l15.7 37.7-24-31.1z"/>
-  <path fill="#A4B398" d="M176.2 7.4l-34.8 16.8-.1 6.2z"/>
-  <path fill="#7E836C" d="M141.4 24.2l-.1 6.2-9.4 11.5z"/>
-  <path fill="#A2AA97" d="M127 34l14.4-9.8-9.5 17.7z"/>
-  <g>
-    <path fill="#7AA9AE" d="M149.8 68.7l9.2-8.8-2.9 12.4-6.3-3.6"/>
-    <path fill="#768E98" d="M168.1 67.9l-9.1-8-2.9 12.4z"/>
-    <path fill="#DAE6F3" d="M160.8 77.9l-4.7-5.6 12-4.4z"/>
-    <path fill="#7FA6B0" d="M173.3 77.2l-5.2-9.3-7.3 10z"/>
-    <path fill="#7B8B9B" d="M163 84.2l-2.2-6.3 12.5-.7z"/>
-    <path fill="#D9DFF1" d="M175.2 87.8l-1.9-10.6-10.3 7z"/>
-    <path fill="#83A3B1" d="M163.1 91l-.1-6.8 12.2 3.6z"/>
-    <path fill="#818A9F" d="M173.3 98.1l1.9-10.3-12.1 3.2z"/>
-    <path fill="#D8D8ED" d="M161.2 96.7l1.9-5.7 10.2 7.1z"/>
-    <path fill="#889DB2" d="M168.4 107.2l4.9-9.1-12.1-1.4z"/>
-    <path fill="#8289A0" d="M157.1 102.7l4.1-6 7.2 10.5z"/>
-    <path fill="#D7D2E9" d="M159 115.3l9.4-8.1-11.3-4.5z"/>
-    <path fill="#869FB3" d="M149.8 106.5l7.3-3.8 1.9 12.6z"/>
-    <g>
-      <path fill="#6B949B" d="M190.6 39.6l-6.2-3.8 9.3-8.9z"/>
-      <path fill="#56777D" d="M202.6 33.8l-8.9-6.9-3.1 12.7z"/>
-      <path fill="#94C7D0" d="M197.4 45.4l-6.8-5.8 12-5.8z"/>
-      <path fill="#70939D" d="M209.8 41.4l-7.2-7.6-5.2 11.6z"/>
-      <path fill="#5D7581" d="M203.3 52.4l-5.9-7 12.4-4z"/>
-      <path fill="#98C1D0" d="M216.1 49.7l-6.3-8.3-6.5 11z"/>
-      <path fill="#7490A1" d="M207.4 58.8l-4.1-6.4 12.8-2.7z"/>
-      <path fill="#637487" d="M220.6 58.3l-4.5-8.6-8.7 9.1z"/>
-      <path fill="#9BBACF" d="M211.1 67.1l-3.7-8.3 13.2-.5z"/>
-      <path fill="#7C8CA6" d="M224.3 68.6l-3.7-10.3-9.5 8.8z"/>
-      <path fill="#6D748F" d="M214 77.7l-2.9-10.6 13.2 1.5z"/>
-      <path fill="#A0B1D0" d="M226.4 79.8l-2.1-11.2-10.3 9.1z"/>
-      <path fill="#7A7296" d="M226.9 91.3l-.5-11.5-11.5 6z"/>
-      <path fill="#8389AA" d="M214 77.7l.9 8.1 11.5-6z"/>
-      <path fill="#A3ABCF" d="M214.4 95.8l.5-10 12 5.5z"/>
-      <path fill="#8C85AE" d="M225.8 101.5l1.1-10.2-12.5 4.5z"/>
-      <path fill="#7E729B" d="M212.6 104.6l1.8-8.8 11.4 5.7z"/>
-      <path fill="#A6A2CD" d="M223.5 110.4l2.3-8.9-13.2 3.1z"/>
-      <path fill="#8F84AE" d="M209.8 112.8l2.8-8.2 10.9 5.8z"/>
-      <path fill="#8571A0" d="M219.4 120.5l4.1-10.1-13.7 2.4z"/>
-      <path fill="#A79FCE" d="M206 119.9l3.8-7.1 9.6 7.7z"/>
-      <path fill="#957FB3" d="M214 129.8l5.4-9.3-13.4-.6z"/>
-      <path fill="#8670A1" d="M201.9 125.8l4.1-5.9 8 9.9z"/>
-      <path fill="#AA99C9" d="M207.8 137.3l6.2-7.5-12.1-4z"/>
-      <path fill="#9480B3" d="M196.4 131.5l5.5-5.7 5.9 11.5z"/>
-      <path fill="#8E70A7" d="M202.1 143.1l5.7-5.8-11.4-5.8z"/>
-      <path fill="#A99ACA" d="M191.3 135.9l5.1-4.4 5.7 11.6z"/>
-      <path fill="#987FB4" d="M194.2 148.6l7.9-5.5-10.6-7.2z"/>
-      <path fill="#866FA0" d="M185.3 140l6.2-4.1 2.7 12.7z"/>
-    </g>
-    <g>
-      <path fill="#8AB7C4" d="M182.9 46.9l-5.8-4.1-3 11.5z"/>
-      <path fill="#A5DDE9" d="M178.6 58.3l-4.5-4 8.8-7.4z"/>
-      <path fill="#6A909A" d="M189.8 53.3l-6.9-6.4-4.3 11.4z"/>
-      <path fill="#87BCC4" d="M183.1 63.2l-4.5-4.9 11.2-5z"/>
-      <path fill="#A7CCE5" d="M195.7 61.7l-5.9-8.4-6.7 9.9z"/>
-      <path fill="#708E9D" d="M187.4 70.4l-4.3-7.2 12.6-1.5z"/>
-      <path fill="#A7D5E7" d="M200.1 71.6l-4.4-9.9-8.3 8.7z"/>
-      <path fill="#8FB0C5" d="M190.1 78.4l-2.7-8 12.7 1.2z"/>
-      <path fill="#778AA0" d="M202.1 82l-12-3.6 10-6.8z"/>
-      <path fill="#A7CCE5" d="M191.1 88.1l-1-9.7 12 3.6z"/>
-      <path fill="#94A7C6" d="M201.8 94.3l-10.7-6.2 11-6.1z"/>
-      <path fill="#7E88A6" d="M189.7 97.2l1.4-9.1 10.7 6.2z"/>
-      <path fill="#AAC1E3" d="M199.2 104.6l-9.5-7.4 12.1-2.9z"/>
-      <path fill="#95A5C5" d="M186.8 104.3l2.9-7.1 9.5 7.4z"/>
-      <path fill="#8485A8" d="M194.7 113.8l4.5-9.2-12.4-.3z"/>
-      <path fill="#ABC0E3" d="M183.3 110.4l3.5-6.1 7.9 9.5z"/>
-      <path fill="#9A9FC7" d="M188.9 121.3l5.8-7.5-11.4-3.4z"/>
-      <path fill="#8585A9" d="M178.9 115.3l4.4-4.9 5.6 10.9z"/>
-      <path fill="#9A9FC7" d="M182.8 126.9l6.1-5.6-10-6z"/>
-      <path fill="#99A2C7" d="M173.3 119.8l5.6-4.5 3.9 11.6z"/>
-      <path fill="#AEB8DE" d="M176.2 131.4l6.6-4.5-9.5-7.1z"/>
-      <path fill="#ABBFE3" d="M167.2 123.2l6.1-3.4 2.9 11.6z"/>
-      <g>
-        <path fill="#6A909A" d="M174.1 54.3l-5.7-3.2 8.7-8.3z"/>
-      </g>
-    </g>
-  </g>
-  <g>
-    <path fill="#7AA9AE" d="M83 68.7l-9.1-8.8 2.8 12.4 6.3-3.6"/>
-    <path fill="#768E98" d="M64.8 67.9l9.1-8 2.8 12.4z"/>
-    <path fill="#DAE6F3" d="M72 77.9l4.7-5.6-11.9-4.4z"/>
-    <path fill="#7FA6B0" d="M59.6 77.2l5.2-9.3 7.2 10z"/>
-    <path fill="#7B8B9B" d="M69.8 84.2l2.2-6.3-12.4-.7z"/>
-    <path fill="#D9DFF1" d="M57.7 87.8l1.9-10.6 10.2 7z"/>
-    <path fill="#83A3B1" d="M69.8 91v-6.8l-12.1 3.6z"/>
-    <path fill="#818A9F" d="M59.5 98.1l-1.8-10.3L69.8 91z"/>
-    <path fill="#D8D8ED" d="M71.6 96.7L69.8 91l-10.3 7.1z"/>
-    <path fill="#889DB2" d="M64.4 107.2l-4.9-9.1 12.1-1.4z"/>
-    <path fill="#8289A0" d="M75.8 102.7l-4.2-6-7.2 10.5z"/>
-    <path fill="#D7D2E9" d="M73.8 115.3l-9.4-8.1 11.4-4.5z"/>
-    <path fill="#869FB3" d="M83.1 106.5l-7.3-3.8-2 12.6z"/>
-    <g>
-      <path fill="#6B949B" d="M42.3 39.6l6.1-3.8-9.2-8.9z"/>
-      <path fill="#56777D" d="M30.3 33.8l8.9-6.9 3.1 12.7z"/>
-      <path fill="#94C7D0" d="M35.5 45.4l6.8-5.8-12-5.8z"/>
-      <path fill="#70939D" d="M23 41.4l7.3-7.6 5.2 11.6z"/>
-      <path fill="#5D7581" d="M29.6 52.4l5.9-7-12.5-4z"/>
-      <path fill="#98C1D0" d="M16.8 49.7l6.2-8.3 6.6 11z"/>
-      <path fill="#7490A1" d="M25.5 58.8l4.1-6.4-12.8-2.7z"/>
-      <path fill="#637487" d="M12.2 58.3l4.6-8.6 8.7 9.1z"/>
-      <path fill="#9BBACF" d="M21.8 67.1l3.7-8.3-13.3-.5z"/>
-      <path fill="#7C8CA6" d="M8.5 68.6l3.7-10.3 9.6 8.8z"/>
-      <path fill="#6D748F" d="M18.9 77.7l2.9-10.6-13.3 1.5z"/>
-      <path fill="#A0B1D0" d="M6.4 79.8l2.1-11.2 10.4 9.1z"/>
-      <path fill="#7A7296" d="M6 91.3l.4-11.5 11.5 6z"/>
-      <path fill="#8389AA" d="M18.9 77.7l-1 8.1-11.5-6z"/>
-      <path fill="#A3ABCF" d="M18.4 95.8l-.5-10L6 91.3z"/>
-      <path fill="#8C85AE" d="M7.1 101.5L6 91.3l12.4 4.5z"/>
-      <path fill="#7E729B" d="M20.2 104.6l-1.8-8.8-11.3 5.7z"/>
-      <path fill="#A6A2CD" d="M9.3 110.4l-2.2-8.9 13.1 3.1z"/>
-      <path fill="#8F84AE" d="M23 112.8l-2.8-8.2-10.9 5.8z"/>
-      <path fill="#8571A0" d="M13.5 120.5l-4.2-10.1 13.7 2.4z"/>
-      <path fill="#A79FCE" d="M26.9 119.9l-3.9-7.1-9.5 7.7z"/>
-      <path fill="#957FB3" d="M18.9 129.8l-5.4-9.3 13.4-.6z"/>
-      <path fill="#8670A1" d="M31 125.8l-4.1-5.9-8 9.9z"/>
-      <path fill="#AA99C9" d="M25.1 137.3l-6.2-7.5 12.1-4z"/>
-      <path fill="#9480B3" d="M36.4 131.5l-5.4-5.7-5.9 11.5z"/>
-      <path fill="#8E70A7" d="M30.8 143.1l-5.7-5.8 11.3-5.8z"/>
-      <path fill="#A99ACA" d="M41.5 135.9l-5.1-4.4-5.6 11.6z"/>
-      <path fill="#987FB4" d="M38.6 148.6l-7.8-5.5 10.6-7.2z"/>
-      <path fill="#866FA0" d="M47.6 140l-6.2-4.1-2.8 12.7z"/>
-    </g>
-    <g>
-      <path fill="#8AB7C4" d="M50 46.9l5.7-4.1 3.1 11.5z"/>
-      <path fill="#A5DDE9" d="M54.2 58.3l4.6-4-8.8-7.4z"/>
-      <path fill="#6A909A" d="M43.1 53.3l6.9-6.4 4.2 11.4z"/>
-      <path fill="#87BCC4" d="M49.8 63.2l4.4-4.9-11.1-5z"/>
-      <path fill="#A7CCE5" d="M37.1 61.7l6-8.4 6.7 9.9z"/>
-      <path fill="#708E9D" d="M45.5 70.4l4.3-7.2-12.7-1.5z"/>
-      <path fill="#A7D5E7" d="M32.7 71.6l4.4-9.9 8.4 8.7z"/>
-      <path fill="#8FB0C5" d="M42.8 78.4l2.7-8-12.8 1.2z"/>
-      <path fill="#778AA0" d="M30.8 82l12-3.6-10.1-6.8z"/>
-      <path fill="#A7CCE5" d="M41.8 88.1l1-9.7-12 3.6z"/>
-      <path fill="#94A7C6" d="M31.1 94.3l10.7-6.2-11-6.1z"/>
-      <path fill="#7E88A6" d="M43.2 97.2l-1.4-9.1-10.7 6.2z"/>
-      <path fill="#AAC1E3" d="M33.6 104.6l9.6-7.4-12.1-2.9z"/>
-      <path fill="#95A5C5" d="M46.1 104.3l-2.9-7.1-9.6 7.4z"/>
-      <path fill="#8485A8" d="M38.2 113.8l-4.6-9.2 12.5-.3z"/>
-      <path fill="#ABC0E3" d="M49.6 110.4l-3.5-6.1-7.9 9.5z"/>
-      <path fill="#9A9FC7" d="M43.9 121.3l-5.7-7.5 11.4-3.4z"/>
-      <path fill="#8585A9" d="M53.9 115.3l-4.3-4.9-5.7 10.9z"/>
-      <path fill="#9A9FC7" d="M50.1 126.9l-6.2-5.6 10-6z"/>
-      <path fill="#99A2C7" d="M59.5 119.8l-5.6-4.5-3.8 11.6z"/>
-      <path fill="#AEB8DE" d="M56.7 131.4l-6.6-4.5 9.4-7.1z"/>
-      <path fill="#ABBFE3" d="M65.7 123.2l-6.2-3.4-2.8 11.6z"/>
-      <g>
-        <path fill="#6A909A" d="M58.8 54.3l5.7-3.2-8.8-8.3z"/>
-      </g>
-    </g>
-  </g>
-</svg>