Card Suits

In this example below you will see how to do a Card Suits with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by davertron, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright davertron ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Card Suits</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="suit">
  <svg width="100" height="100">
    <path d="M50 25 
             L75 50 
             L50 75 
             L25 50" style="fill: red;" />
  </svg>
  <p>
    <label>Diamond</label>
  </p>
</div>

<div class="suit">
  <svg width="100" height="100">
    <!--
    <path d="M45 50 
             C 60 15 75 55 75 50
             S 70 60 50 75
             L 25 50
             Q 40 15 55 50" style="fill: red;" />
    -->
    <path d="M45 50 
             c 60 15 75 55 75 50
             " style="fill: red;" />
  </svg>
  <p>
    <label>Heart</label>
  </p>
</div>

<div class="suit">
  <svg width="100" height="100">
    <circle cx="50" cy="35" r="10" fill="black" />
    <circle cx="40" cy="50" r="10" fill="black" />
    <circle cx="60" cy="50" r="10" fill="black" />
    <circle cx="50" cy="50" r="10" fill="black" />
    <path d="M48 50 
             l -8 25
             l 20 0
             l -8 -25
             Z" style="fill: black;" />
  </svg>
  <p>
    <label>Club</label>
  </p>
</div>

<div class="suit">
  <svg width="100" height="100" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <g>
  <path d="m 50 20 
           c 4.1577 -28.726 46.869  -23.435 40.443  3.4018 
             0      0       -9.8274 37.42   -40.443 65.39" fill="red" stroke="none" />
 </g>
</svg>
  <p>
    <label>Test Heart SVG Export</label>
  </p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/davertron/card-suits-ZXMLKX */
.suit {
  display: inline-block;
}

.suit label {
  display: block;
  text-align: center;
}

Comments