squircle

Make all the squircles you need, in the browser. https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

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

fix squircle alignment

Diffstat:
Msrc/App.vue | 11-----------
Msrc/components/GeneratorPreview.vue | 11++++++++++-
Msrc/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"