Watkins Web Design
SVG Asset Library for Building Automation

SVG Asset Library for Building Automation

Thomas Watkins

Thomas Watkins

February 14, 2024

Animation
Front-End Development

Overview

I played a key role in developing a cutting-edge SVG asset library designed for building automation and control systems—RocketGX’s first digital product, and the proud recipient of a Creativepool Annual 2024 Silver Award. This comprehensive collection of 1,857 meticulously designed vector assets empowers integrators and engineers to build visually rich, highly functional dashboards for smart buildings, including intricate HVAC, heating, cooling, and ventilation components.

My Role & Contributions

Animation & Interactivity

  • Animated Over 240 Assets:
    I created more than 240 animated SVG components, using a mix of SMIL for native SVG animation and GSAP for advanced, sequenced motion and interactivity. These animations include moving parts, thermal variations, and operational cues—many designed to respond in real time to live building data.
  • Live Data Visuals:
    Worked in close collaboration with backend developers to ensure animated SVGs could dynamically reflect real-world status, such as system activity or temperature changes.
  • Engagement & Clarity:
    My focus on animation made complex HVAC concepts instantly clear, helping operators and end-users visualize building performance at a glance.

SVG Engineering & Niagara 4 Integration

  • Seamless Niagara 4 Compatibility:
    A core technical challenge was ensuring the assets were fully compatible with the Niagara 4 platform, an industry-leading building management system. I carefully optimized SVG structure and code for flawless integration and performance within this environment.
  • Efficient Design System:
    All assets are built on a 5-pixel grid, supporting drag-and-drop placement, pixel-perfect alignment, and rapid composition—up to 25% faster than conventional asset libraries.
  • Production-Ready & Modular:
    Every SVG was crafted for easy reuse, scalability, and future expansion, supporting cross-browser environments and industrial software.

Project Results

  • Award-Winning Impact:
    The SVG Asset Library’s industry impact was recognized with a Silver Award at the Creativepool Annual 2024, celebrating design innovation and effectiveness.
  • Comprehensive Resource:
    With 1,857 assets (including over 240 animated), the library is now relied upon by engineers, system designers, and a major distributor, streamlining dashboard creation for a wide variety of smart building projects.
  • Positive Feedback & Adoption:
    The project received glowing reviews from leading clients for its visual clarity, usability, and compatibility, directly contributing to commercial success.

Summary

The SVG Asset Library project combined high-level visual design, animation, and technical integration—raising the bar for digital resources in building automation. My role spanned from intricate animation and SVG engineering to direct collaboration with integration teams, resulting in a scalable, award-winning product that simplifies and elevates smart building management.

Need a high-performing, custom-built website, app or long-term support ?
I'd love to hear from you.

Watkins Web Design Logo Light

Passionate about building high-performance, user-friendly websites and applications that drive results.

© 2025 Watkins Web Design. All Rights Reserved.