Blog post preview

June 22, 2022

Demo Wednesday: Hexagonal Grid

Blog post authors

Marek Hozak

No items found.

We've published a new demo: Hexagonal Grid

How would you create a hexagonal grid diagram? We used the Honeycomb library to do the math for us, and JointJS, which rendered the grid and the shapes in it and made everything interactive.

If you want to learn more about hexagonal grids, also check out this article - https://www.redblobgames.com/grids/hexagons/.

Over to you – play around with our live demo below or visit our CodePen profile.

See the Pen Honeycomb by JointJS (@jointjs) on CodePen.

For more examples of JointJS and JointJS+, see our CodePen profile and our official documentation.

If you have an idea for another demo, let us know on Github Discussions.

Authors

Blog post author

Marek Hozak

Marketing guy, father, and sports fanatic who loves to learn about new technologies.

No items found.

Stay in the loop

Read next

Browse all news

JointJS blog post preview

James Williams

Sep 26, 2024

How to Make Diagrams More Accessible?

16% of the global population have disabilities according to the World Health Organization. How can we build (diagramming) web apps to ensure they are accessible to everyone?

JointJS blog post preview

Blog post author

Martin Kaněra

Sep 5, 2024

Mastering SVG Outlines: A Developer's Guide to Shape Contouring Techniques

Explore main SVG outline techniques with pros and cons, plus code-based guides for developing modern, responsive web applications and websites.

JointJS blog post preview

Blog post author

Marek Hozak

Feb 8, 2024

Introducing a 'Dependency-Free' Version 4.0

We're excited to announce version 4.0 of JointJS and JointJS+, the first no-dependency version of our diagramming library.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.

EXPLORE ALL DEMOS

GET STARTED FOR FREE