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

TheSquircleExplosion.vue (1898B)

      1 <script>
      2 import Squircle1 from '@/assets/img/squircle-01.svg?inline';
      3 import Squircle2 from '@/assets/img/squircle-02.svg?inline';
      4 import Squircle3 from '@/assets/img/squircle-03.svg?inline';
      5 
      6 export default {
      7     name: 'TheSquircleExplosion',
      8     components: {
      9         Squircle1,
     10         Squircle2,
     11         Squircle3,
     12     },
     13 };
     14 </script>
     15 
     16 <template>
     17     <div class="squircle-explosion">
     18         <Squircle1 class="squircle-explosion__squircle" />
     19         <Squircle2 class="squircle-explosion__squircle" />
     20         <Squircle3 class="squircle-explosion__squircle" />
     21         <Squircle1 class="squircle-explosion__squircle" />
     22         <Squircle2 class="squircle-explosion__squircle" />
     23     </div>
     24 </template>
     25 
     26 <style>
     27 .squircle-explosion {
     28     position: absolute;
     29     pointer-events: none;
     30 }
     31 
     32 .squircle-explosion__squircle {
     33     position: absolute;
     34     width: 64px;
     35     height: 64px;
     36     fill: #7069fa;
     37     opacity: 0.75;
     38 }
     39 
     40 .squircle-explosion__squircle:nth-of-type(1) {
     41     top: var(--spacing-10);
     42     left: var(--spacing-6);
     43     transform: rotate(32deg);
     44 }
     45 
     46 .squircle-explosion__squircle:nth-of-type(2) {
     47     top: var(--spacing-11);
     48     right: var(--spacing-5);
     49     transform: rotate(32deg);
     50     fill: #f86a6a;
     51 }
     52 
     53 .squircle-explosion__squircle:nth-of-type(3) {
     54     width: 48px;
     55     height: 48px;
     56     top: var(--spacing-13);
     57     left: var(--spacing-9);
     58     transform: rotate(54deg);
     59     fill: #fadb5f;
     60 }
     61 
     62 .squircle-explosion__squircle:nth-of-type(4) {
     63     width: 32px;
     64     height: 32px;
     65     top: var(--spacing-13);
     66     right: var(--spacing-8);
     67     transform: rotate(128deg);
     68     fill: #fadb5f;
     69 }
     70 
     71 .squircle-explosion__squircle:nth-of-type(5) {
     72     width: 24px;
     73     height: 24px;
     74     top: var(--spacing-8);
     75     right: var(--spacing-12);
     76     transform: rotate(128deg);
     77     fill: #7069fa;
     78 }
     79 
     80 @media only screen and (max-width: 72rem) {
     81     .squircle-explosion {
     82         display: none;
     83     }
     84 }
     85 </style>