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

GeneratorExportOptions.vue (3974B)

      1 <script>
      2 import DownloadIcon from '@/assets/img/download-cloud.svg?inline';
      3 import ClipBoardIcon from '@/assets/img/clipboard.svg?inline';
      4 
      5 import { saveAs } from 'file-saver';
      6 import copy from 'copy-to-clipboard';
      7 
      8 export default {
      9     name: 'GeneratorExportOptions',
     10     components: {
     11         DownloadIcon,
     12         ClipBoardIcon,
     13     },
     14     methods: {
     15         downloadSVG() {
     16             this.refreshAd();
     17 
     18             const exportSVG = this.createSVG(
     19                 document.querySelector('#squircleSVG path')
     20             );
     21             const blob = new Blob([exportSVG], {
     22                 type: 'text/plain;charset=utf-8',
     23             });
     24 
     25             saveAs(blob, 'squircle.svg');
     26         },
     27         copySVGToClipBoard() {
     28             this.refreshAd();
     29 
     30             const exportSVG = this.createSVG(
     31                 document.querySelector('#squircleSVG path')
     32             );
     33 
     34             copy(exportSVG);
     35 
     36             this.$toasted.show('Squircle SVG copied to clipboard!', {
     37                 position: 'bottom-center',
     38                 duration: 2500,
     39                 className: 'toast',
     40             });
     41         },
     42         createSVG(originalPath) {
     43             const svg = document.createElement('svg');
     44             const path = document.createElement('path');
     45 
     46             svg.appendChild(path);
     47 
     48             svg.setAttribute('viewBox', '0 0 200 200');
     49             svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     50 
     51             const pathD = originalPath.getAttribute('d');
     52             const pathFill = originalPath.getAttribute('fill');
     53             const pathTransform = originalPath.getAttribute('transform');
     54 
     55             path.setAttribute('d', pathD);
     56             path.setAttribute('fill', pathFill);
     57             path.setAttribute('transform', pathTransform);
     58 
     59             return svg.outerHTML;
     60         },
     61         refreshAd() {
     62             if (!document.querySelectorAll('#carbonads')[0]) return;
     63 
     64             if (typeof window._carbonads !== 'undefined')
     65                 window._carbonads.refresh();
     66         },
     67     },
     68 };
     69 </script>
     70 
     71 <template>
     72     <div class="generator-export-controls">
     73         <button
     74             aria-label="download squircle SVG"
     75             class="generator-export-controls__btn"
     76             @click="downloadSVG"
     77         >
     78             <span>
     79                 Save
     80             </span>
     81             <DownloadIcon />
     82         </button>
     83         <button
     84             aria-label="copy squircle SVG to clipboard"
     85             class="generator-export-controls__btn"
     86             @click="copySVGToClipBoard"
     87         >
     88             <span>
     89                 Copy
     90             </span>
     91             <ClipBoardIcon />
     92         </button>
     93     </div>
     94 </template>
     95 
     96 <style scoped>
     97 .generator-export-controls {
     98     display: flex;
     99     align-items: center;
    100     justify-content: center;
    101     width: 100%;
    102 }
    103 
    104 .generator-export-controls__btn {
    105     display: flex;
    106     justify-content: center;
    107     align-items: center;
    108     padding: 0 var(--spacing-3);
    109     width: 50%;
    110     height: var(--spacing-6);
    111     margin-left: var(--spacing-4);
    112     cursor: pointer;
    113     background: #fff;
    114     border-radius: 12px;
    115     font-weight: 700;
    116     border: 2px solid #4d3df7;
    117     color: #4d3df7;
    118     transition: transform 125ms ease-in-out;
    119 }
    120 
    121 .generator-export-controls__btn span {
    122     transition: transform 125ms ease-in-out;
    123 }
    124 
    125 .generator-export-controls__btn svg {
    126     width: 24px;
    127     height: 24px;
    128     stroke-width: 1.5px;
    129     margin-left: var(--spacing-2);
    130     stroke: #4d3df7;
    131     transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
    132 }
    133 
    134 .generator-export-controls__btn:hover svg {
    135     transform: scale(1.125);
    136 }
    137 
    138 .generator-export-controls__btn:active svg {
    139     transform: scale(0.875);
    140 }
    141 
    142 .generator-export-controls__btn:first-child {
    143     margin-left: 0;
    144     background: #4d3df7;
    145     color: #e6e6ff;
    146     border: 0;
    147 }
    148 
    149 .generator-export-controls__btn:first-child svg {
    150     stroke: #e6e6ff;
    151 }
    152 </style>
    153 
    154 <style>
    155 .toast {
    156     background: var(--grey-900) !important;
    157 }
    158 </style>