Users Love Codepad

HTML
<svg class="icon user"> <use xlink:href="#user"></use> </svg> <svg class="icon heart"> <use xlink:href="#heart"></use> </svg> <svg style="display: none"> <symbol id="user" viewBox="0 0 24 24"> <title>User</title> <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path> </symbol> <symbol id="heart" viewBox="0 0 24 24"> <title>Heart</title> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path> </symbol> </svg> <svg class="codepad" data-name="Codepad Logo Dark Version" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 255"><defs><style>.cls-1{fill:#333;}</style></defs>><path id="Symbol" class="cls-1" d="M332.61 6.3l-187.8 187.79a5.89 5.89 0 0 1-8.33 0l-62.35-62.44a5.89 5.89 0 0 1 0-8.33L136.45 61a5.89 5.89 0 0 1 8.33 0L160 76.16a5.89 5.89 0 0 0 8.33 0l11.07-11.07a11.78 11.78 0 0 0 0-16.61L137.27 6.3a11.78 11.78 0 0 0-16.61 0L7.68 119.16a11.78 11.78 0 0 0 0 16.61l113 113a11.78 11.78 0 0 0 16.61 0L325.07 61a5.89 5.89 0 0 1 8.33 0l62.32 62.32a5.89 5.89 0 0 1 0 8.33L333.43 194a5.89 5.89 0 0 1-8.33 0l-15.2-15.2a5.89 5.89 0 0 0-8.33 0l-11.07 11.07a11.78 11.78 0 0 0 0 16.61l42.29 42.29a11.78 11.78 0 0 0 16.61 0l113-113a11.78 11.78 0 0 0 0-16.61L349.34 6.3a11.78 11.78 0 0 0-16.66-.07z"/></svg>
CSS
body { margin: 0; padding-top: calc(50vh - 10vw); text-align: center; background: #4ECDC4; } .icon { width: 20vw; height: 20vw; -webkit-transition: fill 0.6s; transition: fill 0.6s; fill: #333; } .user { margin-right: -2vw; } .codepad { width: 20vw; height: 20vw; color: #333; } .heart { fill: #EF5350; animation: pulse 0.4s infinite alternate ease-in-out; } @keyframes pulse { to { transform: scale(0.8); } }
JAVASCRIPT
Expand for more options Login