image shatter

[jeffreybarry]

Take an SVG, break it apart at a certain timing or upon an action to shatter into pieces. Use svg from undraw.

[jeffreybarry]

Try figma. A lot of people talk about it online, though I do haver Illustrator.

Using the 'icon design' image from undraw so that I can shatter the heart...a broken heart. (Great for Valentine's Day video!)

[jeffreybarry]

In undraw, use the dropdown to make it a blood red like #b20000

[jeffreybarry]

Can just drag and drop svg into figma. Easy. Atom: also on mac can just drag and drop folder onto atom to open folder...easier than navigating the filesystem.

[jeffreybarry]

figma: want to delete unneeded parts of image by highlighting and just pressing delete. Does it save the changes automatically? undraw is a really good way to develop a better understanding of vector illustrations...high quality illustrations.

[jeffreybarry]

But with the heart, I only have one vector. How to segment that into different parts?

[jeffreybarry]

Hmmm, figma also has an option to copy heart shape as css.

[jeffreybarry]

I have created different vectors within the heart for testing. Figma provides the option to export with IDs.

Test the animation of these groups.

[jeffreybarry]

SVG: animating groups within an svg

[jeffreybarry]

SVGO: https://github.com/svg/svgo I hear a lot about this tool. It's a node tool for optimizing svg files. Not sure how it works.

[jeffreybarry]

Okay, figured out what I need to do just by thinking deeply about what I'm trying to accomplish.

I cannot segment the original svg as I expected. However, I can use that shape as an outline by setting its fill to transparent and sending it to the back. In the front, I create as many slices as needed. Each slice is named with an ID (still having problems saving svg with id paths in figma, but can enter those manually if necessary). Each slice is the color of the heart. Together, the slices form the heart shape. (Not quite sure how to handle the curve areas but I'm assuming that's manageable.)

Then in CSS, or JS, animate as desired.

[jeffreybarry]

Interesting article: https://www.cassie.codes/posts/creating-my-logo-animation/

I'm wondering about clip path

[jeffreybarry]

So, what do I want the slices to do? What does it mean to create an effect that is like shattering?

1. slices vibrate
2. then fall down

[jeffreybarry]

The animate.css library becomes a simple way to proceed from here. Now that you have the svg setup with the slices and IDs, you proceed to focus on the animation. See if you can do it with CSS w/o JS. Only go to JS if you need additional features, right? Or optimization.