Usa el Creador de Formas Squircle gratuito abajo: todo funciona en tu navegador, sin registro y sin subir archivos.
Qué es una squircle
Una squircle es una forma que vive entre un cuadrado y un cÃrculo. Tiene los lados planos de un cuadrado y las esquinas suaves de un cÃrculo, pero no es ninguna de las dos cosas. El nombre es simplemente cuadrado más cÃrculo, y la forma proviene de una familia de curvas llamadas superelipses. Los diseñadores de aplicaciones la conocen bien: muchas pantallas de inicio de teléfonos usan squircles para los iconos porque la forma se siente amable como un cÃrculo pero se ordena en rejilla como un cuadrado.
La matemática es sencilla de describir. Una superelipse sigue la regla de que la distancia en x elevada a una potencia, más la distancia en y elevada a la misma potencia, es igual a uno. Cuando la potencia es 2, obtienes un cÃrculo. A medida que la potencia crece, los lados se aplanan y las esquinas se afilan, y con una potencia de 8 o 10 la forma es casi un cuadrado con esquinas suavemente redondeadas. La herramienta de arriba te permite deslizar esa potencia y ver cómo cambia la forma en tiempo real.
Cómo usar el creador de formas squircle
Ajusta primero el control de suavidad. Un valor cercano a 2 da un casi cÃrculo, bueno para avatares e insignias. Los valores entre 4 y 5 dan la squircle clásica de icono de aplicación, equilibrada y moderna. Los valores cercanos a 8 o 10 dan un cuadrado redondeado, útil para botones, tarjetas y mosaicos donde quieres una forma fuerte con esquinas suaves.
Después, define el tamaño y los colores. El color de relleno es la forma en sÃ, y el color de fondo es el cuadrado detrás, asà que puedes prever cómo se verá la squircle sobre una superficie clara u oscura. Cuando estés conforme, copia el código SVG o descarga el archivo. El SVG es un solo trazo, asà que se integra en cualquier herramienta de diseño, sitio web o presentación sin trabajo extra.
Por qué las squircles se ven modernas
Las tendencias de diseño se mueven en ciclos entre lo afilado y lo suave. Los cuadrados puros se sienten técnicos y estrictos. Los cÃrculos puros se sienten juguetones pero desperdician espacio en rejillas. La squircle divide la diferencia, por eso los sistemas operativos y las tiendas de aplicaciones la adoptaron para los iconos. También se ve bien en tamaños pequeños: los lados planos mantienen la forma legible, mientras las esquinas curvas evitan que se vea dura.
Ese equilibrio hace que las squircles sean útiles mucho más allá de los iconos de aplicaciones. Úsalas para fotos de perfil, insignias de producto, tarjetas de precios, avatares sociales y contenedores de logotipos. Una fila de squircles en colores a juego parece un sistema pensado y no un conjunto de cajas al azar.
Squircle frente a rectángulo redondeado
Un rectángulo redondeado se hace cortando arcos circulares en las esquinas de un rectángulo. Una squircle es una sola curva suave, asà que sus lados nunca son perfectamente rectos y sus esquinas nunca son un arco separado. La diferencia es sutil a simple vista pero visible en la sensación: una squircle parece más orgánica, como una forma que creció, mientras un rectángulo redondeado parece diseñado con ingenierÃa. Para iconos e insignias, esa sensación orgánica suele ser el objetivo.
Otra ventaja es la escala. Como la herramienta exporta un trazo vectorial real, la squircle se mantiene perfectamente suave a cualquier tamaño, desde un favicon de 32 pÃxeles hasta un cartel. Un rectángulo redondeado dibujado como mapa de bits se difuminarÃa en tamaños grandes; el SVG nunca lo hace.
Consejos prácticos
Iguala la suavidad en un conjunto de iconos para que se sientan como una familia. Si un icono es casi un cÃrculo y el siguiente es casi un cuadrado, el conjunto parece accidental. Mantén el color de relleno atrevido y sencillo: las squircles muestran degradados y colores planos igual de bien, pero los patrones recargados pelean con el contorno limpio. Por último, deja aire alrededor de la forma. Una squircle colocada borde con borde en una rejilla se ve apretada; un pequeño margen deja que la curva hable.
Experimenta con el control, encuentra la suavidad que encaje con tu proyecto y exporta la forma. Es una herramienta pequeña, pero la squircle es una de esas decisiones silenciosas de diseño que hacen que toda una interfaz se sienta más pulida.
Pingback: Squircle Shape Maker - Smooth App-Icon Shapes Free