squircle

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

TheGenerator.vue (2802B)

      1 <script>
      2 import GeneratorPreview from './GeneratorPreview.vue';
      3 import GeneratorControls from './GeneratorControls.vue';
      4 
      5 export default {
      6     name: 'TheGenerator',
      7     components: {
      8         GeneratorPreview,
      9         GeneratorControls,
     10     },
     11     data() {
     12         return {
     13             squircleOpts: {
     14                 curvature: 0.75,
     15                 scale: 150,
     16                 rotation: 0,
     17                 fill: '#FADB5F',
     18             },
     19             path: '',
     20         };
     21     },
     22     mounted() {
     23         this.setPath(
     24             this.squircleOpts.scale,
     25             this.squircleOpts.scale,
     26             this.squircleOpts.curvature
     27         );
     28     },
     29     methods: {
     30         setPath(w = 100, h = 100, curvature = 0.5) {
     31             const curveWidth = (w / 2) * (1 - curvature);
     32             const curveHeight = (h / 2) * (1 - curvature);
     33 
     34             this.path = `
     35                 M 0, ${h / 2}
     36                 C 0, ${curveWidth} ${curveHeight}, 0 ${w / 2}, 0
     37                 S ${w}, ${curveHeight} ${w}, ${h / 2}
     38                     ${w - curveWidth}, ${h - 0} ${w / 2}, ${h}
     39                     0, ${w - curveHeight} 0, ${h / 2}
     40             `;
     41         },
     42         handleControlChange({ id, value }) {
     43             if (id === 'scale' || id === 'rotation' || id === 'curvature')
     44                 value = parseFloat(value);
     45             this.squircleOpts[id] = value;
     46 
     47             this.setPath(
     48                 this.squircleOpts.scale,
     49                 this.squircleOpts.scale,
     50                 this.squircleOpts.curvature
     51             );
     52         },
     53     },
     54 };
     55 </script>
     56 
     57 <template>
     58     <div class="generator">
     59         <GeneratorPreview
     60             :path="path"
     61             :fill="squircleOpts.fill"
     62             :scale="squircleOpts.scale"
     63             :rotation="squircleOpts.rotation"
     64         />
     65         <GeneratorControls
     66             :initial-fill="squircleOpts.fill"
     67             :scale="squircleOpts.scale"
     68             :rotation="squircleOpts.rotation"
     69             :curvature="squircleOpts.curvature"
     70             @controls-changed="handleControlChange"
     71         />
     72     </div>
     73 </template>
     74 
     75 <style scoped>
     76 .generator {
     77     position: relative;
     78     display: grid;
     79     grid-template-columns: 418px 1fr;
     80     grid-gap: var(--spacing-6);
     81     padding: var(--spacing-5);
     82     background: #fff;
     83     box-shadow: 0 24px 32px rgba(16, 42, 67, 0.075);
     84     border-radius: 48px;
     85 }
     86 
     87 @media screen and (max-width: 62rem) {
     88     .generator-wrapper {
     89         width: 100%;
     90     }
     91 
     92     .generator {
     93         grid-template-columns: 1fr;
     94         grid-gap: var(--spacing-5);
     95         padding: 0;
     96         background: none;
     97         box-shadow: none;
     98     }
     99 
    100     .generator__preview-section {
    101         justify-self: center;
    102         width: 100%;
    103         max-width: 320px;
    104     }
    105 
    106     .generator__control-section {
    107         padding: 0;
    108     }
    109 }
    110 </style>