diff --git a/.drone.yml b/.drone.yml
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/Dockerfile b/Dockerfile
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index 6c760b3..7753f32
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# HyperSet
+# HyperSet 
 
 ## Notes
 - [Website link](https://codefirst.iut.uca.fr/containers/HyperSet-hyperset)
diff --git a/index.html b/index.html
old mode 100644
new mode 100755
index 842313c..04d117e
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>HyperSet</title>
-    <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/">
+    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
     <link rel="stylesheet" type="text/css" href="./styles/style.css">
     <link rel="stylesheet" type="text/css" href="./styles/index.css">
 </head>
@@ -13,7 +13,7 @@
 <header>
     <ul id="nav-bar">
         <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
-        <li><a href="./views/cards.html">Card Test</a></li>
+        <li><a href="./views/cards-test.html">Card Test</a></li>
         <li><a href="./views/tutorial.html">Tutorial</a></li>
         <li><a href="./views/leaderboard.html">Leaderboard</a></li>
         <li><a href="./views/about.html">About</a></li>
diff --git a/src/Console/Console.html b/src/Console/Console.html
old mode 100644
new mode 100755
diff --git a/src/Console/main.js b/src/Console/main.js
old mode 100644
new mode 100755
diff --git a/src/Model/Card.js b/src/Model/Card.js
old mode 100644
new mode 100755
diff --git a/src/Model/Const.js b/src/Model/Const.js
old mode 100644
new mode 100755
index 9c492fd..e2a765c
--- a/src/Model/Const.js
+++ b/src/Model/Const.js
@@ -1,7 +1,23 @@
-const TAB_COLOR = ['red','purple','green','blue','orange'];
-const TAB_NUMBER = [1,2,3,4,5];
-const TAB_SHAPE = ['diamond','oval','wave','star','triangle'];
-const TAB_FILLING = ['empty','stripped','full','pointed','squared'];
-const TAB_OUTLINE = ['continuous','dotted','hyphen','cloudy','sharpy'];
-const ATTRIBUTES=[TAB_COLOR,TAB_NUMBER,TAB_SHAPE,TAB_FILLING,TAB_OUTLINE];
-const IDX_ATTRIBUTES=["color","number","shape","filling","outline"];
+const TAB_COLOR = ['red', 'purple', 'green', 'blue', 'orange'];
+const TAB_NUMBER = [1, 2, 3, 4, 5];
+const TAB_SHAPE = ['diamond', 'oval', 'squiggle', 'star', 'triangle'];
+const TAB_FILLING = ['empty', 'stripped', 'fullO', 'pointed', 'squared'];
+const TAB_OUTLINE = ['full', 'dot', 'rect', 'spade', 'sharp'];
+const ATTRIBUTES = [TAB_COLOR, TAB_NUMBER, TAB_SHAPE, TAB_FILLING, TAB_OUTLINE];
+const IDX_ATTRIBUTES = ["color", "number", "shape", "filling", "outline"];
+
+const SHAPE_PATH = {
+  squiggle: "m67.892902,12.746785c43.231313,-6.717223 107.352741,6.609823 121.028973,58.746408c13.676233,52.136585 -44.848649,161.467192 -45.07116,204.650732c4.566246,56.959708 83.805481,87.929227 22.329944,105.806022c-61.475536,17.876795 -126.122496,-1.855045 -143.73294,-41.933823c-17.610444,-40.07878 49.274638,-120.109409 46.14822,-188.091997c-3.126418,-67.982588 -21.873669,-70.257464 -49.613153,-80.177084c-27.739485,-9.919618 5.678801,-52.283035 48.910115,-59.000258z",
+  diamond: "m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z",
+  triangle: "M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z",
+  star: "m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z",
+  oval: "m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
+};
+
+const OUTLINE_SPEC = {
+  full: {},
+  dot: { "stroke-dasharray": "1 20", "stroke-linecap": "round" },
+  rect: { "stroke-dasharray": 70 },
+  spade: { "stroke-dasharray": "10 15", "stroke-width": 40 },
+  sharp: {}
+};
diff --git a/src/Model/Deck.js b/src/Model/Deck.js
old mode 100644
new mode 100755
index 3bef3cf..bde7dac
--- a/src/Model/Deck.js
+++ b/src/Model/Deck.js
@@ -1,108 +1,108 @@
-class Deck{
-    /**
-     * 
-     * @param {*} attributes : array with the attributes index for the cards
-     * @author Bastien Jacquelin
-     */
-    constructor(attributes,nbCards){
-        this.nbCards=nbCards;// number of card to do a set
-        this.allCards=this.createCards(attributes);// All the cards in the game
-        this.remainingCards=[];//init tab null
-        this.remainingCards=this.remainingCards.concat(this.allCards);// cards in the stack, init = all before creation of deck -> remove 
-        this.outputCards=[];// 12 cards lay on the table 
-        this.setMade=[];// array of array with all the set already mades (array of set)
-        this.createDeck(12);
+class Deck {
+  /**
+   * 
+   * @param {*} attributes : array with the attributes index for the cards
+   * @author Bastien Jacquelin
+   */
+  constructor(attributes, nbCards) {
+    this.nbCards = nbCards;// number of card to do a set
+    this.allCards = this.createCards(attributes);// All the cards in the game
+    this.remainingCards = [];//init tab null
+    this.remainingCards = this.remainingCards.concat(this.allCards);// cards in the stack, init = all before creation of deck -> remove 
+    this.outputCards = [];// 12 cards lay on the table 
+    this.setMade = [];// array of array with all the set already mades (array of set)
+    this.createDeck(12);
+  }
+  /**
+   * 
+   * @param attributes : index of the attributes used
+   * @returns all cards: 81 in case of 4 attributes and 1024 if 5 attributes
+   * @author Bastien Jacquelin
+   */
+  createCards(attributes) {//working✅
+    let factory = new Factory(attributes, this.nbCards);
+    return factory.product;
+  }
+  /**
+   * @brief creation of the deck : 12 random cards lay in front of the playe and remove card from the remainingCard array
+   * @author Bastien Jacquelin
+   */
+  createDeck(nbCards) {//toTest⌛
+    if (this.remainingCards.length < this.nbCards) {// no more cards
+      console.log("PLUS DE CARTES");
+      return;
     }
-    /**
-     * 
-     * @param attributes : index of the attributes used
-     * @returns all cards: 81 in case of 4 attributes and 1024 if 5 attributes
-     * @author Bastien Jacquelin
-     */
-    createCards(attributes){//working✅
-        let factory = new Factory(attributes,this.nbCards);
-        return factory.product;
-    }
-    /**
-     * @brief creation of the deck : 12 random cards lay in front of the playe and remove card from the remainingCard array
-     * @author Bastien Jacquelin
-     */
-    createDeck(nbCards){//toTest⌛
-        if(this.remainingCards.length<this.nbCards){// no more cards
-            console.log("PLUS DE CARTES");
-            return;
-        }
-        else{
-            for (let i=0; i<nbCards; i++){
-                const rand = this.getRandCard();
-                this.outputCards.push(this.remainingCards[rand]);
-                this.remainingCards.splice(rand,1);
-            }
-            let nbSets=setsCounter(this.outputCards,this.nbCards);
-            console.log("nbSets",nbSets);
-            console.log("outputCards.length",this.outputCards.length);
-            console.log("remainingCards.length",this.remainingCards.length);
-            if(nbSets==0){
-                this.createDeck(this.nbCards)
-            }
-        }
+    else {
+      for (let i = 0; i < nbCards; i++) {
+        const rand = this.getRandCard();
+        this.outputCards.push(this.remainingCards[rand]);
+        this.remainingCards.splice(rand, 1);
+      }
+      let nbSets = setsCounter(this.outputCards, this.nbCards);
+      console.log("nbSets", nbSets);
+      console.log("outputCards.length", this.outputCards.length);
+      console.log("remainingCards.length", this.remainingCards.length);
+      if (nbSets == 0) {
+        this.createDeck(this.nbCards)
+      }
     }
+  }
+
+  /**
+   * 
+   * @returns random number in range of the array size 
+   * @author Bastien Jacquelin
+   */
+  getRandCard() {//working✅
+    const random = Math.floor(Math.random() * this.remainingCards.length);
+    return random;
+  }
 
-    /**
-     * 
-     * @returns random number in range of the array size 
-     * @author Bastien Jacquelin
-     */
-    getRandCard(){//working✅
-        const random = Math.floor(Math.random() * this.remainingCards.length);
-        return random;
+  /**
+   * @brief verification of the validity of the set selected, call removeFromoutputCards when set is confirmed
+   * @param {*} selectedCards array of cards : set 
+   * @author Bastien Jacquelin
+   */
+  checkSet(selectedCards) {//toTest⌛
+    if (true) {//isSet(selectedCards)){// is a set
+      if (this.outputCards.length == 0) {
+        console.log("C'est win")
+        return 2;
+      }
+      else {
+        this.removeFromoutputCards(selectedCards);
+        return 1;
+      }
     }
+    else if (this.remainingCards.length < this.nbCards) {
+      console.log("C'est win")
+      return 2;
+    }
+    return 0;
+  }
 
-    /**
-     * @brief verification of the validity of the set selected, call removeFromoutputCards when set is confirmed
-     * @param {*} selectedCards array of cards : set 
-     * @author Bastien Jacquelin
-     */
-    checkSet(selectedCards){//toTest⌛
-        if(true){//isSet(selectedCards)){// is a set
-            if(this.outputCards.length==0){
-                console.log("C'est win")
-                return 2;    
-            }
-            else{
-                this.removeFromoutputCards(selectedCards);
-                return 1;
-            }
-        }
-        else if(this.remainingCards.length<this.nbCards){
-            console.log("C'est win")
-            return 2;
+  /**
+   * @brief when a set is made, need to remove the card from the array remainingCards
+   * @param {*} selectedCards cards which need to be removed from the outputcards
+   * @author Bastien Jacquelin
+   */
+  removeFromoutputCards(selectedCards) {//working✅
+    let set = [];
+    selectedCards.forEach(element => {
+      for (let i = 0; i < this.outputCards.length; i++) {
+        let e = this.outputCards[i]
+        if (e.equals(element)) {
+          set.push(e);
+          this.outputCards.splice(i, 1);
         }
-        return 0;
+      }
+    });
+    if (set.length < 1) {
+      throw new UnFoundCardException(selectedCards);
     }
-    
-    /**
-     * @brief when a set is made, need to remove the card from the array remainingCards
-     * @param {*} selectedCards cards which need to be removed from the outputcards
-     * @author Bastien Jacquelin
-     */
-    removeFromoutputCards(selectedCards){//working✅
-        let set=[];
-        selectedCards.forEach(element => {
-            for(let i=0; i<this.outputCards.length;i++){
-                let e = this.outputCards[i]
-                if(e.equals(element)){
-                    set.push(e);
-                    this.outputCards.splice(i,1);
-                }
-            }
-        });
-        if(set.length<1){
-            throw new UnFoundCardException(selectedCards);
-        }
-        else{
-            this.setMade.push(set);
-            this.createDeck(this.nbCards)
-        }
+    else {
+      this.setMade.push(set);
+      this.createDeck(this.nbCards)
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/Model/Exceptions.js b/src/Model/Exceptions.js
old mode 100644
new mode 100755
diff --git a/src/Model/Factory.js b/src/Model/Factory.js
old mode 100644
new mode 100755
diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js
new file mode 100755
index 0000000..048befd
--- /dev/null
+++ b/src/Model/card-to-html.js
@@ -0,0 +1,65 @@
+class CardToHtml {
+  
+  static create(card) {
+    const gameWindow = document.querySelector('#main');
+    const div = document.createElement('div');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+    div.setAttribute('class','card');
+    svg.setAttribute('class','item');
+    svg.setAttribute('height','160');
+    svg.setAttribute('width','80');
+    svg.setAttribute('viewBox','0 0 200 400');
+    
+    // Create paths + add to svg
+    for(let j = 0; j < 2; j++) {
+      const path = this.createPath(card.shape,card.color,card.filling,card.outline,j);
+      svg.appendChild(path);
+    }
+
+    // Loop to add svg card.number times
+    for(let i = 0; i < card.number; i++) {
+      div.appendChild(svg.cloneNode(true))
+    }
+
+    gameWindow.appendChild(div);    
+  }
+
+  static createPath(shape,color,filling,outline,step) {
+    // The way to create svg element (differs from html element)
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+
+    if(shape === null) shape = 'oval';
+    if(color === null) color = '000000';
+    if(filling === null) filling = 'fill';
+
+    // Add lots of attributes
+    path.setAttribute("d",SHAPE_PATH[shape]);
+    path.setAttribute('stroke',`#${color}`);
+    path.setAttribute('fill',`#${color}`);
+    path.setAttribute('stroke-width','18');
+
+    // Case shape do not have color
+    if(filling === 'none') {
+      path.setAttribute('fill','none');
+    }
+
+    // Add svg attributes for shape outline
+    if(outline !== null){
+      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){
+        path.setAttribute(k,OUTLINE_SPEC[outline][k]);
+      });
+
+      path.setAttribute('stroke','#000000');
+    }
+
+    // Diff between two paths in svg
+    if (step === 0) {
+      path.setAttribute('mask',`url(#mask-${filling})`);
+    } else {
+      path.setAttribute('fill', 'none');
+    }
+
+    return path;
+  }
+}
\ No newline at end of file
diff --git a/src/algo.js b/src/algo.js
old mode 100644
new mode 100755
diff --git a/styles/card.css b/styles/card.css
old mode 100644
new mode 100755
diff --git a/styles/index.css b/styles/index.css
old mode 100644
new mode 100755
diff --git a/styles/style.css b/styles/style.css
old mode 100644
new mode 100755
diff --git a/test/.gitkeep b/test/.gitkeep
old mode 100644
new mode 100755
diff --git a/test/testsIsHyperset.js b/test/testsIsHyperset.js
old mode 100644
new mode 100755
diff --git a/views/cards-test.html b/views/cards-test.html
new file mode 100755
index 0000000..f1e7825
--- /dev/null
+++ b/views/cards-test.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Card Géneration</title>
+    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
+    <link rel="stylesheet" type="text/css" href="../styles/style.css">
+    <link rel="stylesheet" type="text/css" href="../styles/card.css">
+</head>
+
+<body>
+  <!--
+    stroke-dasharray="10 15" tapis stroke-width=40
+    stroke-dasharray="70" rect
+    stroke-dasharray="1 20" round
+    stroke-linecap="round" round
+  -->
+  <svg width="200" height="400" style="position: fixed; z-index: -1">
+    <defs>
+      <pattern
+        id="pattern-stripe"
+        width="2"
+        height="20"
+        patternUnits="userSpaceOnUse"
+      >
+        <rect width="2" height="8" fill="#fff" />
+      </pattern>
+
+      <pattern
+        id="pattern-grid"
+        width="30"
+        height="30"
+        patternUnits="userSpaceOnUse"
+      >
+        <rect width="7.5" height="30" fill="#fff" />
+        <rect width="30" height="7.5" fill="#fff" />
+      </pattern>
+
+      <pattern
+        id="pattern-dot"
+        width="40"
+        height="40"
+        patternUnits="userSpaceOnUse"
+      >
+        <circle cx="18" cy="18" r="12" fill="#fff" />
+      </pattern>
+
+      <mask id="mask-stripe">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-stripe)"
+        />
+      </mask>
+
+      <mask id="mask-dot">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-dot)"
+        />
+      </mask>
+
+      <mask id="mask-grid">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-grid)"
+        />
+      </mask>
+    </defs>
+  </svg>
+
+  <div id="main">
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+
+      <path
+        d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
+        stroke-dasharray="1 20"
+        stroke-linecap="round"
+        stroke-width="18"
+        stroke="#000000"
+        fill="#800080"
+        mask="url(#mask-grid)"
+      />
+
+      <path
+        d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
+        stroke-dasharray="1 20"
+        stroke-linecap="round"
+        stroke-width="18"
+        stroke="#000000"
+        fill="none"
+        mask="none"
+      />
+
+      </svg>
+    </div>
+  </div>
+
+  <script src="../src/Model/Card.js"></script>
+  <script src="../src/Model/Card5.js"></script>
+  <script src="../src/Model/Const.js"></script>
+  <script src="../src/Model/card-to-html.js"></script>
+  <script>
+    const testCard1 = new Card5('ed5467',3,'diamond','grid','rect');
+    const testCard2 = new Card5('78ef56',3,'star','dot','dot');
+    const testCard3 = new Card5('79ec36',3,'squiggle','stripe','spade');
+    const testCard4 = new Card5('79ec36',3,'oval','full','full');
+    const testCard5 = new Card5('79ec36',3,'triangle','none','spade');
+
+    CardToHtml.create(testCard1);
+    CardToHtml.create(testCard2);
+    CardToHtml.create(testCard3);
+    CardToHtml.create(testCard4);
+    CardToHtml.create(testCard5);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/cards.html b/views/cards.html
old mode 100644
new mode 100755
index 2f1a058..eb0ddac
--- a/views/cards.html
+++ b/views/cards.html
@@ -10,28 +10,50 @@
 </head>
 
 <body>
+  <!--
+    stroke-dasharray="10 15" tapis
+    stroke-dasharray="70" rect
+    stroke-dasharray="1 20" round
+    stroke-linecap="round" round
+  -->
   <svg width="200" height="400" style="position: fixed; z-index: -1">
     <defs>
+
       <path
         id="squiggle"
         d="m67.892902,12.746785c43.231313,-6.717223 107.352741,6.609823 121.028973,58.746408c13.676233,52.136585 -44.848649,161.467192 -45.07116,204.650732c4.566246,56.959708 83.805481,87.929227 22.329944,105.806022c-61.475536,17.876795 -126.122496,-1.855045 -143.73294,-41.933823c-17.610444,-40.07878 49.274638,-120.109409 46.14822,-188.091997c-3.126418,-67.982588 -21.873669,-70.257464 -49.613153,-80.177084c-27.739485,-9.919618 5.678801,-52.283035 48.910115,-59.000258z"
+        stroke-dasharray="70"
+        stroke="#000000"
       />
+
       <path
         id="oval"
         d="m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
+        stroke-dasharray="10 15"
+        stroke="#000000"
       />
+
       <path
         id="diamond"
         d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
-      />
+        stroke-dasharray="1 20"
+        stroke-linecap="round"
+        stroke="#000000"
+        />
+
       <path 
         id="star" 
         d="m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z"
-      />
+        stroke-dasharray="30"
+        stroke="#000000"
+        />
+
       <path
         id="triangle"
         d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z"
-      />
+        stroke="#000000"
+        />
+
       <pattern
         id="pattern-stripe"
         width="2"
@@ -93,7 +115,7 @@
   </svg>
 
   <div id="main">
-    <div class="card">
+    <!-- <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
         <use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
@@ -190,30 +212,130 @@
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
       </svg>
-    </div>
+    </div> -->
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
+        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" fill="#800080" mask="url(#mask-grid)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" fill="#800080" mask="url(#mask-dot)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="40">'</use>
+      </svg>
+    </div>
+
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#squiggle" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#squiggle" fill="#800080" mask="url(#mask-grid)"></use>
+        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#squiggle" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#squiggle" fill="#800080" mask="url(#mask-dot)"></use>
+        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+    </div>
+
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#diamond" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#diamond" fill="#800080" mask="url(#mask-grid)"></use>
+        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#diamond" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#diamond" fill="#800080" mask="url(#mask-dot)"></use>
+        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+    </div>
+
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#star" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#star" fill="#800080" mask="url(#mask-grid)"></use>
+        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#star" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#star" fill="#800080" mask="url(#mask-dot)"></use>
+        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+    </div>
+
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#triangle" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#triangle" fill="#800080" mask="url(#mask-grid)"></use>
+        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#triangle" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#triangle" fill="#800080" mask="url(#mask-dot)"></use>
+        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
     </div>
   </div>
