[{"data":1,"prerenderedAt":427},["ShallowReactive",2],{"\u002Fsquircle-generator\u002Fen":3},{"id":4,"title":5,"body":6,"description":264,"extension":420,"meta":421,"navigation":422,"path":423,"seo":424,"stem":425,"__hash__":426},"content\u002Fsquircle-generator\u002Fen.md","En",{"type":7,"value":8,"toc":403},"minimark",[9,14,27,38,42,87,91,96,125,129,132,135,145,149,161,165,172,176,214,218,221,225,231,248,252,258,344,353,357,379,383,399],[10,11,13],"h2",{"id":12},"what-is-squircle-generator","What is Squircle Generator?",[15,16,17,18,22,23,26],"p",{},"Squircle Generator is a tool for creating shapes that sit between a square and a circle, then exporting them as CSS ",[19,20,21],"code",{},"clip-path: path()"," values or full SVG code. It works well when ",[19,24,25],{},"border-radius"," feels too ordinary or too round, and you want softer corners while keeping some edge character. You can compare corner smoothness, rotation, ratio, and generated size in a live preview, which makes it useful for app icons, cards, buttons, thumbnails, and other UI surfaces.",[15,28,29,30,33,34,37],{},"The preview is rendered with SVG, and you can start from presets before fine-tuning the shape. The output can be copied as full CSS, a ",[19,31,32],{},"clip-path"," value, an SVG path ",[19,35,36],{},"d"," attribute, or a full SVG snippet.",[10,39,41],{"id":40},"how-to-use-squircle-generator","How to Use Squircle Generator",[43,44,45,53,60,67,70,73,80],"ol",{},[46,47,48,49,52],"li",{},"Start with a ",[19,50,51],{},"Preset"," if one of the common use cases fits what you need, or use the ratio options to set the overall silhouette first.",[46,54,55,56,59],{},"Adjust ",[19,57,58],{},"Corner smoothness"," to decide how round or square-like the shape should feel.",[46,61,62,63,66],{},"Switch ",[19,64,65],{},"Rotation"," between 0° and 45° depending on whether you want a standard orientation or a more diamond-like silhouette.",[46,68,69],{},"Refine the ratio if you want the squircle to feel more square, wide, or tall.",[46,71,72],{},"Adjust the fill color if you want to judge the preview or the full SVG output with a different color.",[46,74,75,76,79],{},"If you already know the implementation size, set the width and height in the ",[19,77,78],{},"Generated size"," section.",[46,81,82,83,86],{},"Choose the ",[19,84,85],{},"Output format"," and copy only the format you need.",[10,88,90],{"id":89},"main-settings","Main Settings",[92,93,95],"h3",{"id":94},"presets","Presets",[15,97,98,99,102,103,102,106,102,109,112,113,116,117,120,121,124],{},"The preset area separates two jobs. The use-case presets such as ",[19,100,101],{},"App Icon",", ",[19,104,105],{},"Avatar \u002F Badge",[19,107,108],{},"Button \u002F Pill",[19,110,111],{},"Card 4:3",", and ",[19,114,115],{},"Thumbnail 16:9"," give you a starting point that already includes size, rotation, and smoothness. The ratio presets such as ",[19,118,119],{},"1:1"," and ",[19,122,123],{},"16:9"," are better when you only want to change the width-to-height balance.",[92,126,128],{"id":127},"corner-smoothness","Corner Smoothness",[15,130,131],{},"Higher values make the shape rounder, while lower values keep more of the straight-edge feel. The lower end works well for buttons or wide cards, while higher values are better when you want a softer icon or thumbnail silhouette.",[92,133,65],{"id":134},"rotation",[15,136,137,140,141,144],{},[19,138,139],{},"0°"," keeps the shape in a standard orientation, which is usually easier to judge for cards and buttons. ",[19,142,143],{},"45°"," gives it a more diamond-like feel similar to Squircley, which is useful when you want something closer to an app-icon or badge silhouette.",[92,146,148],{"id":147},"aspect-ratio","Aspect Ratio",[15,150,151,152,154,155,120,158,160],{},"You can quickly try square, wide, and tall squircles without treating width and height as the main design controls. ",[19,153,119],{}," works well for icons and avatars, while ",[19,156,157],{},"4:3",[19,159,123],{}," are more useful for cards, thumbnails, and cover-like layouts. It is also useful when a use-case preset feels close, but the overall proportion still needs adjustment.",[92,162,164],{"id":163},"generated-size","Generated Size",[15,166,167,168,171],{},"These values define the base size of the generated ",[19,169,170],{},"path()"," and SVG output. They do not change the preview zoom. They define the coordinate space used in the generated code, so keeping them close to the size you actually plan to build usually reduces later rework.",[92,173,175],{"id":174},"output-format","Output Format",[177,178,179,189,199,208],"ul",{},[46,180,181,184,185,188],{},[19,182,183],{},"Full CSS"," is useful when you want a ready-to-paste ",[19,186,187],{},".squircle"," block",[46,190,191,194,195,198],{},[19,192,193],{},"clip-path value"," is useful when you only need ",[19,196,197],{},"path('...')"," for existing CSS",[46,200,201,204,205,207],{},[19,202,203],{},"SVG path d attribute"," is handy when another SVG or design tool only needs the ",[19,206,36],{}," value",[46,209,210,213],{},[19,211,212],{},"Full SVG code"," gives you a complete SVG snippet with the current fill color included",[92,215,217],{"id":216},"fill-color","Fill Color",[15,219,220],{},"This setting helps you judge the shape in the preview. It is not included in the CSS or path-only outputs, but it is included when you copy the full SVG output.",[10,222,224],{"id":223},"why-does-generated-size-change-the-output","Why Does Generated Size Change the Output?",[15,226,227,228,230],{},"The generated ",[19,229,21],{}," uses absolute coordinates based on the selected width and height. That means the numbers inside the path change with the size, even when the overall ratio stays the same.",[177,232,233,242,245],{},[46,234,235,120,238,241],{},[19,236,237],{},"240 × 135",[19,239,240],{},"480 × 270"," share the same 16:9 ratio, but they produce different coordinate values",[46,243,244],{},"the preview may scale down for readability, but the exported code is recalculated for the selected size",[46,246,247],{},"if the final component size changes later, regenerating the path usually gives a more accurate result",[10,249,251],{"id":250},"output-example","Output Example",[15,253,254,255,257],{},"A 240 × 240px shape produces code like this when ",[19,256,183],{}," is selected.",[259,260,265],"pre",{"className":261,"code":262,"language":263,"meta":264,"style":264},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".squircle {\n  width: 240px;\n  height: 240px;\n  clip-path: path('M 120 0 L 138.2 0.85 ... Z');\n}\n","css","",[19,266,267,283,300,312,338],{"__ignoreMap":264},[268,269,272,276,280],"span",{"class":270,"line":271},"line",1,[268,273,275],{"class":274},"sMK4o",".",[268,277,279],{"class":278},"sBMFI","squircle",[268,281,282],{"class":274}," {\n",[268,284,286,290,293,297],{"class":270,"line":285},2,[268,287,289],{"class":288},"sqsOY","  width",[268,291,292],{"class":274},":",[268,294,296],{"class":295},"sbssI"," 240px",[268,298,299],{"class":274},";\n",[268,301,303,306,308,310],{"class":270,"line":302},3,[268,304,305],{"class":288},"  height",[268,307,292],{"class":274},[268,309,296],{"class":295},[268,311,299],{"class":274},[268,313,315,318,320,324,327,331,333,336],{"class":270,"line":314},4,[268,316,317],{"class":288},"  clip-path",[268,319,292],{"class":274},[268,321,323],{"class":322},"sTEyZ"," path(",[268,325,326],{"class":274},"'",[268,328,330],{"class":329},"sfazB","M 120 0 L 138.2 0.85 ... Z",[268,332,326],{"class":274},[268,334,335],{"class":322},")",[268,337,299],{"class":274},[268,339,341],{"class":270,"line":340},5,[268,342,343],{"class":274},"}\n",[15,345,346,347,349,350,352],{},"From the same shape, you can also copy only the ",[19,348,32],{}," value, only the SVG path ",[19,351,36],{}," attribute, or the full SVG code.",[10,354,356],{"id":355},"use-cases","Use Cases",[177,358,359,362,373,376],{},[46,360,361],{},"Creating a base shape for app icons or profile images",[46,363,364,365,367,368,370,371],{},"Making ",[19,366,157],{}," or ",[19,369,123],{}," cards, thumbnails, and cover blocks feel softer than a standard ",[19,372,25],{},[46,374,375],{},"Keeping some straight-edge character on buttons and badges instead of making them fully round",[46,377,378],{},"Keeping corner styling consistent across icons, cards, and other UI surfaces",[10,380,382],{"id":381},"things-to-keep-in-mind","Things to Keep in Mind",[177,384,385,390,393],{},[46,386,227,387,389],{},[19,388,21],{}," is size-specific. If the element size changes, the path coordinates change too, so it is usually better to generate the path again.",[46,391,392],{},"Fill color is not included in the CSS or path-only outputs. It only affects the full SVG output.",[46,394,395,396,398],{},"Browser support for ",[19,397,21],{}," can vary, so it is worth checking the result in your target environment before shipping it.",[400,401,402],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":264,"searchDepth":285,"depth":285,"links":404},[405,406,407,416,417,418,419],{"id":12,"depth":285,"text":13},{"id":40,"depth":285,"text":41},{"id":89,"depth":285,"text":90,"children":408},[409,410,411,412,413,414,415],{"id":94,"depth":302,"text":95},{"id":127,"depth":302,"text":128},{"id":134,"depth":302,"text":65},{"id":147,"depth":302,"text":148},{"id":163,"depth":302,"text":164},{"id":174,"depth":302,"text":175},{"id":216,"depth":302,"text":217},{"id":223,"depth":285,"text":224},{"id":250,"depth":285,"text":251},{"id":355,"depth":285,"text":356},{"id":381,"depth":285,"text":382},"md",{},true,"\u002Fsquircle-generator\u002Fen",{"description":264},"squircle-generator\u002Fen","Tt_ADcbKY89YyMCYqnTdaREcnknQ-HLLS88l_FpWGkc",1780055816412]