Making a ball follow the shape of an "X"

[toolman]

Hi there,
I am trying to create an animated effect in which a ball/circle follows the outline of an “X” letter.

This is what I have as a starting point, but I can’t work out how to add and animate the ball. I would like the ball to animate when the user hovers on the “X”.

Starting point fiddle: https://jsfiddle.net/toolman/zL2opyg3/

This is a similar fiddle worked on before:

I basically want to have 5 key point boxes around the “X” (with one in the middle) and then then the user hovers over the entire section, the ball animates.

I guess it can animate inside of the X, similar to the above fiddle with the “M”, or animate it in a direction like this:

Hopefully this diagram makes sense, but I would like the ball to start in teh middle and follow the outline of the X going from left/anticlockwise.

can anyone help me achieve this? Or are there any online tools that I can use that will allow me to create such animation?

Thanks!

[snadyleiby]

Hi there toolman,

this can be done very easily with SVG…

Full Page View
https://codepen.io/Snady_Leiby/full/dyxXOBB

Editor View
https://codepen.io/Snady_Leiby/pen/dyxXOBB

[toolman]

That’s awesome!

How did you do that - did you use a tool to do that?

Also, how can I have it so it only happens when hovering over the X. And which values of the SVG increase the size?

Thank you once again!

[snadyleiby]

@toolman

how can I have it so it only happens when hovering over the X.

That is not possible with the example which I provided.

Further reading
MDN animateMotion attributes

If you would be content with a fixed width SVG then it can be done
with CSS as in this example…

Full Page View
https://codepen.io/Snady_Leiby/full/yLmJXyv

Editor View
https://codepen.io/Snady_Leiby/pen/yLmJXyv

This CSS…

offset-path: path('M161,80 126,26 26,26 112,154 26,280 126,280 161,228 196,280 296,280 212,154 296,26 196,26z');

…varies according to the SVG width setting.

Do you have a particular width in mind for the SVG?
If so let me know and I will recode the offset-path to suit.

[snadyleiby]

@toolman

How did you do that - did you use a tool to do that?

No tool was needed, I just took the 12 coordinates of the
image which you supplied and created the SVG with them.

[sibertius]

@snadyleiby

That is not possible with the example which I provided.

One way to achieve this (quick and dirty) is to use 2 svg images. One without animation and one with animation. And when hovering switch to animation?

I did this to change colors of an icon before I realized I could use <symbol> and change the color via CSS.

[PaulOB]

@snadyleiby

That is not possible with the example which I provided.

You could just set the circle to opacity:0 by default and then on svg hover set it to opacity:1.

It means it’s always animating but you only see it on hover.

e.g.

[PaulOB]

If the animation is moved to the CSS you can use the same path as the SVG and that allows you to pause the animation and it will restart from where it left off.

e.g.

It’s basically the same code except the keyframes do the animation and not the svg code.

[toolman]

This is perfect, thank you so much!

I need to learn how to set up paths from an SVG. How do you work out the coordinates? For example a square; how would you find what coordinates the 4 corners are?

[rpg_digital]

I need to learn how to set up paths from an SVG. How do you work out the coordinates? For example a square; how would you find what coordinates the 4 corners are?

I was interested in this too

You can download inkscape to create your svgs.

Takes a bit of trial and error, but it is quite intuitive to use.

I opened the svg in notepad++

Then taking Paul’s example, I pasted the path data into the html and css.

Edit: I’m a novice in this regard, so I am sure there is a more polished way of achieving this.