40+ CSS Hexagons - Free Code + Demos

Hexagonal badges for Dota 2 roles.

CSS version of this gif created by Bees & Bombs.

An example of how clipping paths can create beautiful geometric shapes. Part of a demo for a Smashing Magazine article published in May 2015 titled "Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box".

endless animation circular motion loading, flat design

First attempt at CSS 3D transforms. This is my 3D hexagon.

Experimenting hexagons in CSS3 and how to bring motion to them.

My stab at a method for displaying a potentially infinite number of hexagon cards. The color coding stylings mean something to the app I'm designing for... but also make it more interesting to look at all the same.

Tried to create a responsive grid from one I saw on here, seems to work fine.

sizes & lengths with only 1 CSS custom properties (in progress). TODO: shape-outside for texts & vertical centered Another version: Auto Honeycomb CSS Grid Layout http://codepen.io/Kseso/full/zwKzQN/

CSS Hexagon grid with animation flip on hover

A grid that I made for my futur website.

Some pointless fun experimenting with hexagons.

Texturized hexagon with a proper cursor collision. Done with child & pseudo elements, background inheritance, and 2D transforms. Same thing accomplished with CSS clip-path: polygon() here: http://codepen.io/Darsain/pen/IqjFe

CSS based implementation of a hexagon grid using CSS grid and CSS variables. Size of the hexagons can be changed using only a single variable

Hexagon tiles in a honeycomb arrangement. HTML & CSS, No javascript.

CSS Experiment Based on https://goo.gl/sqEiBU

To see the latest verion of this hexagon grid, see the github repositery : https://github.com/web-tiki/responsive-grid-of-hexagons Grid of hexagons using CSS and HTML with a hover effect to show text. This grid is responsive. More grids with other layouts and features in this codepe...

Read More

You can use two sides of hexagon by hovering your mouse pointer over the shape.

Showing that you can use the same SVG and apply different styles and animations

I was trying to find a technique for putting images inside of a hexagon that was cross-browser compatible (IE, Edge and all other modern browsers), but I wanted it to be able to support image srcset along with being able to put non solid colors behind it.

Created for the codepen challenge(August 2019)........

https://www.youtube.com/watch?v=gOFSumPpl5s https://www.youtube.com/watch?v=DvjiTCHC-uY

Originally from: https://codepad.co/snippet/d-va-hexagon-overwatch-loader-html-css

Single element Hexagon with CSS.

This demo makes some interesting use of CSS transforms on hover.

Pure CSS/Sass hexagons, tiled to create a honeycomb pattern. Blog post: Sassy CSS Hexagons