i wanna make ang svg similar to this gif [ https://user-images.githubusercontent.com/61006057/227771568-78497ecc-e863-46f2-b29e-e15c7c20a154.gif ] I would like to have control over the position of the circle so that it can be moved according to production I have made an SVG and i'm able to move the…

Okay, Had a little time to set something up. I think this illustrates what you're trying to do. Obviously, you can add text and other niceties to this. All of this was done inside of the designer (no third party software). The crux of it is using the animateMotion element on an SVG to move it a…

Post your SVG file somewhere so that we can look at it. Make sure you imbed your SVG in your project and do not save and link it. SVG's are formatted dictionaries so you just need to find the right group of objects to bind the call to. When you insert your SVG into the designer you should see al…

Ok i have the same tree of svg and i found the circle, if i edit cx the circle move, how i can move the circle every second and go to start at the end of line? The question is how i can run a script every second for add +1 in cx?

Try This Binding: (dateExtract(now(10),"ms")+dateExtract(now(1000),"seconds")1000)%5000/5000100+240` This will move the item 100 pixels every 5 seconds, broken up into 10 ms moves. This is not the most effecient way to do this, especially if you want to use it over and over again. For that I …

The dramatically more efficient way to do timed animations in Perspective is to just set whatever properties to whatever value you want, and control the timing via a CSS animation in the advanced stylesheet.

Agree with @paul-griffith Here is a spinner animation. Stylesheet CSS looks like: @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .psc-spinner { animation: spin 1s linear infinite; } Looks like: [spinner] Looks a lot …

thank you very much, very clear in the explanation I think it is the best method!

I would like to understand how to a complex path using the CSS. Did you get that example to work and would you be willing to share the code?

[image] jgooding: I would like to understand how to a complex path using the CSS I'm not sure I understand the question you're asking.

When I look at the sample diagram that was provided by original poster, some of the paths are not straight lines or circles. I was wondering how one would go about creating that path with CSS (i.e. from Solar to the House).

I see. I would have to work something up to answer fully. But you would probably need to use a translate3d(x,y,z) command. This would allow you to move an object along a non linear path.

Animated SVG dynamically

Ignition

Steve_Laubach May 17, 2024, 8:45pm 12

I think you're looking for a stroke offset. @jlandwerlen posted an example of one here:

1 Like