squircle

commit d4ce8676cc4ecde0cc92d38b9c59192c7518725f
parent d75c71a7bf7d1307894eb9e623dbe88e29119d87
Author: George Francis <georgedoescode@gmail.com>
Date:   Thu,  9 Jul 2020 17:45:30 +0100

fix squircle alignment

Diffstat:
M
src/App.vue
 | 
11
-----------
M
src/components/GeneratorPreview.vue
 | 
11
++++++++++-
M
src/components/TheGenerator.vue
 | 
8
++++++--

3 files changed, 16 insertions(+), 14 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -42,17 +42,6 @@ export default {
                         downloaded to your computer ready to use in your design
                         software of choice (Figma, Sketch, Framer, etc)
                     </p>
-                    <p class="longform-paragraph">
-                        Wondering WTF a squircle actually is? Check out
-                        <a href="https://youtu.be/z86cx2A4_3E"
-                            >this awesome video
-                        </a>
-                        by Dan Shiffman or
-                        <a href="https://mathworld.wolfram.com/Squircle.html"
-                            >this page</a
-                        >
-                        on Wolfram MathWorld.
-                    </p>
                     <p class="longform-paragraph">Enjoy! ❤️</p>
                 </div>
             </div>
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -10,6 +10,10 @@ export default {
             type: String,
             required: true,
         },
+        scale: {
+            type: String,
+            required: true,
+        },
     },
 };
 </script>
@@ -23,7 +27,12 @@ export default {
             version="1.1"
             :fill="fill"
         >
-            <path :d="path" />
+            <path
+                :d="path"
+                :transform="`translate(${(200 - scale) / 2} ${
+                    (200 - scale) / 2
+                })`"
+            />
         </svg>
     </div>
 </template>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -12,7 +12,7 @@ export default {
         return {
             squircleOpts: {
                 curvature: 0.5,
-                scale: 100,
+                scale: '100',
                 fill: '#1f2933',
             },
             path: '',
@@ -52,7 +52,11 @@ export default {
 
 <template>
     <div class="generator">
-        <GeneratorPreview :path="path" :fill="squircleOpts.fill" />
+        <GeneratorPreview
+            :path="path"
+            :fill="squircleOpts.fill"
+            :scale="squircleOpts.scale"
+        />
         <GeneratorControls
             :initial-fill="squircleOpts.fill"
             @controls-changed="handleControlChange"