@younestouati/playing-cards-standard-deck

6.0.1 • Public • Published

Forked version of Responsive Playing Cards. Cards have been base64 encoded and are exported as svg - and responsiveness disabled. Joker added as well.

Base64 encoding makes the the cards larger (in terms of kb), but makes them more suitable for use in Safari, that otherwise tends to 'flash' if an element with an svg is (re)mounted in the DOM.

Responsive Playing Cards

tldr; Responsive SVG playing cards. Most cards ~2K, picture cards are ~65k. With gzip, they’re about half that. When rendered <= 75px wide, they switch to a simpler layout for readability.

LGPL licensed.

Introduction

This is a deck of SVG playing cards which was created for a client project in January 2015. The project is targeted specifically at Chromium, so the cards may not work on other platforms (pull requests welcomed).

The cards are based on the deck produced by Chris Aguilar, hosted over at Google Code, with the exception of the Ace of Spades, which was taken from Byron Knoll’s public domain cards also at Google Code.

What do you get?

Each card has been hand-optimized to reduce the file size as far as possible, by re-using and transforming paths. This takes the size of a normal card down from ~6.5k to about ~2.5k (~1.7k minified, 800b minified + zipped). Picture cards are obviously more complex, at ~90k (~65k minified, ~30k minified + zipped).

200px 160px 120px 80px 40px 30px 20px
Three of Diamonds, 200px wide Three of Diamonds, 160px wide Three of Diamonds, 120px wide Three of Diamonds, 80px wide Three of Diamonds, 60px wide Three of Diamonds, 40px wide Three of Diamonds, 30px wide

The cards also have embedded media queries, which display a simpler layout if the card is scaled below 75px wide.

Platforms

The cards are specified in SVG Tiny 1.2, and have been tested on Chrome 40, Firefox 35, Safari 8, Mobile Safari 8, Opera 11, Opera Classic for Android, Windows Phone 8.1, Internet Explorer 11 (Windows 7) and Internet Explorer 11 (Windows RT 8.1).

Bugs

The “mini” versions of the cards won’t render on Firefox for Android, Mobile Safari 6, and Android Browser 4.1, because they don’t support media queries inside SVG. But the big cards are displayed instead, so at least it fails nicely!

Credits

The original cards were created by Chris Aguilar. The Ace of Spades was by Byron Knoll.
They were optimized by Mike Hall with help from Warren Lockhart.

License

LGPL 3.0

Dependencies (0)

    Dev Dependencies (2)

    Package Sidebar

    Install

    npm i @younestouati/playing-cards-standard-deck

    Weekly Downloads

    1

    Version

    6.0.1

    License

    LGPL-3.0

    Unpacked Size

    2.59 MB

    Total Files

    59

    Last publish

    Collaborators

    • younestouati