fix blob shape oveflow on change

Author: lokesh-coder

README.md

@@ -7,20 +7,22 @@
 
 </h3>
 
-<h4  align="center">Create beautiful blob shapes with minimal code. </h4>
+<h4  align="center">Generate beautiful blob shapes for web and flutter apps. </h4>
 
 &nbsp;
 
 <div class="highlight highlight-source-shell">
 <pre>
-<div align="center"><strong >Blobs App</strong></div>
+<div align="center"><strong >Blobs Generator</strong></div>
 <div align="center"><a align="center" href="https://blobs.app/">https://blobs.app/</a></div>
 </pre>
 </div>
 
 ### Preview
 
-![frame2-iMac](https://user-images.githubusercontent.com/1754676/83411638-46b9ea80-a436-11ea-92b2-60ba4e845003.png)
+![preview](https://user-images.githubusercontent.com/1754676/84493278-20f9d480-acc5-11ea-8667-ee0df8f35442.png)
+
+![preview2](https://user-images.githubusercontent.com/1754676/84492711-3a4e5100-acc4-11ea-942c-37f9cd802fcf.png)
 
 ### Blobs for flutter
 

src/app.scss

@@ -13,6 +13,7 @@ html body {
 
   #blobSvg {
     max-width: 500px;
+    overflow: visible;
   }
 
   .stroke {

src/assets/css/main.css

@@ -559,7 +559,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /**
@@ -6431,8 +6431,16 @@ video {
   clear: none;
 }
 
-.font-body {
-  font-family: Manrope;
+.font-sans {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.font-serif {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.font-mono {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 .font-hairline {
@@ -26377,8 +26385,16 @@ video {
     clear: none;
   }
 
-  .sm\:font-body {
-    font-family: Manrope;
+  .sm\:font-sans {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .sm\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .sm\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
   .sm\:font-hairline {
@@ -46322,8 +46338,16 @@ video {
     clear: none;
   }
 
-  .md\:font-body {
-    font-family: Manrope;
+  .md\:font-sans {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .md\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .md\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
   .md\:font-hairline {
@@ -66267,8 +66291,16 @@ video {
     clear: none;
   }
 
-  .lg\:font-body {
-    font-family: Manrope;
+  .lg\:font-sans {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .lg\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .lg\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
   .lg\:font-hairline {
@@ -86212,8 +86244,16 @@ video {
     clear: none;
   }
 
-  .xl\:font-body {
-    font-family: Manrope;
+  .xl\:font-sans {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .xl\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .xl\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
   .xl\:font-hairline {

src/components/actions/randomizer.jsx

@@ -3,7 +3,6 @@ import { view } from "@risingstack/react-easy-state";
 import Button from "../common/button";
 import { appStore } from "../../store";
 import { generator } from "../../services/generator";
-import animator from "../../services/animator";
 
 const Randomizer = view(() => {
   const changeBlob = () => {