SVG Grids: Squares, Triangles, Hexagons with Scrolling, Sprites and Simple Animation Examples

Marc Clifton

Rate me:

4.86/5 (4 votes)

29 Jan 2023CPOL10 min read

Create square, triangle, and hexagon grids with scrolling, animation, and "sprite" dragging

In this article, I demonstrate square, triangle, and hexagon grids. For the hexagon grids, I add some objects like stars, attributes, and a couple spaceships. The SVG (Scalable Vector Graphics) surface is scrollable and the demo illustrates fixed objects, moveable objects, and some simple animation.

Views

Daily Counts

Downloads

Weekly Counts

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Marc Clifton

Architect Interacx

United States

Blog: https://marcclifton.wordpress.com/
Home Page: http://www.marcclifton.com
Research: http://www.higherorderprogramming.com/
GitHub: https://github.com/cliftonm

All my life I have been passionate about architecture / software design, as this is the cornerstone to a maintainable and extensible application. As such, I have enjoyed exploring some crazy ideas and discovering that they are not so crazy after all. I also love writing about my ideas and seeing the community response. As a consultant, I've enjoyed working in a wide range of industries such as aerospace, boatyard management, remote sensing, emergency services / data management, and casino operations. I've done a variety of pro-bono work non-profit organizations related to nature conservancy, drug recovery and women's health.

SVG Grids: Squares, Triangles, Hexagons with Scrolling, Sprites and Simple Animation Examples

Views

Downloads

License

Comments and Discussions