I'm not sure that I see the "hole" effect that you mean in example 1. I don't see the heart at all in the result of that one. I do see the rotating heart in the 2nd example. What exactly do you want the final thing to look like?
I updated the 1st pen, it didn't work in Chrome because of "-webkit" prefix (I only checked Firefox at first)...
So, I want the final thing to look like the 1st pen, but I want the heart/hole to rotate like it does in the 2nd pen. I hope it's clear now. :)
Attached a screenshot of how the "hole" looks like now (dev-to-uploads.s3.amazonaws.com/up...).
Thanks!
Cool effect you are going for. Not sure if you can animate the mask-image property. You might need to animate a div with the mask-image set. Or, have you tried animating the heart within the svg itself and then using the animated svg as the mask-image?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm not sure that I see the "hole" effect that you mean in example 1. I don't see the heart at all in the result of that one. I do see the rotating heart in the 2nd example. What exactly do you want the final thing to look like?
I updated the 1st pen, it didn't work in Chrome because of "-webkit" prefix (I only checked Firefox at first)...
So, I want the final thing to look like the 1st pen, but I want the heart/hole to rotate like it does in the 2nd pen. I hope it's clear now. :)
Attached a screenshot of how the "hole" looks like now (dev-to-uploads.s3.amazonaws.com/up...).
Thanks!
Cool effect you are going for. Not sure if you can animate the mask-image property. You might need to animate a div with the mask-image set. Or, have you tried animating the heart within the svg itself and then using the animated svg as the mask-image?