Suralink - Web Animations
Process
Objective
Suralink approached me to create three looping SVG animations for their new landing page. Each animation was a simplified visual representation of their software, designed to introduce customers to key features in a clean and engaging way.
They provided static designs via Figma, and my role was to bring them to life using SVGator by creating lightweight, web-ready animations that looped seamlessly without compromising performance.
Conceptualization
Since the visual concepts were already established by Suralink’s design team, my focus was on translating their static compositions into lightweight, seamless animations.
Early in the process, I flagged concerns about their initial 5–6 second loop target, given the number of elements they wanted to animate. After discussing timing and pacing, we aligned on approximately 10-second loops to give each sequence enough breathing room.
The creative goal was to create an eye-catching, continuous flow of product features that remained unobtrusive and easy to digest. To support this, I used timing, spacing, and visual hierarchy to guide the viewer’s eye through each animated interface in a clear and intuitive way.
Execution
The most challenging part of the process was translating the designs from Figma into SVGator. Since the Figma export labeled layers with generic names like “<Path>” I first brought everything into Illustrator, where I organized, renamed, and cleaned up the files to prepare them for SVGator.
Some of the assets had been rasterized in Figma, so I recreated them as vectors in Illustrator to keep the final animations as lightweight as possible.
Once everything was ready for SVGator, I had to work around a few of the platform’s limitations.
Certain blending modes and clipping methods either weren't supported or didn’t translate properly, so I found creative solutions that preserved the original design intent while remaining compatible with web requirements. Animating was the final step.
I had to re-familiarize myself with the SVGator interface since it had been a while, but once I got back into the rhythm, the animation process went smoothly.
I handed off the final files to Suralink’s web design team, who I’ve worked with on previous projects. Because of that shared history, I had a solid understanding of their implementation needs and was able to deliver usable files in my first export without revision.
Lessons Learned
This project reinforced the importance of planning for tool compatibility when working across platforms like Figma, Illustrator, and SVGator.
While I already prioritize clean file organization and clarity, this experience required constant attention to detail, especially when translating nuanced design elements into motion.
Small shifts in alignment, spacing, or timing had a noticeable impact, so precision was key. It also reminded me how valuable past collaboration can be. Knowing Suralink’s preferences and technical requirements made the process smooth from the start and allowed me to deliver usable files on the first export.
You can view the animations live on Suralink’s homepage.