diff options
Diffstat (limited to 'card.svg')
| -rw-r--r-- | card.svg | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/card.svg b/card.svg new file mode 100644 index 0000000..f648df3 --- /dev/null +++ b/card.svg @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 635 889"> + <defs> + <pattern id="Diagonals" width="20" height="20" patternUnits="userSpaceOnUse"> + <path d="M0 0 L20 20" class="inner"/> + <path d="M20 0 L0 20" class="inner"/> + </pattern> + <style type="text/css"><![CDATA[ + .scene { perspective: 100cm; } + .card { + transform: translateZ(-10cm) rotateY(0); + transform-origin: center center; + transform-style: preserve-3d; + transition: 300ms transform; + cursor: pointer; + user-select: none; + perspective: inherit; + font-family: sans-serif; + font-weight: bold; + } + .card.flipped { transform: translateZ(-10cm) rotateY(180deg); } + .side { backface-visibility: hidden; transform-origin: center center; } + .front { transform: rotateY(180deg); } + .back { transform: rotateY(0deg); } + .corner { font-size: 64px; text-anchor: middle; } + .corner.top-left { dominant-baseline: hanging; } + .corner.bottom-right {} + .center { font-size: 180px; text-anchor: middle; dominant-baseline: middle; } + .inner { stroke: #cef3be; stroke-width: 2; } + .outer { fill: url(#Diagonals); stroke: #3e632f; stroke-width: 4; } + ]]></style> + </defs> + <g class="scene"> + <g class="card" onclick="flip(this)"> + <g class="side front"> + <!-- ♠ ♥ ♦ ♣ --> + <rect width="635" height="889" rx="35" fill="white"/> + <text class="corner top-left" x="50" y="40">5</text> + <text class="corner top-left" x="50" y="104">♣</text> + <text class="corner bottom-right" x="585" y="785">♣</text> + <text class="corner bottom-right" x="585" y="849">5</text> + <text class="center" x="177.5" y="130">♣</text> + <text class="center" x="177.5" y="789">♣</text> + <text class="center" x="317.5" y="450">♣</text> + <text class="center" x="457.5" y="130">♣</text> + <text class="center" x="457.5" y="789">♣</text> + </g> + <g class="side back"> + <rect width="635" height="889" rx="35" fill="white"/> + <rect width="595" height="849" rx="25" x="20" y="20" class="outer"/> + </g> + </g> + </g> + <script><![CDATA[ + function flip(element) { element.classList.toggle("flipped"); } + ]]></script> +</svg> |