Playing card

Source: Uiverse ↗
Author: nanda248
Licence: MIT

Loading…

Code

<div class="main">
  <div class="card">
    <div class="i1">
      <span class="corner-text">A</span>
      <svg viewBox="0 0 122.88 107.39">
        <defs></defs>
        <title>red-heart</title>
        <path
          d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
          class="heart-icon"
        ></path>
      </svg>
    </div>

    <div class="center-shape">
      <svg viewBox="0 0 122.88 107.39">
        <defs></defs>
        <title>red-heart</title>
        <path
          d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
          class="heart-icon"
        ></path>
      </svg>
    </div>

    <div class="i2">
      <span class="corner-text">A</span>
      <svg viewBox="0 0 122.88 107.39">
        <defs></defs>
        <title>red-heart</title>
        <path
          d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
          class="heart-icon"
        ></path>
      </svg>
    </div>
  </div>

  <div class="bg-card-1"></div>

  <div class="bg-card-2"></div>
</div>

Prompt

Build "Playing card", a card animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes, inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/nanda248/neat-tiger-26 (nanda248, MIT).