More paints in a better version with React in my Github

www.csspen.es →

### Click on Next to start :)

1. .heart { width: 300px; height: 300px; } .heart-body { width: 50%; height: 50%; background: gray; }
2. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; background: gray; }
3. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; }
4. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 0; content: ''; width: 100%; height: 100%; background-color: gray; }
5. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 100%; content: ''; width: 100%; height: 100%; background-color: gray; }
6. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 100%; content: ''; width: 100%; height: 100%; background-color: gray; border-radius: 50%; }
7. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 50%; content: ''; width: 100%; height: 100%; background-color: gray; border-radius: 50%; }
8. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:before, .heart-body:after { position: absolute; left: 50%; content: ''; width: 100%; height: 100%; background-color: gray; border-radius: 50%; }
9. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:before, .heart-body:after { position: absolute; content: ''; width: 100%; height: 100%; background-color: gray; border-radius: 50%; } .heart-body:before { top: 50%; } .heart-body:after { left: 50%; }
10. .heart { width: 300px; height: 300px; margin: 200px; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:before, .heart-body:after { position: absolute; content: ''; width: 100%; height: 100%; background-color: inherit; border-radius: 50%; } .heart-body:before { top: 50%; } .heart-body:after { left: 50%; }