Hello everyone,
would it be possible to build something like this in webflow?
Here’s the XD preview link -
There’s a hover interaction for a few buttons (Virtual reality, Course authoring…)
Thank you!
Ravi
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
What do you mean by building it on Webflow?
I think It would be best idea to use it as SVG, it is a lot easier as well. And for that hover effect you might be able to do it with just CSS, by arranging those SVG elements on a certain way.
Hi @abirana can you explain how to as IMO it is not possible? I have been experimenting with SVG in WF but at this time it is IMO impossible to work with SVG’s in WF the way I use to in standard development environment. Webflow doesn’t offer <svg> tag and instead offer only one way to introduce SVG into DOM and that is via<img> tag as URL. That’s why you can’t apply any styles like fill etc.
The only way to be able introduce <svg> into DOM is via embed BUT this element has limitation 10.000 characters and that’s why is this element absolutely useless when is used for SVG unless you will have some simple shape.
On current project I have simple signature I would like to animate but even after optimisation it still 13.000 characters (before 19.000) so I’m not able to do anything so I have to use <img>.
So as you have mentioned that is possible is there anything you can share about how to?
Thanks
I meant, to write CSS code inside the SVG.
I do completely got it off my mind about using large SVG
@Stan what you are saying is completely correct for large SVG but I’ve found a solution, please the post check below
hi @abirana I’m familiar with how to work with SVG to animate it with CSS or GSAP or whatever library you use for animating strokes, mutating shapes etc. In post you have recommend they still use <svg> tag with very simple<rect> with single value for x and y and add styling into <svg> that only increase number of characters. So this is not solution for complex path, <g> etc. but thanks 
I was even thinking inject node with JS but again I have to give a <path> to be injected and was hitting 10.000 limit wall again as JS only increased number of characters we are “allowed” 
to use. So I’m still convinced that there is no way to work standard way with SVG’s in WF when you would like go beyond circle, rectangle or some simple shape bubble .
EDIT:
When the article come to exceeding length he recommend use Github as repository. This solution may work when you do website for your self. But I do websites for clients this mean I have to tell them to create a Github account or host SVG’s for all clients on my account. Both options sounds strange to me to be considered as the solution. For me the only solution is that WF will allow us to use more that 10.000 characters or introduce SVG element without character limit.
I would like to hear more about WHY is this limitation needed an what is a legitimate reason for that from WF staff anyway. 
Indeed there are many limitation with Webflow but we’ve to work with what we have.
I’m sharing the solution that I know or found.
And I do agree with your question, I also wonder why? But I do think Webflow team must be working towards it.
hi @abirana After my last comment I went on internet to look why code sections can be limited. I have found some 10.000 character limitations related to HTML string or Alert but it didn’t make much sense to me. I have also looked on databases fields limitations but again no luck to find some source to read and understand why. The only way I can thing about this is that embed content is send as string per request but when you encrypt data let say 1mil characters depend on encryption a generated string will be much shorter let say between 16-256 characters.
This let me thing that string is send as unencrypted data but I have doubt that WF will do that. Hope that someone from WF or someone who nows reasons why will read this and point us right direction to some documentation about this limitation.
