SVG Orbiting Point Animation System

Freelance Work (Real World Project) I worked on this project under my consultancy - Digital Anthro

Data | Animation | Performance | International

View Website

Context Overview

VINVOX is a Canadian technology company specializing in vehicle telematics data solutions for enterprise clients across North America. As a freelancer, I collaborated with their marketing team to create an SVG orbiting point animation system for their new website. The animation system was designed to visualize the "flow" of data in an engaging way on their marketing website. The animation system was built for flexibility across the website's various sections.

Role & Impact

• Role: Creative Developer (Freelancer)

• Impact:

  • Worked with a marketing specialist to develop an SVG orbiting point animation system for Vinvox's new website.
  • Created multiple animation systems that could be easily customized and reused across the website, allowing for dynamic visualizations of data and engaging user interactions.
  • Implemented the animation system using JavaScript, anime.js and SVG, ensuring that it was performant across different devices and screen sizes.

Tech & Project Type

• Project Type: Data | Animation system | International | SVG | Creative Development
• Built & tested with: Anime.js, JavaScript, SVG, HTML/CSS, Figma

Technical Details

SVG Orbiting Point Animation System

Using Figma, I designed the SVG assets for the orbiting point animation system. Their were a few iterations based on feedback from the marketing point of contact. We settled on various orbit paths for each section of the website. The points will pulse (signifying data flow) as they orbit around the center point.