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

GeneratorPreview.vue (1712B)

      1 <script>
      2 export default {
      3     name: 'GeneratorPreview',
      4     props: {
      5         path: {
      6             type: String,
      7             required: true,
      8         },
      9         fill: {
     10             type: String,
     11             required: true,
     12         },
     13         rotation: {
     14             type: Number,
     15             required: true,
     16         },
     17         scale: {
     18             type: Number,
     19             required: true,
     20         },
     21     },
     22 };
     23 </script>
     24 
     25 <template>
     26     <div class="generator-preview">
     27         <svg
     28             id="squircleSVG"
     29             viewBox="0 0 200 200"
     30             xmlns="http://www.w3.org/2000/svg"
     31             version="1.1"
     32         >
     33             <path
     34                 :d="path"
     35                 :transform="`rotate(
     36                     ${rotation},
     37                     100,
     38                     100
     39                 ) translate(
     40                     ${(200 - scale) / 2}
     41                     ${(200 - scale) / 2}
     42                 )`"
     43                 :fill="fill"
     44             />
     45         </svg>
     46     </div>
     47 </template>
     48 
     49 <style scoped>
     50 .generator-preview {
     51     position: relative;
     52     width: 100%;
     53     justify-self: center;
     54     background: #fff;
     55     border-radius: 24px;
     56 }
     57 
     58 .generator-preview::after {
     59     position: absolute;
     60     top: 0;
     61     left: 0;
     62     width: 100%;
     63     height: 100%;
     64     content: '';
     65     border: 2px dashed var(--grey-100);
     66     border-radius: 24px;
     67 }
     68 
     69 .generator-preview::before {
     70     content: '';
     71     display: block;
     72     padding-bottom: 100%;
     73 }
     74 
     75 .generator-preview svg {
     76     position: absolute;
     77     top: 0;
     78     left: 0;
     79     width: 100%;
     80     height: 100%;
     81 }
     82 
     83 @media only screen and (max-width: 62rem) {
     84     .generator-preview {
     85         max-width: 280px;
     86         margin-bottom: var(--spacing-3);
     87     }
     88 }
     89 </style>