Home

Polygon Shapes

30 October 2021

CSS Doodle provides a declarative syntax for generating polgyon shapes with clip-path property. To create a regular polygon, simply set the number of vertices or points:

You may want to rotate, scale, or move it.

The shape can also be made into a hollow frame.

Or something like straight line paths.

If there are enough points, it will look like a circle.

By default the shape is defined with trigonometric functions of x and y. That is, x = cos(t) and y = sin(t), where t represents the symbol theta for the equally divided angle.

You can change the equations to form different shapes you like.

It supports custom variables, so you can put parameters to one place.

When multiple paths are crossed it's useful to set the fill-rule to be evenodd.

This shape requires evenodd to show as well.

Another similar way to define the shape is to use the formula of Polar equation.

Sometimes you may get interesting shapes with just a few vertices.

Even if there are only 9 vertices.

Let's draw a shape with Superformula.

It's very straightforward to draw the squircle shape in this way.

The value of r doesn't have to be Math equations. It can be a constant value.

Use the built-in seq() function to pass in a sequence of values for each point.

In most cases, it's useful when there aren't many points.

That's all the rules.

Despite its simplicity, it's worth exploring further to find more interesting shapes. For example, this vase shape that I like very much.

The shape will be symmetrical if the given equations are symmetrical. In this case, x has two cos's and one sin, y is the opposite.

So follow this rule it's likely to get some symmetrical shapes, like masks.

There are so many variants of mask shape.

I can get an opera face that is symmetrical.

Or even a dog face.

The fish shape is symmetrical too.

The process of discovering new shapes is as exciting as imagining discovering new life on another planet.

Not all shapes are symmetrical. Using parameters with large or fractional numbers you will get distinct ones.

The landscape clip is a good example of asymmetrical shapes.

This is one of my favorites :)

Shapes can also be some abstract forms. Does this look like five people dancing?

I can't describe what exactly the shape is but it looks like somewhere by the sea.

So is this shape.

Creating shapes using mathematical functions is very different from other methods. It's helpful to build some kind of intuition yourself by practicing.

Several other shapes I find quite interesting and elegant. Look this plant:

Rocks.

Strings.

Dried fish.

Alien spaceship.

And a person practicing Zen.

Hope these examples can explain the @shape() function well. Below are the links of a live editor and all the other shapes I created for the divtober challenge this month.