Polygons in web development

Oleksandr Solarz
4 min readApr 24, 2023

--

cute panda

Hi, maybe you are new to web development and never heard about polygons, so I will fix it in this article.

Lest start with a definition.

So what the heck is polygon?

In web development, the term “polygon” is typically used to refer to a closed shape that is formed by connecting a series of straight line segments. Polygons are often used in web design to create shapes for elements such as buttons, icons, and background images.

You can create polygons using CSS and clip-path property, another technique for creating polygons in web development is to use SVG (Scalable Vector Graphics), a markup language for creating vector graphics. With SVG, developers can create complex shapes and graphics using a variety of drawing tools, including polygon tools.

Let’s create a simple div with the class “polygon”:

<div class="polygon"></div>

Add some css magic 🪄

.polygon {
width: 200px;
height: 200px;
background-color: blue;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}

You should get something like this

blue triangle

We can also do it with SVG!

<svg width="200" height="200">
<polygon points="0,0 200,0 100,200" style="fill:blue;" />
</svg>

Don’t be scared about the ‘points’ attribute, it only defines the coordinates of the vertices of a polygon. It is used with the <polygon> element to create shapes with three or more sides.

Can I animate polygon?

Yes, you can! Just use the <animate> element along with the points attribute of the <polygon> element. Here's an example:

<svg width="200" height="200">
<polygon points="0,0 100,0 50,100" style="fill:blue;">
<animate attributeName="points" dur="2s" repeatCount="indefinite"
values="0,0 100,0 50,100; 50,0 100,100 0,100; 0,0 100,0 50,100" />
</polygon>
</svg>

So let’s talk a bit about attributes, attributeName is set to “points”, which means we will animate the points attribute of the <polygon> element.

The dur attribute of the <animate> element specifies the duration of the animation in seconds. In this example, the animation lasts for 2 seconds.

The values attribute of the <animate> element is set to a semicolon-separated list of three sets of coordinate pairs. Each set of coordinate pairs represents the vertices of the polygon at a different point in time. The animation will smoothly transition the polygon from the first set of coordinates to the second set, and then from the second set to the third set, and then back to the first set, and so on.

Finally, the repeatCount attribute of the <animate> element is set to "indefinite", which means the animation will repeat indefinitely.

animated blue triangle

You can use CSS as well

<div class="polygon"></div>

And again some css magic🪄

.polygon {
width: 200px;
height: 200px;
background-color: blue;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transition: clip-path 2s ease-in-out;
}

.polygon:hover {
clip-path: polygon(0 50%, 100% 50%, 50% 100%);
}

In this example, we’ve defined a blue triangle using the clip-path property. We've also added a CSS transition that will smoothly animate the clip-path property when it changes.

When the .polygon element is hovered over, we change the clip-path property to a different set of coordinates, which creates a different polygon shape.

Where I can use polygons?

  1. Use polygons to create non-rectangular shapes: Polygons allow you to create shapes that aren’t just rectangles. This can be useful when designing unique and creative layouts for your website. For example, you can use polygons to create shapes like triangles, diamonds, hexagons, and more.
  2. Create interesting hover effects: You can use polygons and CSS transitions or animations to create interesting hover effects on your website. For example, you can create a hover effect where a polygon shape expands or changes color when the mouse hovers over it.
  3. Use polygons for image masking: You can use polygons to create custom image masks. This can be useful when you want to display an image in a non-rectangular shape, or when you want to create an interesting frame or border for your images.
  4. Create polygon animations: You can use SVG and CSS animations to create animations that involve polygon shapes. For example, you can animate a polygon so that it appears to move or change shape.
  5. Create polygon-based graphics: You can use polygons to create complex graphics and illustrations. For example, you can use polygons to create geometric patterns or abstract art. (it’s better to use 3d library like three.js)

In conclusion, polygons are a powerful tool in web development that allow you to create unique shapes, interesting hover effects, custom image masks, animations, and more. Whether you’re designing a website layout, creating custom graphics, or adding visual interest to your website, polygons can help you achieve your goals.

However, it’s important to use polygons in a way that is accessible to all users, including those who rely on assistive technologies. Always provide alternative text for images and other non-text content, and ensure that your content is still readable and navigable for all users.

With a little creativity and experimentation, you can use polygons to enhance the visual appeal and user experience of your website. So why not give them a try?

--

--