An easy way to implement smooth shapes (such as Superellipse and Squircle) into a user interface.

What’s wrong with border-radius?

To create a new way of styling elements, let’s first figure out what’s wrong with the existing method…

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
Horizontal radius set for the half of width, vertical smaller than height.
Horizontal radius — half of width, vertical — half of height.

Missing element

I propose to look at the problem from a different perspective.

The Path

There is no better element in SVG to manipulate curves than the Path. It has five commands to produce the exact curvature you want:

  • C — cubic Bézier curve
  • S — smooth cubic Bezier (shorthand for C)
  • Q — quadratic bezier curve
  • T — smooth quadratic Bezier curve (shorthand for Q)
  • A — elliptical arc
  • Width (500px)
  • Height (300px)
  • Half of Width (250px)
  • Half of Height (150px)
  1. Starting with C command:
Path C command smooth result
Not the result expected
The same smooth rectangle with C+S commands
Seems like Super Egg…
Similar to Super Egg form vs ellipse
Shorthand with T command

Compare to Superellipse

To compare created SVGs with True Superellipse we need a resource to generate the last.

Blue — Generated true Superellipse
Blue — Generated true Superellipse

Background SVG with Data URI

We will implement it through the style sheet to have access to all our elements in the DOM.

  • No DOM weighting. (Versus inline SVG) Only elements you really need to structure your page. Styles and structure apart.
  • No extra HTTP requests. (Versus background with a link to file).
  • Easy styling desired set of elements by adding a class.

Imagine all the elements…

…into you interface are different, have various sizes, colors, sometimes gradients, but they are all styled with the same smoothness.

Super mixins for Super Shapes

To create super mixins I’ve chosen two variations of SVG, with C+S commands and Q+T. Let name them super-rectangle and super-circle.

  • Replace ‘<’ with ‘%3C’ and ‘>’ with ‘%3E’ (%3Cpath%3E similar to <path>)
  • Replace ‘#’ with ‘%23’ (%23f9ed32 similar to #f9ed32)
  • Wrap url content with double quotes, while using inner attribute values’ with single quotes, except variables.
background: url("data:image/svg+xml;charset=US-ASCII,<svg version='1.1' id='shape-1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='500' height='300' viewBox='0 0 500 300' enable-background='new 0 0 500 300' xml:space='preserve'><path fill='#ED2F5B' stroke='none' d='M 0,150 C 0,0 0,0 250,0 S 500,0 500,150 500,300 250,300 0,300 0,150'></path></svg>") left top no-repeat;
background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg version='1.1' id='shape-1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='"+$width+"' height='"+$height+"' viewBox='0 0 "+$width+" "+$height+"' enable-background='new 0 0 "+$width+" "+$height+"' xml:space='preserve'%3E%3Cpath fill='"+$color+"' stroke='none' d='M 0,"+$halfHeight+" C 0,0 0,0 "+$halfWidth+",0 S "+$width+",0 "+$width+","+$halfHeight+" "+$width+","+$height+" "+$halfWidth+","+$height+" 0,"+$height+" 0,"+$halfHeight+"'%3E%3C/path%3E%3C/svg%3E");
background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg version='1.1' id='shape-1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='"+$width+"' height='"+$height+"' viewBox='0 0 "+$width+" "+$height+"' enable-background='new 0 0 "+$width+" "+$height+"' xml:space='preserve'%3E%3Cpath fill='"+$color+"' stroke='none' d='M 0,"+$halfHeight+" C 0,0 0,0 "+$halfWidth+",0 S "+$width+",0 "+$width+","+$halfHeight+" "+$width+","+$height+" "+$halfWidth+","+$height+" 0,"+$height+" 0,"+$halfHeight+"'%3E%3C/path%3E%3C/svg%3E");
  • To replace ‘#’ in color code
  • To cut units like ‘px’

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Olga Nikolskaya

Olga Nikolskaya

UX-Designer + Front-End Developer + Product Designer + Project Manager = Web Marketing Director 🤷🏼‍♀️