Feature Request: Native SVG (Vector) Import + Stroke & Fill Reveal Animations

Feature Requests
1

Hi everyone,

I hope you’re all doing well. I’d like to share a feature request that could significantly improve Hype’s vector-based animation workflow.

What do you want to see in Hype?

A native SVG/vector import pipeline that converts imported vectors (for example, vectors exported from Affinity Studio) into editable Hype vector shapes—the same way Hype’s built-in shapes can be converted and used with the existing line-draw animation feature.

In addition, I’d love to see a Fill Reveal animation system, not limited to stroke or outline drawing. Ideally, fill animations could be synchronized with the stroke draw, allowing complex vector illustrations to be animated as a single, coherent “draw + paint” effect.

Have you found a workaround for this problem?

Yes, but the current workarounds are fragile and time-consuming:

•	Rebuilding vector shapes manually inside Hype

•	Using complex masking techniques that are difficult to maintain and scale

These approaches break the workflow, especially when working with detailed illustrations created in external vector design tools.

Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)

I don’t have a concrete example or URL to reference at this time.

This request is based on practical production needs when animating vector illustrations rather than on a specific external implementation.

How high of a priority is this for you?

[ ] Nice to Have
[ x ] Important
[ ] Can't use Hype without it

1 Like
2

The features are interesting, but perhaps it depends on the software's purpose.

Are you talking about animations that need to run on the web or tools for video output?

With the current version of Hype you can create excellent infographics and animations that run on the web, ADS production, interactive educational content for schools, plugins production for other sofwares and more.

How do you use hype in your work?

Thanks

2 Likes
3

Hi Michelangelo, thanks for the thoughtful clarification. I agree that a lot really depends on the software’s purpose and intended output.

At the moment, I’m in the process of planning and building my production workflows, and Hype is one of the tools I’m actively evaluating and positioning within that setup. My intention is to use it primarily for animations and interactions that run on the web, which is also where I think Hype already shines: infographics, interactive educational content, explainer-style visuals, and similar use cases you mentioned.

Alongside that, I’m currently testing how Hype content can be embedded inside websites built with tools like Blocs App (via the existing brick). The idea isn’t to replace site-building tools, but to use Hype as a focused layer for interactive or educational modules within larger web projects. This is still very much in an exploration and testing phase. Blocs itself is a very powerful builder, and integrating Hype inside it feels quite natural. I’ve also tested Hype’s WordPress plugin (last updated a couple of months ago), and it’s working well for my needs so far.

On the “web vs video” question: my main focus is clearly on web-delivered animation and interaction, not video output. That said, I do see potential in Hype for creating reusable animated elements that could later be repurposed in other contexts if needed (including video), without pushing Hype away from its core identity. This aspect is also something that interests me.

The main reason behind my feature request comes directly from this workflow planning. Many of the visuals I intend to animate are vector-heavy illustrations designed in external tools like Affinity Studio. While I can currently insert SVG code into Hype, those elements don’t behave like native Hype shapes, which means features such as line-draw animations and other built-in animation options aren’t available. If imported vectors could become editable, native Hype shapes, Hype’s existing animation strengths could be used much more efficiently, without rebuilding artwork or relying on fragile workarounds.

Features like fill-based reveals aren’t the main request, but would naturally follow once a solid native vector foundation is in place.

Thanks again for highlighting the current strengths and potential of Hype. it’s helpful as I think through how to place it most effectively within these workflows.

2 Likes
4

Thanks for the feedback and detailed info on your use case!

Since releasing some of the vector shape tools, the #1 request has been consistently to provide better support for importing and then manipulating SVGs via Hype's tool and animation system. So you're not alone in this being a priority :slight_smile:.

As fare as a fill reveal itself, while I may be able to visualize what you mean, I'm curious if you have specific examples I can take a look at? There's a variety of ways one might want to accomplish this or want in certain effects. I feel like the line draw animation just became a fashionable animation, so I want to make sure if there's newer fill-based ones I'm aware of how those are shaping up (pun intended). Thanks!

2 Likes
5

Hi Jonathan, thanks again for taking the time to look into this.

To connect this more directly to Hype’s existing tools: what initially triggered this idea for me was how effective the Line Draw option in the Path tools is. With a single control, it makes stroke-based animations both very easy and very approachable.

I was wondering whether a similar high-level approach could be applied more broadly. Not just to a path’s stroke, but to the element as a whole, including its fill.

In other words, rather than manually constructing masks or relying on workarounds, having a native, parameter-driven mechanism (similar in spirit to Line Draw) to control how the filled area of a shape is revealed over time feels like a natural extension of that idea.

In that sense, things like linear wipes, radial reveals, or erase-style fills are simply different parameterizations of the same underlying concept, rather than separate features.

To clarify, those specific fill-based reveal styles aren’t the primary request themselves. They’re just examples of how such a generalized, Hype-native approach could be practically used in real projects.

That’s the core of what I had in mind.

1 Like
6

Gotchya!

(I'd have to dive deeper my my recollection is that the SVG spec doesn't have a way to control fill per-se, but it can be done using masks or clip paths. Naively you could also have two elements, one that is just the path and the other that is the fill and reveal it somehow.)

1 Like
7

Hey, just wanted to say there is Export To Hype for Illustrator. A little old and somewhere limited, but it often does the job. Also, I have an unreleased (but internally used SVG to Hype importer). It breaks SVG down into a nested Hype structure and what Hype can’t handle it stuffs into inner HTML. The upside is that it works nested and exports images found in the SVG as Hype resources. I would have to check if I can release that, though.

4 Likes
8

Hi Max, thanks for sharing this information. I really appreciate you taking the time.

It’s good to know that an SVG → Hype importer exists and is being used in practice. Even just hearing how it approaches nested structures and resource handling is very insightful.

For context, my current workflow is mostly based on Affinity rather than Illustrator (which I’ve used in the past but not in my current work), but the core issue remains the same: vector-heavy designs authored outside Hype and then animated for the web.

Either way, it’s great to hear that this problem space has already been explored internally and that a working solution exists. I appreciate your work and contributions to Tumult Hype. Thanks again for chiming in and sharing these insights.

1 Like