SVG mask height on swipe down

[fd_alistair]

Hi there - I'm trying to simulate the slicing of vegetables with a downwards swipe and I'm really struggling to find a viable solution - I have had a look at the below post but it's not quite what I'm after. I need to have multiple points of swipe down, fix it so you can only go down (not back up) and then have an event once each one is complete.

 

I believe this can be done with SVG masking what is the background (or chopping board) on top of the vegetable.

 

Any help would be appreciated.

 

 

[ZachSaucier]

Hey fd_alistair. A few questions about your end goal:

1. Are there set points of where users will be able to do this? or can it be anywhere along the object?
2. Is there a limit of how many "cuts" a user can make?
3. Are you simply wanting to cover the original object (i.e. layering) or does it actually need to cut up the original shape into multiple shapes?
4. How does the user specify where to make a cut? A pre-made draggable? A click/touch somewhere? Something else?

Once we have a better picture of what you're really needing perhaps we can help lead you towards a relevant solution.

[mikel]

... a simple cut

 

See the Pen poEMepP by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[fd_alistair]

Very nice - I'll study it

[mikel]

 

OK - second lesson

 

See the Pen RwGXVLo by mikeK (@mikeK) on CodePen

 

Happy cutting ...

Mikel