How to make this heart icon
I have made heart icon using 2 circles and one div angled. But i cant make it just show border of heart shape and make inside of heart transparent. I want heart like this where it just shows outline of heart and inside it must be transparent. When click on it , it should turn red. Any kind of help i will be very thankful❤️.
14 Replies
Use an svg
If you are able to make one solid heart, then you can make the outline by stack one smaller heart on top of a larger one.
'Font icons' || 'canvas'
Icon fonts are not great as you for the user to download a (usually rather heavy) font for only a few icons. The trade off can be ok if you usea lot of icons, but most likely you won't.
Canvas should not be used for that.
Both are bad for accessibility.
So as Vince said, svg is the way. You could use a png or a jpeg too, but the last two would be heavier that an svg and would not scale up as well if you needed them to.
svg's indeed are the better solution
But as a little fun exercise for my self, I did it with a single div. with borders and clippath
https://codepen.io/MarkBoots/pen/vYvPOpZ
@MarkBoots Achieved this using svg. but am actually impressed by this solution you provided. Thanks!
I didn't want to be left out so have also created an alternative CSS only method in a slightly different way https://codepen.io/cbolson/pen/wvROMzG
Whilst simple enough, it is not really practical as it has too many magic numbers.
yea about the same idea. i did needed the clip to get rid of the overlapping border incase of no bg
icons.getbootstrap.com has a full and an empty heart that you can use freely without having to add any license information (if you dont use a "substantial" set of the icons)
dont re-invent the wheel with css and stuff, if there is a much more robust solution
it has a filled and an empty heart
if you need to fill it on hover or something, that isnt hard
Also because there is a gradient behind make the smaller heart black and then use
mix-blend-mode: lighten on the hearts so that the lighter background shows throughI missed the bit about being transparent 🤦♂️ ... I have done another one with a slightly different approach.
This version also fixes the need for magic-numbers
https://codepen.io/cbolson/pen/wvROMdz
nice, was thinking about that way too.
that has some gaps:
if you really want to use css, why not a clip-path?
it is percent based, so, should look good no matter the size