<div id="wrapper">
   <div id="box">
      <div class="side">
         <h1>Build your (strong) password here:</h1>  
      </div>
      <div class="pass-wrapper">
         <svg id="svg" viewBox="0 0 105.83333 105.83334">
         </svg>
         <div class="levels-container">
            <div data-carac="length" data-level="0" class="level-line">
               <div class="line-label">Length</div>
               <div class="line-progression"></div>
            </div>
            <div data-carac="uppercases" data-level="0" class="level-line">
               <div class="line-label">Capitals</div>
               <div class="line-progression"></div>
            </div>
            <div data-carac="specials" data-level="0" class="level-line">
               <div class="line-label">Specials</div>
               <div class="line-progression"></div>
            </div>
            <div data-carac="numbers" data-level="0" class="level-line">
               <div class="line-label">Numbers</div>
               <div class="line-progression"></div>
            </div>
         </div>
      </div>
      <div class="side">
         <div id="input-wrapper">
            <input required id="pwd" type="text">
            <label>type here...</label>
         </div>   
      </div>
   </div>
</div>


@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');$borders: #fbe493;
$texts: #f7c926;
$main1: #ff8008; // dark
$main2: #ffc837; // light
$dark1: #151414;
$dark2: #4d463e;


$font: 'Playfair Display', serif;

body{
   font-family: $font;
}

h1 {
   color: $texts;
   text-align:center;
   font-size:27px;
}
#wrapper{
   width: 100%;
   min-height: 100vh;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   //background: linear-gradient(25deg, $dark1, $dark2);
   background-color: $dark1;
}

#box{
   max-width: 750px;
   width: 100%;
}
.pass-wrapper{
   display: flex;
   justify-content: center;
   margin: 0 0 20px 0;
}

#svg{
   width: 300px;
   height: 300px;
   display: block;
   padding: 20px;
}


#input-wrapper{
   position: relative;
   height:40px;
   label{
      display: block;
      width: 100%;
      pointer-events: none;
      color: $texts;
      position: absolute;
      bottom:10px;
      transition-duration: 0.3s;
      font-size: 18px;
      opacity:1;
      left:10px;
   }
   #pwd:valid, #pwd:focus {
      & + label{
         bottom: 35px;
         font-size: 14px;
         opacity:0;         
      }
   }
}

#pwd{
   overflow: hidden;
   display:block;
   width: 100%;
   border:none;
   outline: none;
   background: transparentize($texts, 0.8);
   caret-color: #FFFFFF;
   font-size:25px;
   color: $texts;
   border-radius: 7px;
   padding: 5px 10px;
   box-sizing: border-box;
   line-height: 40px;
   height:100%;
   border: 3px solid $texts;
}


.levels-container{
   width: 60%;
   box-sizing:border-box;
   padding: 10px;
   margin: 10px 0 0 0;
   border-radius: 7px;
   pointer-events: none;
   display: flex;
   flex-direction: column;
   justify-content: center;
   .level-line{
      margin: 15px 0;
      align-items: center;
      display: flex;
      color: rgba(255,255,255,0);
      .line-label{
         width: 30%;   
         color: $texts;
         padding: 0 20px 0 0;
         text-align: center;
         transition-duration: 0.3s;
      }
      
      .line-progression{
         width: 50%;
         position: relative;
         height: 5px;
         animation: glowBar 0.6s ease-in-out infinite alternate;
         &:before, &:after{
            content: '';
            display: block;
            height: 5px;
            position: absolute;
            border-radius: 2px;
            top:50%;
            left: 0;
            transform: translateY(-50%);
         }
         &:before{
            background-color: transparentize($texts, 0.8);
            width: 100%;
         }
         &:after{
            transition-duration: 0.9s;
            background-color: $texts;
            animation-duration: 0.8s;
            animation-iteration-count: 1;
            border-style: solid;
            border-width:0px;
         }
      }
      
   }  
}

[data-level="0"] {
   .line-progression{
      &:after{
         width: 2%;
         border-width: 0px;
      }
   }
}
[data-level="1"] {
   .line-progression{
      &:after{
         width: 33%;
         animation-name: pulse1;
         border-color: rgba(255,255,255,0.3);
         border-width: 1px;
      }
   }
}
[data-level="2"] {
   .line-progression{
      &:after{
         width: 66%;
         animation-name: pulse2;
         border-color: rgba(255,255,255,0.6);
         border-width: 1px;
      }
   }
}
[data-level="3"] {
   color: $texts!important;
   .line-label{
      animation: glow 0.6s ease-in-out infinite alternate;
      color: #FFFFFF!important;
   }
   .line-progression{
      &:after{
         width: 100%;
         animation-name: pulse3;
         border-color: rgba(255,255,255,1);
         border-width: 1px!important;
         animation-duration: 2s!important;
         color: #FFFFFF;
      }
   }
}

@keyframes pulse1 {
   0%{
      box-shadow:0px 0px 0px 0px rgba(255,255,255, 1);
   }
   50% {
      box-shadow:0px 0px 30px 0px rgba(255,255,255, 1);
   }
   100%{
      box-shadow:0px 0px 0px 0px rgba(255,255,255, 0);
   }
}

@keyframes pulse2 {
   0%{
      box-shadow:0px 0px 0px 0px rgba(255,255,255, 1);
   }
   50% {
      box-shadow:0px 0px 30px 5px rgba(255,255,255, 1);
   }
   100%{
      box-shadow:0px 0px 0px 0px rgba(255,255,255, 0);
   }
}

@keyframes pulse3 {
   0%{
      box-shadow:0px 0px 0px 0px rgba(255,255,255, 0.8);
   }
   100% {
      box-shadow:0px 0px 6px 10px rgba(255,255,255, 0);
   }
}

@keyframes glow {
  from {
    text-shadow: 
       0 0 5px $texts, 
       0 0 10px $texts, 
       0 0 15px $texts, 
       0 0 30px $texts, 
       0 0 45px $texts, 
       0 0 60px $texts, 
       0 0 75px $texts;
  }
  to {
    text-shadow: 
       0 0 10px $texts, 
       0 0 15px $texts, 
       0 0 20px $texts, 
       0 0 25px $texts, 
       0 0 30px $texts, 
       0 0 35px $texts, 
       0 0 40px $texts;
  }
}

@keyframes glowBar{
  from {
    box-shadow: 
       0 0 5px currentColor, 
       0 0 10px currentColor, 
       0 0 15px currentColor, 
       0 0 30px currentColor, 
       0 0 45px currentColor, 
       0 0 60px currentColor, 
       0 0 75px currentColor;
  }
  to {
    box-shadow: 
       0 0 10px currentColor, 
       0 0 15px currentColor, 
       0 0 20px currentColor, 
       0 0 25px currentColor, 
       0 0 30px currentColor, 
       0 0 35px currentColor, 
       0 0 40px currentColor;
  }
}
View Compiled
console.clear();

var s = Snap("#svg");

const config = {
   strokeColor: '#734b00',
   fillShield: '#734b00',
   strokeDarkColor: '#f7c926',
   fillColor: '#f7c926',
   shadow: s.filter(Snap.filter.shadow(0, 0, 2, '#ffffff', 0.3)),
   strengthSteps: {
      length: [0, 6, 10, 16],
      specials: [0, 2, 4, 6],
      numbers: [0, 2, 4, 6],
      uppercases: [0, 2, 4, 6]
   }
}

class Draw {

   constructor(strokeColor, fillColor, strokeDarkColor, fillShield, shadow) {
      this.fillShield = fillShield;
      this.strokeColor = strokeColor;
      this.fillColor = fillColor;
      this.strokeDarkColor = strokeDarkColor;
      this.shadow = shadow;
   }

  paths() {
    return [
    {
    carac: 'length',
    assets: [
      {
        name: 'bottom',
        d: [
          'm 72.14003,45.15249 c 0,13.877381 -10.724779,19.316905 -19.223361,19.316905 -8.498581,0 -19.316904,-6.094333 -19.316905,-19.316905 0,-3.234958 1.085259,-6.259258 2.875019,-8.859952 3.636686,-5.284453 10.182098,-8.819929 16.441886,-8.819929 6.570104,0 12.136766,3.260981 15.562475,7.694994 2.322444,3.006021 3.660886,6.551179 3.660886,9.984887 z',
          'm 72.14003,45.15249 c 0,13.877381 -10.724779,19.316905 -19.223361,19.316905 -8.498581,0 -19.316904,-6.094333 -19.316905,-19.316905 0,-3.234958 1.085259,-6.259258 2.875019,-8.859952 3.636686,-5.284453 10.182098,-8.819929 16.441886,-8.819929 6.570104,0 12.136766,3.260981 15.562475,7.694994 2.322444,3.006021 3.660886,6.551179 3.660886,9.984887 z',
          'M 72.093257,49.268441 C 71.812624,56.363857 59.681098,64.35007 52.91667,69.761061 44.297089,61.521298 33.927171,55.615505 33.92717,49.970024 c 0,-3.234957 -1.259041,-7.455632 -0.1184,-12.92913 3.011528,-4.818689 12.848112,-9.100562 19.1079,-9.100562 6.570103,0 15.619415,4.259014 19.444565,9.612653 0.831729,4.044017 -0.132275,8.284432 -0.267978,11.715456 z',
          'M 72.887008,55.188494 C 72.606375,62.28391 57.928234,70.766216 52.916671,81.931895 49.401075,71.821195 33.166494,61.039463 33.166493,55.393983 c 0,-3.234957 -1.993408,-12.66746 -0.852767,-18.140958 8.137831,-1.346033 12.532635,-5.710059 20.602945,-10.800974 4.496523,3.491872 15.555576,9.283791 20.869007,10.668681 0.831729,4.044017 -0.762968,14.636738 -0.89867,18.067762 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.fillColor
        }
      },
      {
        name: 'innerShields',
        d: [
          'm 52.916667,41.173197 c -2.686481,0 -4.864303,2.177822 -4.864303,4.864304 0,2.686481 2.177822,4.864304 4.864303,4.864304 2.686482,0 4.864304,-2.177823 4.864304,-4.864304 0,-2.686482 -2.177822,-4.864304 -4.864304,-4.864304 z',
          'm 52.916668,39.651843 c -3.526703,0 -6.385658,2.858955 -6.385658,6.385658 0,3.526702 2.858955,6.385658 6.385658,6.385658 3.526702,0 6.385658,-2.858956 6.385658,-6.385658 0,-3.526703 -2.858956,-6.385658 -6.385658,-6.385658 z',
          'm 52.916668,39.651843 c -1.083123,2.760676 -2.646934,5.230696 -6.385658,6.385658 5.100693,0.732549 5.156739,3.834548 6.385658,6.385658 1.228918,-2.55111 1.284964,-5.653109 6.385658,-6.385658 -3.738724,-1.154962 -5.302536,-3.624982 -6.385658,-6.385658 z',
          'm 52.916667,39.651843 c -0.463021,1.543063 -3.492788,2.741715 -8.209835,2.913001 5.100693,0.732549 7.214777,7.205398 8.209835,14.620814 0.995059,-7.415416 3.109143,-13.888265 8.209836,-14.620814 -4.717047,-0.171286 -7.746815,-1.369938 -8.209836,-2.913001 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.fillShield,
           'filter': this.shadow
        }
      },
      {
        name: 'borderLeft',
        d: [
          'm 52.845941,45.373976 c -0.08425,0.0086 -0.167157,0.03229 -0.244375,0.06816 a 0.07596396,0.07596396 0 0 1 0.0043,0.02499 0.07596396,0.07596396 0 0 1 -0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.05711,-0.026 c -0.04931,0.03523 -0.09443,0.07577 -0.133522,0.120834 a 0.07596396,0.07596396 0 0 1 0.02479,0.05602 0.07596396,0.07596396 0 0 1 -0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.03456,-0.0084 c -0.03313,0.06161 -0.05585,0.128247 -0.06552,0.198135 a 0.07596396,0.07596396 0 0 1 0.06904,0.07561 0.07596396,0.07596396 0 0 1 -0.06904,0.0756 c 0.01011,0.0731 0.03455,0.1426 0.0702,0.20656 a 0.07596396,0.07596396 0 0 1 0.02987,-0.0061 0.07596396,0.07596396 0 0 1 0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.01971,0.05094 c 0.03958,0.04467 0.08503,0.08483 0.134675,0.119596 a 0.07596396,0.07596396 0 0 1 0.05087,-0.01968 0.07596396,0.07596396 0 0 1 0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.0017,0.01555 c 0.076,0.03498 0.157456,0.05817 0.240231,0.06675 a 0.07596396,0.07596396 0 0 1 0.07173,-0.05127 v -0.01434 c -0.298777,0 -0.629695,-0.247532 -0.629695,-0.595525 0,-0.347993 0.350177,-0.595458 0.629695,-0.595458 v -0.01866 a 0.07596396,0.07596396 0 0 1 -0.07021,-0.04714 z',
          'm 50.74574,25.596372 c -2.604452,0.264479 -5.167111,0.998151 -7.55406,2.106848 a 2.3481772,2.3481772 0 0 1 0.133842,0.772562 2.3481772,2.3481772 0 0 1 -2.348177,2.348177 2.3481772,2.3481772 0 0 1 -1.765269,-0.803568 c -1.524323,1.088911 -2.918851,2.342274 -4.127394,3.735173 a 2.3481772,2.3481772 0 0 1 0.76636,1.731677 2.3481772,2.3481772 0 0 1 -2.348177,2.348177 2.3481772,2.3481772 0 0 1 -1.068152,-0.259416 c -1.024242,1.904569 -1.726533,3.96435 -2.0252,6.124692 a 2.3481772,2.3481772 0 0 1 2.134238,2.337324 2.3481772,2.3481772 0 0 1 -2.134238,2.336808 c 0.312505,2.259494 1.068009,4.408021 2.169895,6.385141 a 2.3481772,2.3481772 0 0 1 0.923457,-0.189653 2.3481772,2.3481772 0 0 1 2.348177,2.348177 2.3481772,2.3481772 0 0 1 -0.609264,1.57458 c 1.223426,1.380911 2.628371,2.622418 4.163052,3.696933 a 2.3481772,2.3481772 0 0 1 1.572515,-0.608232 2.3481772,2.3481772 0 0 1 2.348177,2.348177 2.3481772,2.3481772 0 0 1 -0.05271,0.480592 c 2.349416,1.081149 4.867191,1.79799 7.425905,2.063438 a 2.3481772,2.3481772 0 0 1 2.217436,-1.584915 v -0.443383 c -9.235705,0 -19.464963,-7.651645 -19.464963,-18.408695 0,-10.757062 10.824573,-18.40663 19.464963,-18.40663 V 27.053647 A 2.3481772,2.3481772 0 0 1 50.74574,25.596372 Z',
          'm 51.208762,25.563299 v 0 l -9.239229,4.764567 v 0 l -1.732196,-1.795759 v 0 L 33.1556,36.892839 v 0 l -2.473751,-0.09405 v 0 l 1.332736,9.23923 -2.411739,1.412834 v 0 0 0 0 l 10.397298,12.126391 v 0 0 0 0 c -2.531455,-2.97329 -4.969033,-6.002907 -5.770188,-10.014376 v 0 L 33.881139,38.03334 c 0,0 4.314938,-8.522091 19.035015,-10.006109 v 0 z',
          'm 53.082716,25.759672 -2.000911,-1.918229 v 0 0 0 c -7.487809,5.898 -15.710544,9.874927 -22.568151,11.070694 v 0 0 0 0 0 0 0 0 0 c 0.06178,11.71776 -0.845587,22.170469 9.455858,30.66696 10.301445,8.496493 12.591226,12.245102 15.062911,17.33419 v 0 0 h 0.0321 v 0 C 51.917597,78.176206 45.894094,70.226966 38.959897,64.478758 34.790734,61.022665 32.285046,55.368508 32.292869,49.924321 l 0.0184,-12.80359 C 42.647761,34.573025 51.598903,27.432706 52.387501,26.737388 l 0.529167,-0.529167 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'borderRight',
        d: [
          'm 52.986366,45.373976 c 0.08426,0.0086 0.167158,0.03229 0.244377,0.06816 a 0.07596396,0.07596396 0 0 0 -0.0043,0.02499 0.07596396,0.07596396 0 0 0 0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.05711,-0.026 c 0.04931,0.03523 0.09443,0.07577 0.133522,0.120834 a 0.07596396,0.07596396 0 0 0 -0.02479,0.05602 0.07596396,0.07596396 0 0 0 0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.03455,-0.0084 c 0.03314,0.06161 0.05585,0.128247 0.06552,0.198135 a 0.07596396,0.07596396 0 0 0 -0.06904,0.07561 0.07596396,0.07596396 0 0 0 0.06904,0.0756 c -0.01011,0.0731 -0.03455,0.1426 -0.0702,0.20656 a 0.07596396,0.07596396 0 0 0 -0.02987,-0.0061 0.07596396,0.07596396 0 0 0 -0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.01971,0.05094 c -0.03958,0.04467 -0.08503,0.08483 -0.134675,0.119596 a 0.07596396,0.07596396 0 0 0 -0.05087,-0.01968 0.07596396,0.07596396 0 0 0 -0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.0017,0.01555 c -0.076,0.03498 -0.157457,0.05817 -0.240232,0.06675 a 0.07596396,0.07596396 0 0 0 -0.07173,-0.05127 v -0.01434 c 0.298777,0 0.629695,-0.247532 0.629695,-0.595525 0,-0.347993 -0.350177,-0.595458 -0.629695,-0.595458 v -0.01866 a 0.07596396,0.07596396 0 0 0 0.07021,-0.04714 z',
          'm 55.086566,25.596372 c 2.604452,0.264479 5.167111,0.998151 7.55406,2.106848 a 2.3481772,2.3481772 0 0 0 -0.133842,0.772562 2.3481772,2.3481772 0 0 0 2.348177,2.348177 2.3481772,2.3481772 0 0 0 1.765269,-0.803568 c 1.524323,1.088911 2.918851,2.342274 4.127394,3.735173 a 2.3481772,2.3481772 0 0 0 -0.76636,1.731677 2.3481772,2.3481772 0 0 0 2.348177,2.348177 2.3481772,2.3481772 0 0 0 1.068152,-0.259416 c 1.024242,1.904569 1.726533,3.96435 2.0252,6.124692 a 2.3481772,2.3481772 0 0 0 -2.134238,2.337324 2.3481772,2.3481772 0 0 0 2.134238,2.336808 c -0.312505,2.259494 -1.068009,4.408021 -2.169895,6.385141 a 2.3481772,2.3481772 0 0 0 -0.923457,-0.189653 2.3481772,2.3481772 0 0 0 -2.348177,2.348177 2.3481772,2.3481772 0 0 0 0.609264,1.57458 c -1.223426,1.380911 -2.628371,2.622418 -4.163052,3.696933 a 2.3481772,2.3481772 0 0 0 -1.572515,-0.608232 2.3481772,2.3481772 0 0 0 -2.348177,2.348177 2.3481772,2.3481772 0 0 0 0.05271,0.480592 c -2.349416,1.081149 -4.867191,1.79799 -7.425905,2.063438 a 2.3481772,2.3481772 0 0 0 -2.217436,-1.584915 v -0.443383 c 9.235705,0 19.464963,-7.651645 19.464963,-18.408695 0,-10.757062 -10.824573,-18.40663 -19.464963,-18.40663 v -0.576709 a 2.3481772,2.3481772 0 0 0 2.170413,-1.457275 z',
          'm 54.623546,25.563299 v 0 l 9.239229,4.764567 v 0 l 1.732196,-1.79576 v 0 l 7.081737,8.360733 v 0 l 2.473751,-0.09405 v 0 l -1.332736,9.23923 2.411739,1.412834 v 0 0 0 0 L 65.832164,59.577244 v 0 0 0 0 c 2.531455,-2.97329 4.969033,-6.002907 5.770188,-10.014376 v 0 L 71.951169,38.03334 c 0,0 -4.314938,-8.522091 -19.035015,-10.006109 v 0 z',
          'm 53.082715,25.759672 2.000911,-1.918229 v 0 0 0 c 7.487809,5.898 15.710544,9.874927 22.568151,11.070694 v 0 0 0 0 0 0 0 0 0 c -0.06178,11.71776 0.845587,22.170469 -9.455858,30.66696 -10.301445,8.496493 -12.591226,12.245102 -15.062911,17.33419 v 0 0 h -0.0321 v 0 c 1.146926,-4.737081 7.170429,-12.686321 14.104626,-18.434529 4.169163,-3.456093 6.674851,-9.11025 6.667028,-14.554437 l -0.0184,-12.80359 C 63.51767,34.573025 54.566528,27.432706 53.77793,26.737388 l -0.529167,-0.529167 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'innerShieldStroke',
        d: [
          'm 52.916668,42.881465 c -1.743032,0 -3.156036,1.413004 -3.156036,3.156037 0,1.743031 1.413004,3.156036 3.156036,3.156036 1.743032,0 3.156036,-1.413005 3.156036,-3.156036 0,-1.743033 -1.413004,-3.156037 -3.156036,-3.156037 z',
          'm 52.916669,42.061857 c -2.19569,0 -3.975645,1.779955 -3.975645,3.975646 0,2.195689 1.779955,3.975645 3.975645,3.975645 2.19569,0 3.975645,-1.779956 3.975645,-3.975645 0,-2.195691 -1.779955,-3.975646 -3.975645,-3.975646 z',
          'm 52.916667,42.591201 c -0.465714,1.562306 -1.896793,2.770579 -3.446301,3.446301 1.623602,0.498909 2.785896,1.598687 3.446301,3.446301 0.660405,-1.847614 1.822699,-2.947392 3.446301,-3.446301 -1.549508,-0.675722 -2.980587,-1.883995 -3.446301,-3.446301 z',
          'm 52.916667,41.310658 c -0.257984,0.970648 -2.593655,1.732489 -4.213696,1.915645 1.772608,1.124431 3.934019,5.538044 4.213696,8.579321 0.279678,-3.041277 2.441089,-7.45489 4.213696,-8.579321 -1.620041,-0.183156 -3.955711,-0.944997 -4.213696,-1.915645 z'
        ],
        attrs: {
          'stroke-width': '1px',
          'stroke': this.strokeDarkColor,
          'fill': 'none'
        }
      },
      {
        name: 'topLeftDetail',
        d: [
          'm 35.406532,38.645117 0.865285,-1.847501 -0.327406,9.963375 z',
          'm 35.406532,38.645117 0.865285,-1.847501 -0.327406,9.963375 z',
          'm 36.618188,38.58092 c 3.003644,-3.113858 6.673938,-5.239242 9.939087,-6.711807 -5.072674,3.346977 -9.416189,6.080527 -9.939087,15.950213 z',
          'm 34.736413,40.16842 c 7.096209,-3.207403 10.298781,-3.99978 15.17757,-8.302061 -5.470238,6.223466 -14.654672,6.083281 -15.17757,15.952967 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'topRightDetail',
        d: [
          'm 69.971165,37.966918 0.780452,1.590255 -0.359503,6.35 z',
          'm 69.971165,37.966918 0.780452,1.590255 -0.359503,6.35 z',
          'm 69.215146,38.58092 c -3.003645,-3.113858 -6.673938,-5.239242 -9.93909,-6.711807 5.072675,3.346977 9.416189,6.080527 9.93909,15.950213 z',
          'M 71.096921,40.16842 C 64.000711,36.961017 60.798138,36.16864 55.91935,31.866359 61.389586,38.089825 70.57402,37.94964 71.096921,47.819326 Z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'bottomRightDetail',
        d: [
          'M 65.99553,59.482116 67.258379,58.4999 66.65034,46.796789 Z',
          'M 65.99553,59.482115 67.258379,58.4999 66.65034,46.796789 Z',
          'm 58.916112,61.63473 c 3.651272,-2.320821 6.467222,-5.492371 8.562561,-8.397402 -3.267882,3.805442 -5.822075,6.456771 -9.478696,6.452072 z',
          'm 56.432261,71.821194 c 2.923669,-2.816915 10.469046,-9.394978 13.192767,-15.243498 -2.044184,3.342421 -7.674157,9.995575 -11.330777,9.990876 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'bottomLeftDetail',
        d: [
          'm 39.911334,59.356473 0.69562,0.690435 -0.265959,-10.66573 z',
          'm 39.911334,59.356472 0.69562,0.690436 -0.265959,-10.66573 z',
          'm 46.917223,61.63473 c -3.651272,-2.320821 -6.467222,-5.492371 -8.56256,-8.397402 3.267882,3.805442 5.822074,6.456771 9.478695,6.452072 z',
          'M 49.401074,71.821194 C 46.477406,69.004279 38.932029,62.426216 36.208306,56.577696 c 2.044184,3.342421 7.674157,9.995575 11.330778,9.990876 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'topDetails',
        d: [
          'm 55.249859,27.665495 -1.62574,0.175183 -4.209564,0.163815 -4.127397,1.016992 -2.443779,1.216464 -0.912087,0.783413 0.128674,0.362251 0.169498,-0.137974 0.286287,7.254337 0.186036,-7.637777 0.854729,-0.694531 1.289844,-0.661974 v 33.068265 h 0.265615 V 29.369266 l 0.315743,-0.172082 1.005107,-0.210323 0.179835,-0.04909 0.463537,12.196157 0.763778,-12.531535 1.762167,-0.481108 3.53105,-0.140044 0.499711,-0.0057 0.552421,8.495605 0.765328,-8.509559 0.3576,-0.0041 0.958599,0.187069 2.86494,0.689879 1.589569,0.671278 v 33.068266 h 0.265616 V 29.617832 l 0.471807,0.198953 0.757576,0.352949 0.411343,8.780344 0.629936,-8.295101 0.609782,0.284221 0.140044,-0.104905 -0.919324,-0.411861 -0.881083,-0.453718 0.0031,0.06098 -1.223182,-0.547772 v -0.112654 h -0.252184 l -1.638144,-0.733287 z',
          'm 55.249859,27.665495 -1.625741,0.175183 -4.209563,0.163815 -4.127397,1.016992 -2.443779,1.216464 -0.912088,0.783413 0.128675,0.362251 0.169498,-0.137974 0.286287,7.254337 0.186036,-7.637777 0.854729,-0.694531 1.289844,-0.661974 v 33.068265 h 0.265615 V 29.369266 l 0.315743,-0.172082 1.005107,-0.210323 0.179835,-0.04909 0.463537,12.196157 0.763778,-12.531535 1.762167,-0.481108 3.53105,-0.140044 0.499711,-0.0057 0.552421,8.495605 0.765328,-8.509559 0.3576,-0.0041 0.958599,0.187069 2.86494,0.689879 1.589569,0.671278 v 33.068266 h 0.265615 V 29.617832 l 0.471808,0.198953 0.757576,0.352949 0.411343,8.780344 0.629936,-8.295101 0.609782,0.284221 0.140044,-0.104905 -0.919324,-0.411861 -0.881083,-0.453718 0.0031,0.06098 -1.223182,-0.547772 v -0.112654 h -0.25218 l -1.638149,-0.733287 z',
          'm 55.249859,27.665495 -1.625741,0.175183 -4.209563,0.163815 -4.127397,1.372526 -2.443779,1.166855 -0.912088,0.477488 0.128675,0.362251 0.169498,-0.137973 0.286287,-0.153997 0.186036,-0.229443 0.854729,-0.388607 1.289844,-0.686779 v -0.02119 h 0.265615 v -0.115239 l 0.315743,-0.09767 1.005107,-0.408761 0.179835,-0.04909 0.463537,-0.131773 0.763778,-0.203605 1.762167,-0.638204 3.53105,-0.140044 0.499711,-0.0057 0.552421,0.02894 0.765328,-0.04289 0.3576,-0.0041 0.958599,0.187069 2.86494,0.433564 1.589569,0.671278 v -0.01292 h 0.265615 v 0.125038 l 0.471808,0.0832 0.757576,0.35295 0.411342,0.156581 0.629936,0.328661 0.609783,0.284221 0.140044,-0.104904 -0.919324,-0.411861 -0.881084,-0.453718 0.0031,0.06098 -1.223186,-0.432018 v -0.112654 h -0.25218 l -1.638144,-0.733287 z',
          'm 55.249859,27.665495 -2.217436,-1.471744 -3.617868,2.442166 -4.127397,2.518444 -2.443779,1.754712 -0.912088,0.477489 0.128675,-0.166915 0.169498,-0.137974 0.286287,-0.153996 0.186036,-0.229444 0.854729,-0.388607 1.289844,-0.74547 v -0.02119 h 0.265615 v -0.115239 l 0.315743,-0.09767 1.005107,-0.806324 0.179835,-0.04909 0.463537,-0.131773 0.763778,-0.671327 1.762167,-0.918837 3.53105,-2.618969 v 0 l 1.052132,0.958684 0.765328,0.752237 0.3576,0.11283 0.958599,0.187069 2.86494,2.281065 1.589569,1.045455 v -0.01292 h 0.265615 v 0.125038 l 0.471808,0.0832 0.757576,0.633582 0.411342,0.156581 0.629936,0.328662 0.609783,0.284221 0.140044,-0.104905 -0.919324,-0.411861 -0.881084,-0.453718 0.0031,0.06098 -1.223182,-0.71265 v -0.112654 h -0.25218 l -1.638153,-1.107464 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'bottomDetails',
        d: [
          'm 52.817449,53.015886 -0.8723,11.116633 -1.384411,-0.06666 -3.531566,-0.65474 -0.808736,-0.377754 -0.249081,-3.204456 -0.391192,2.905766 -1.707904,-0.796851 -0.841809,-0.537951 0.280601,0.561205 0.608233,0.421164 2.94659,1.262456 4.303096,0.841809 2.853055,0.02376 2.946591,-0.25735 2.115116,-0.883666 -0.01035,0.135393 1.215945,-0.491443 -0.0093,-0.113688 1.365809,-0.423746 1.067117,-0.709518 -1.725993,0.807702 -0.709518,0.296621 -0.596344,-7.21868 -0.589629,7.615555 -1.819011,0.564309 c 0,0 -1.496904,0.04714 -0.608232,0.117306 0.888669,0.07016 -2.712495,0.280601 -2.712495,0.280601 l -0.485759,-0.02326 z m 9.89552,8.750372 1.084172,-0.506947 1.684134,-1.332736 z',
          'm 52.817449,53.015886 -0.8723,11.116633 -1.384411,-0.06666 -3.531566,-0.65474 -0.808736,-0.377754 -0.249081,-3.204456 -0.391192,2.905766 -1.707904,-0.796851 -0.841809,-0.537951 0.280601,0.561205 0.608233,0.421164 2.94659,1.262456 4.303096,0.841809 2.853055,0.02376 2.946591,-0.25735 2.115116,-0.883666 -0.01035,0.135393 1.215945,-0.491443 -0.0093,-0.113688 1.365809,-0.423746 1.067117,-0.709518 -1.725993,0.807702 -0.709518,0.296621 -0.596344,-7.21868 -0.589629,7.615555 -1.819011,0.564309 c 0,0 -1.496904,0.04714 -0.608232,0.117306 0.888669,0.07016 -2.712495,0.280601 -2.712495,0.280601 l -0.485759,-0.02326 z m 9.89552,8.750372 1.084172,-0.506947 1.684134,-1.332736 z',
          'm 53.015887,65.186719 -0.855764,4.45244 -1.599385,-1.869133 -3.531566,-2.771407 -0.808736,-0.377753 -0.249081,-0.558623 -0.391192,0.259932 -1.707904,-1.855185 -0.841809,-0.53795 0.280601,0.561205 0.608233,0.421163 6.641454,4.858618 2.046904,2.570388 0.424781,0.402042 2.977078,-3.413757 3.074231,-2.388484 -0.01035,0.135393 1.215945,-0.838708 -0.0093,-0.113689 1.365808,-0.952913 1.067117,-0.907955 -1.725993,1.320332 -0.709517,0.511596 -0.596345,0.255799 -0.589629,0.488341 -1.819011,1.424205 -0.608232,0.315743 -2.712495,2.413804 -0.08888,0.654736 z m 9.697082,-2.924368 1.084172,-1.003041 1.684134,-1.332735 z',
          'm 53.015887,76.828391 -0.855764,4.452441 -1.599385,-3.456634 -3.531566,-4.888074 -0.808736,-0.90692 -0.249081,-0.558622 -0.391192,-0.269235 -1.707904,-1.326018 -1.028898,-1.356463 0.912026,0.701522 3.414563,3.999232 3.390788,4.604578 2.046904,4.157888 0.424781,0.40204 2.977078,-5.670738 3.074231,-4.037431 -0.01035,0.135393 1.215945,-1.002409 -0.0093,-0.113689 1.365808,-1.444021 1.067118,-1.179875 -1.725994,1.919658 -0.709517,0.675298 -0.596344,0.4195 -0.58963,0.488341 -1.81901,2.792519 -0.608232,0.596376 -2.712495,4.670785 -0.08888,0.654738 z m 9.697082,-7.757027 1.084172,-1.003041 1.684134,-1.683525 z'
        ],
        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor
        }
      },
      {
        name: 'shields',
        d: [
          'm 53.032423,27.78125 c -7.259149,0 -13.575732,3.854784 -16.828432,9.53792 -1.490234,2.603749 -2.337324,5.590879 -2.337324,8.767424 0,10.109904 8.5808,18.305859 19.165756,18.305859 10.584955,0 19.165755,-8.195955 19.165755,-18.305859 0,-3.176545 -0.84709,-6.163675 -2.337324,-8.767424 -3.2527,-5.683136 -9.569283,-9.53792 -16.828431,-9.53792 z',
          'm 53.032423,27.78125 c -7.259149,0 -13.575732,3.854784 -16.828432,9.53792 -1.490234,2.603749 -2.337324,5.590879 -2.337324,8.767424 0,10.109904 8.5808,18.305859 19.165756,18.305859 10.584955,0 19.165755,-8.195955 19.165755,-18.305859 0,-3.176545 -0.84709,-6.163675 -2.337324,-8.767424 -3.2527,-5.683136 -9.569283,-9.53792 -16.828431,-9.53792 z',
          'm 53.032422,27.874786 c -7.108521,0 -16.434467,5.174612 -19.120279,9.444384 -0.230952,3.093083 -0.04548,5.590879 -0.04548,8.767424 0,13.337183 16.217037,19.287943 19.165755,24.386109 2.948718,-5.098166 19.165756,-11.048926 19.165756,-24.386109 0,-3.176545 0.185476,-5.674341 -0.04548,-8.767424 C 69.46689,33.049398 60.140943,27.874786 53.032422,27.874786 Z',
          'M 53.032423,26.193751 C 47.781234,30.192936 37.228299,36.554733 32.279167,37.120732 V 48.203261 C 32.335447,65.815898 47.407735,67.314858 53.032423,82.913287 58.65711,67.314858 73.729399,65.815898 73.785678,48.203261 V 37.120732 C 68.836546,36.554733 58.283611,30.192936 53.032423,26.193751 Z'
        ],
        attrs: {
          'stroke-width': '1.5px',
          'stroke': this.strokeColor,
          'fill': 'none',
           'filter': this.shadow
        }
      },
      ]
      },
      {
        carac: 'specials',
        assets: [
          {
          name: 'bladeLeft',
          d: [
            'm 28.757992,71.795429 1.663234,-0.77394 1.148319,-0.534405 1.440153,-0.669823 2.087088,-0.970882 -0.550692,-1.237872 -0.486993,-1.095617 -1.093902,-0.490835 -1.235932,-0.555033 -0.978199,2.083669 -0.674874,1.437793 -0.538431,1.146436 z',
            'm 28.899929,70.628093 0.803783,-5.267513 37.069526,-34.56123 2.164599,1.434518 1.328417,2.206609 -36.069632,35.603522 z',
            'm 17.68974,83.982726 -1.442922,-2.161115 1.433108,-1.419963 2.822533,-2.796648 1.255071,-1.24356 2.466721,1.146696 v 0 l -1.032613,1.023146 -1.30683,1.294845 c 12.101045,7.330374 11.193466,5.350015 17.396968,-2.76514 L 43.13811,77.948979 26.848296,95.669477 C 24.962521,92.469916 23.27268,89.016799 17.68974,83.982726 Z',
            'm 19.283525,85.628423 c -2.666014,2.895214 -6.987688,-1.4361 -4.515083,-4.271941 l -4.702069,-7.541179 v 0 l 7.725669,5.214644 3.424426,-2.137899 3.05359,2.839985 -2.429385,3.328871 c 0,0 2.721026,3.488733 6.223057,3.258694 4.500949,-0.295656 9.838025,-9.291242 9.838025,-9.291242 11.779804,18.226692 -5.330184,36.141324 -24.831024,24.139574 0,0 8.866148,-4.662604 9.048657,-8.886098 0.15009,-3.473272 -2.835863,-6.653409 -2.835863,-6.653409 z'
          ],
          attrs: {
              'stroke-width': '0px',
              'stroke': this.strokeColor,
              'fill': this.fillColor,
             'filter': this.shadow
            }
          },
          {
          name: 'bladeRight',
          d: [
            'm 77.075343,71.795429 -1.663234,-0.77394 -1.148319,-0.534405 -1.440153,-0.669823 -2.087088,-0.970882 0.550692,-1.237872 0.486993,-1.095617 1.093902,-0.490835 1.235932,-0.555033 0.978199,2.083669 0.674874,1.437793 0.538431,1.146436 z',
            'M 76.933408,70.628093 76.129625,65.36058 39.060098,30.79935 l -2.164599,1.434518 -1.328417,2.206609 36.069632,35.603522 z',
            'm 88.143596,83.982726 1.442921,-2.161115 -1.433108,-1.419963 -2.822532,-2.796648 -1.25507,-1.24356 -2.466724,1.146696 v 0 l 1.032613,1.023146 1.30683,1.294845 c -12.101044,7.330374 -11.193465,5.350015 -17.396968,-2.76514 l -3.856334,0.887992 16.289814,17.720498 c 1.885776,-3.199561 3.575617,-6.652678 9.158558,-11.686751 z',
            'm 86.54981,85.628423 c 2.666016,2.895214 6.987688,-1.4361 4.515083,-4.271941 l 4.702069,-7.541179 v 0 l -7.725669,5.214644 -3.424426,-2.137899 -3.05359,2.839985 2.429385,3.328871 c 0,0 -2.721025,3.488733 -6.223055,3.258694 -4.500949,-0.295656 -9.838026,-9.291242 -9.838026,-9.291242 -11.779809,18.226692 5.330184,36.141324 24.831024,24.139574 0,0 -8.866148,-4.662604 -9.048658,-8.886098 -0.15009,-3.473272 2.835863,-6.653409 2.835863,-6.653409 z'
          ],
          attrs: {
            'stroke-width': '0px',
            'stroke': this.strokeColor,
            'fill': this.fillColor,
             'filter': this.shadow
            }
          },
          {
            name: 'innerBladeLeft',
            d: [
              'm 32.031771,68.532806 0.67312,-0.230122 0.633633,-0.217037 0.712241,-0.243573 0.177881,-0.790798 -0.169702,-0.538542 -0.537579,-0.171225 -0.791417,0.175104 -0.24607,0.711383 -0.21926,0.632868 z',
              'm 32.235625,67.428802 0.145228,-2.030548 35.886987,-33.513445 0.626671,0.376303 0.349613,0.641378 -34.974023,34.465116 z',
              'm 27.231088,93.800336 v 0 0 0 c -2.125001,-3.81227 -4.631429,-6.710193 -7.379967,-9.02775 9.1315,7.286387 7.383882,7.129905 21.414403,-6.45805 v 0 l -14.034436,15.4858 c -1.915092,-3.239963 0,0 0,0 z',
              'm 38.028171,79.284974 v 0 l -3.376831,4.376335 c 4.568331,11.8101 -4.709402,18.677431 -13.847998,13.402844 l -5.820839,3.994227 v 0 0 c 15.455591,8.75915 31.474375,-3.845705 23.045668,-21.773406 z'
            ],
            attrs: {
              'stroke-width': '0px',
              'stroke': 'none',
              'fill': this.strokeColor
            }
          },
          {
            name: 'innerBladeRight',
            d: [
              'm 73.801564,68.532806 -0.67312,-0.230122 -0.633633,-0.217037 -0.712241,-0.243573 -0.177881,-0.790798 0.169702,-0.538542 0.537579,-0.171225 0.791417,0.175104 0.24607,0.711383 0.21926,0.632868 z',
              'M 73.59771,67.428802 73.452483,65.398254 37.565496,31.884809 36.938825,32.261112 36.589212,32.90249 71.563234,67.367606 Z',
              'm 78.60225,93.800336 v 0 0 0 c 2.124998,-3.81227 4.631428,-6.710193 7.379965,-9.02775 -9.131499,7.286387 -7.383881,7.129905 -21.414402,-6.45805 v 0 l 14.034437,15.4858 c 1.915088,-3.239963 0,0 0,0 z',
              'm 67.805165,79.284974 v 0 l 3.37683,4.376335 c -4.568331,11.8101 4.709403,18.677431 13.847998,13.402844 l 5.820839,3.994227 v 0 0 C 75.395241,109.81753 59.376461,97.212675 67.805165,79.284974 Z'
            ],
            attrs: {
              'stroke-width': '0px',
              'stroke': 'none',
              'fill': this.strokeColor
            }
          },
          {
            name: 'handleLeft',
            d: [
              'm 34.36244,66.738853 -0.528237,-0.530094 40.22804,-40.087124 0.528237,0.530094 z',
              'M 68.449146,32.169264 68.967213,32.7093 75.582038,26.36355 75.06397,25.823514 Z',
              'M 22.30871,76.397177 23.956231,77.308121 78.582514,23.182794 77.31089,21.899399 Z',
              'm 21.878497,77.057701 2.120778,2.163715 54.388172,-55.720861 -1.279441,-1.275604 z'
            ],
            attrs: {
              'stroke-width': '0px',
              'stroke': 'none',
              'fill': this.fillColor,
               'filter': this.shadow
            }
          },
          {
            name: 'handleRight',
            d: [
              'M 71.470894,66.738853 71.999129,66.20876 31.77109,26.121635 31.242852,26.651729 Z',
              'M 37.38419,32.169264 36.866123,32.7093 30.251298,26.36355 30.769366,25.823514 Z',
              'M 83.524627,76.397177 81.877104,77.308121 27.25082,23.182794 28.522445,21.899399 Z',
              'M 83.954836,77.057701 81.834057,79.221416 27.445885,23.500555 28.725327,22.224951 Z'
            ],
            attrs: {
              'stroke-width': '0px',
              'stroke': 'none',
              'fill': this.fillColor,
               'filter': this.shadow
            }
          },
          {
            name: 'detailsLeft',
            d: [
              'm 72.391709,28.921628 0.463937,-0.462312 2.048053,0.815492 0.671739,-0.669386 -2.048053,-0.815492 0.21521,-0.214456 2.048054,0.815491 0.672091,-0.669736 -2.048054,-0.815492 0.215211,-0.214457 2.048053,0.815492 0.672091,-0.669737 -2.048053,-0.815491 0.328107,-0.326958 -0.183366,-0.18401 -0.240336,-0.24118 -0.183365,-0.18401 -0.328107,0.326957 -0.8083,-2.050902 -0.672091,0.669736 0.8083,2.050903 -0.21521,0.214456 -0.808301,-2.050902 -0.672091,0.669736 0.808301,2.050903 -0.215211,0.214457 -0.8083,-2.050903 -0.671739,0.669386 0.8083,2.050903 -0.463936,0.462311 0.183365,0.18401 0.240336,0.241181 z',
              'm 68.72449,32.187723 -0.179835,-0.187461 1.093166,-1.048699 -3.114945,-1.925729 -1.242301,0.560501 -2.001898,-0.880152 2.874137,-0.78968 4.297376,2.238971 4.060391,-3.835429 -0.443476,-0.786272 0.03785,-0.686056 0.559901,-0.537128 0.663223,0.0135 0.71619,0.481626 v 0 l 0.179837,0.187461 0.234749,0.244704 0.179835,0.187461 v 0 l 0.451485,0.735563 -0.01405,0.663211 -0.559904,0.537128 -0.687035,0.0093 -0.767189,-0.47573 -4.000648,3.897707 2.058683,4.3866 -0.908285,2.838888 -0.796309,-2.036705 0.611577,-1.217966 -1.794786,-3.192186 -1.093165,1.048698 -0.179835,-0.187462 z',
              'm 78.767601,22.201047 0.538443,1.050288 -0.171069,1.017074 -3.116167,3.087589 -0.673997,0.667818 -0.85421,0.846375 -0.531458,0.526585 -0.939932,0.931314 -0.8069,0.7995 -0.92066,0.912216 -0.813869,0.806406 -1.189122,1.178217 -9.571205,9.483433 v 0 l -1.006073,0.313878 -0.99401,-0.763506 -0.372451,-0.375899 -0.754317,-1.001003 0.323136,-1.003136 v 0 l 9.571204,-9.483432 1.189122,-1.178217 0.813869,-0.806405 0.92066,-0.912217 0.8069,-0.799499 0.939932,-0.931314 0.531458,-0.526585 0.85421,-0.846375 0.673997,-0.667818 3.116168,-3.08759 1.018608,-0.161692 1.045282,0.548098 z',
              'm 78.56653,22.517696 0.544851,1.046981 -0.164854,1.0181 -3.097244,3.106564 -0.669901,0.671917 -0.849024,0.85158 -0.528236,0.529823 -0.934228,0.937041 -0.801997,0.804408 -0.915072,0.917828 -0.808929,0.811362 -1.181902,1.18546 -9.513094,9.54172 v 0 l -1.004133,0.320019 -0.998657,-0.75742 -0.37474,-0.373615 -0.760417,-0.996377 0.317,-1.005092 v 0 l 9.513093,-9.54172 1.181902,-1.18546 0.808929,-0.811362 0.915072,-0.917827 0.801997,-0.804408 0.934228,-0.937042 0.528236,-0.529823 0.849024,-0.85158 0.669901,-0.671917 3.097244,-3.106564 1.017598,-0.167912 1.048613,0.541702 z'
            ],
            attrs: {
              'stroke-width': '0px',
              'stroke': 'none',
              'fill': this.fillColor,
               'filter': this.shadow
            }
          },
          {
            name: 'detailsRight',
            d: [
              'm 33.441626,28.921628 -0.463937,-0.462312 -2.048053,0.815492 -0.671739,-0.669386 2.048053,-0.815492 -0.21521,-0.214456 -2.048054,0.815491 -0.672091,-0.669736 2.048054,-0.815492 -0.215211,-0.214457 -2.048053,0.815492 -0.672091,-0.669737 2.048053,-0.815491 -0.328107,-0.326958 0.183366,-0.18401 0.240336,-0.24118 0.183365,-0.18401 0.328107,0.326957 0.8083,-2.050902 0.672091,0.669736 -0.8083,2.050903 0.21521,0.214456 0.808301,-2.050902 0.672091,0.669736 -0.808301,2.050903 0.215211,0.214457 0.8083,-2.050903 0.671739,0.669386 -0.8083,2.050903 0.463936,0.462311 -0.183365,0.18401 -0.240336,0.241181 z',
              'm 37.108846,32.187723 0.179835,-0.187461 -1.093166,-1.048699 3.114945,-1.925729 1.242301,0.560501 2.001898,-0.880152 -2.874137,-0.78968 -4.297376,2.238971 -4.060391,-3.835429 0.443476,-0.786272 -0.03785,-0.686056 -0.559903,-0.537128 -0.663223,0.0135 -0.71619,0.481626 v 0 l -0.179835,0.187461 -0.234751,0.244704 -0.179835,0.187461 v 0 l -0.451485,0.735563 0.01405,0.663211 0.559904,0.537128 0.687035,0.0093 0.767189,-0.47573 4.000648,3.897707 -2.058683,4.3866 0.908285,2.838888 0.796309,-2.036705 -0.611577,-1.217966 1.794786,-3.192186 1.093165,1.048698 0.179835,-0.187462 z',
              'm 27.065736,22.201047 -0.538445,1.050288 0.171069,1.017074 3.116167,3.087589 0.674,0.667818 0.854209,0.846375 0.531458,0.526585 0.939933,0.931314 0.8069,0.7995 0.92066,0.912216 0.813869,0.806406 1.189119,1.178217 9.571207,9.483433 v 0 l 1.00607,0.313878 0.994013,-0.763506 0.372449,-0.375899 0.754317,-1.001003 -0.323133,-1.003136 v 0 l -9.571207,-9.483432 -1.189123,-1.178217 -0.813866,-0.806405 -0.92066,-0.912217 -0.8069,-0.799499 -0.939935,-0.931314 -0.531458,-0.526585 -0.854207,-0.846375 -0.674,-0.667818 -3.116167,-3.08759 -1.018606,-0.161692 -1.045281,0.548098 z',
              'm 27.266804,22.517696 -0.544852,1.046981 0.164854,1.0181 3.097244,3.106564 0.669901,0.671917 0.849024,0.85158 0.528235,0.529823 0.934228,0.937041 0.801997,0.804408 0.915072,0.917828 0.80893,0.811362 1.181901,1.18546 9.513094,9.54172 v 0 l 1.004134,0.320019 0.998656,-0.75742 0.37474,-0.373615 0.760418,-0.996377 -0.317,-1.005092 v 0 l -9.513094,-9.54172 -1.181902,-1.18546 -0.808929,-0.811362 -0.915072,-0.917827 -0.801994,-0.804408 -0.934231,-0.937042 -0.528232,-0.529823 -0.849025,-0.85158 L 32.805,24.876856 29.707754,21.770292 28.690155,21.60238 27.641542,22.144082 Z'
            ],
            attrs: {
              'stroke-width': '0px',
              'stroke': 'none',
              'fill': this.fillColor,
               'filter': this.shadow
            }
          }
        ]
      },
      {
         carac: 'numbers',
         assets: [
            {
               name: 'leftwing',
               d: [
                  'm 45.294748,45.434606 0.252449,0.440931 1.893743,-0.359596 -0.122066,-0.240507 z m 2.230986,0.281797 -1.748026,0.412891 0.293813,0.39018 1.602562,-0.587339 z m -0.133481,0.138574 -1.208956,0.305444 v 0 z m 0,0 -1.208956,0.305444 v 0 z m 0,0 -1.208956,0.305444 v 0 z m 0,0 -1.208956,0.305444 v 0 z m 0,0 -1.208956,0.305444 v 0 z m -2.699789,-1.162888 0.18388,0.511295 2.528769,-0.127729 c 0,0 1.058321,2.680297 2.930581,2.128849 L 50.110852,46.60117 c -1.552504,0.638681 -2.425678,-1.909081 -2.425678,-1.909081 z',
                  'm 12.983609,43.098688 1.322644,2.310144 9.921771,-1.88401 -0.639535,-1.260074 z m 11.688669,1.476404 -9.158323,2.163233 1.539353,2.044245 8.396206,-3.07721 z m -0.699338,0.726021 -6.33401,1.600292 v 0 z m 0,0 -6.33401,1.600292 v 0 z m 0,0 -6.33401,1.600292 v 0 z m 0,0 -6.33401,1.600292 v 0 z m 0,0 -6.33401,1.600292 v 0 z M 9.8281018,39.208465 10.791491,41.887262 24.040318,41.218058 c 0,0 5.544796,14.042716 15.35401,11.15355 l -1.177999,-3.161013 c -8.13394,3.346203 -12.708707,-10.00213 -12.708707,-10.00213 z',
                  'm 11.387404,43.627855 c 0.384777,1.21552 0.825407,2.335292 1.322644,3.368477 4.108413,-0.674984 8.341662,-1.7679 11.244687,-2.90927 -0.160248,-0.595155 -0.287681,-1.203523 -0.374951,-1.822314 -3.837973,1.071361 -8.557677,1.446365 -12.19238,1.363107 z m 12.780074,1.178747 c -3.183763,1.363296 -7.332519,2.49465 -10.944259,3.188494 0.521721,0.948995 1.100053,1.815701 1.73779,2.606484 3.69156,-1.16997 7.355516,-2.672461 9.884487,-4.069397 -0.258886,-0.55557 -0.486252,-1.131922 -0.678018,-1.725581 z m 1.020455,2.41274 c -2.714783,1.593666 -6.251992,3.094204 -9.50901,4.213053 0.626909,0.676977 1.305512,1.291164 2.03846,1.846194 3.145203,-1.515785 6.147134,-3.247597 8.239807,-4.776839 -0.276621,-0.40945 -0.533036,-0.837899 -0.769257,-1.282408 z m 1.130356,1.790449 c -2.163545,1.738518 -4.929901,3.491765 -7.609141,4.962422 0.746546,0.482146 1.543334,0.912759 2.393864,1.294177 2.386927,-1.710624 4.592542,-3.513112 6.194554,-5.085999 -0.346273,-0.365163 -0.671966,-0.757925 -0.979277,-1.1706 z m 1.405283,1.596373 c -1.593153,1.691003 -3.613617,3.452674 -5.676384,5.056649 0.772568,0.301188 1.585639,0.567163 2.441357,0.799418 1.721893,-1.704154 3.262808,-3.407256 4.395253,-4.885223 -0.404083,-0.293146 -0.79096,-0.618414 -1.160226,-0.970844 z m -0.330904,1.080548 c -1.00921,1.586238 -1.771393,1.462507 -3.12812,3.085247 0.72814,0.165597 -0.786165,-0.124082 0,0 1.072453,-1.632095 2.436321,-1.706311 3.12812,-3.085247 -0.458869,-0.207628 0.428028,0.280681 0,0 z m 0,0 c -0.595344,1.434895 -2.263254,1.571282 -3.12812,3.085247 0.636267,0.08181 -0.673056,-0.05865 0,0 0.667467,-1.551279 2.745549,-1.787447 3.12812,-3.085247 -0.453883,-0.08315 0.433791,0.154099 0,0 z M 9.8193964,36.30467 c 0.2508196,2.078221 0.5661746,3.926856 0.9633896,5.582592 3.556015,0.640108 8.316301,0.75159 13.248827,-0.669204 0.567603,6.03821 5.544795,14.042716 15.35401,11.15355 L 38.207624,49.210595 C 28.810834,52.837431 26.342704,45.475864 25.498916,39.208465 19.163919,40.314532 13.780413,38.51838 9.8193964,36.30467 Z',
                  'm 4.5261933,31.573267 c 0.047298,1.878545 0.2128679,3.644382 0.4940266,5.310788 6.0933791,0.72585 12.5345741,0.911046 17.1121351,0.483175 0.0167,-0.90827 0.08527,-1.821818 0.214974,-2.733683 -5.872702,-0.05393 -12.7088291,-1.454722 -17.8211357,-3.06028 z m 17.6128787,6.899839 c -5.06589,0.627187 -11.403185,0.531 -16.801042,0.03514 0.3502837,1.557224 0.8144039,3.021105 1.3937134,4.401799 5.7057536,-0.145617 11.5085226,-0.773351 15.6610606,-1.716176 -0.139163,-0.892593 -0.225193,-1.801712 -0.253732,-2.720763 z m 0.457337,3.833873 C 18.100259,43.4523 12.47775,44.129146 7.408188,44.380239 8.0187453,45.595364 8.7281964,46.742743 9.5388073,47.828606 14.612514,46.969723 19.571781,45.74633 23.160715,44.437598 22.936634,43.744635 22.748937,43.033044 22.596409,42.306979 Z m 0.867647,2.997751 c -3.774938,1.57604 -8.409428,2.926204 -12.804904,3.911904 0.859694,0.988232 1.81162,1.92406 2.859774,2.812232 4.079809,-1.445114 7.940497,-3.094511 10.852568,-4.665864 -0.340828,-0.658764 -0.641221,-1.348183 -0.907438,-2.058272 z m 1.336353,2.835486 c -2.947871,1.742223 -6.529697,3.409606 -10.106877,4.836395 0.970606,0.742662 2.01297,1.452044 3.129525,2.131137 3.135537,-1.70815 6.014394,-3.488883 8.222754,-5.118034 -0.452157,-0.580456 -0.866806,-1.199351 -1.245402,-1.849498 z m 1.706871,2.416389 c -2.078185,1.832891 -4.568911,3.693507 -7.154084,5.435844 0.963198,0.53249 1.975187,1.047154 3.037541,1.544608 2.186499,-1.871935 4.157546,-3.726765 5.701461,-5.396053 -0.564732,-0.481795 -1.093756,-1.01179 -1.584918,-1.584399 z m 2.467552,2.274795 c -1.430247,1.787999 -3.15185,3.630703 -4.996079,5.420342 0.867409,0.376253 1.765951,0.742693 2.694926,1.101225 1.58,-1.923267 2.968229,-3.788977 4.041097,-5.469951 -0.60858,-0.303588 -1.188811,-0.655881 -1.739944,-1.051616 z M 5.3034069,20.56257 c -0.4954747,3.045217 -0.8056031,5.791777 -0.9208742,8.298718 4.7729785,2.361793 11.4674473,4.468016 19.0329473,4.475179 -1.667751,8.781835 2.103245,22.152583 17.174663,22.07669 L 40.216003,50.45532 C 25.426616,51.744487 24.945052,40.311029 26.315561,31.091644 16.893112,30.06483 10.005753,25.3182 5.3034069,20.56257 Z'
               ],
               attrs: {
                  'stroke-width': '0px',
                  'stroke': 'none',
                  'fill': this.fillColor,
                  'filter': this.shadow
               }
            },
            {
               name: 'righttwing',
               d: [
                  'm 60.538588,45.434606 -0.252449,0.440931 -1.893744,-0.359596 0.122067,-0.240507 z m -2.230986,0.281797 1.748025,0.412891 -0.293812,0.39018 -1.602562,-0.587339 z m 0.133481,0.138574 1.208956,0.305444 v 0 z m 0,0 1.208956,0.305444 v 0 z m 0,0 1.208956,0.305444 v 0 z m 0,0 1.208956,0.305444 v 0 z m 0,0 1.208956,0.305444 v 0 z m 2.699789,-1.162888 -0.18388,0.511295 -2.52877,-0.127729 c 0,0 -1.058321,2.680297 -2.93058,2.128849 l 0.224842,-0.603334 c 1.552504,0.638681 2.425678,-1.909081 2.425678,-1.909081 z',
                  'm 92.849726,43.098688 -1.322644,2.310144 -9.921772,-1.88401 0.639535,-1.260074 z m -11.68867,1.476404 9.158322,2.163233 -1.539351,2.044245 -8.396208,-3.07721 z m 0.699339,0.726021 6.334009,1.600292 v 0 z m 0,0 6.334009,1.600292 v 0 z m 0,0 6.334009,1.600292 v 0 z m 0,0 6.334009,1.600292 v 0 z m 0,0 6.334009,1.600292 v 0 z m 14.144837,-6.092648 -0.963388,2.678797 -13.248828,-0.669204 c 0,0 -5.544796,14.042716 -15.354009,11.15355 l 1.177999,-3.161013 c 8.13394,3.346203 12.708705,-10.00213 12.708705,-10.00213 z',
                  'm 94.445932,43.627855 c -0.384779,1.21552 -0.825408,2.335292 -1.322645,3.368477 -4.108413,-0.674984 -8.341664,-1.7679 -11.244688,-2.90927 0.160247,-0.595155 0.287681,-1.203523 0.374951,-1.822314 3.837972,1.071361 8.557679,1.446365 12.192382,1.363107 z m -12.780077,1.178747 c 3.183763,1.363296 7.33252,2.49465 10.94426,3.188494 -0.521722,0.948995 -1.100053,1.815701 -1.737789,2.606484 -3.691562,-1.16997 -7.355517,-2.672461 -9.884487,-4.069397 0.258884,-0.55557 0.486251,-1.131922 0.678016,-1.725581 z m -1.020453,2.41274 c 2.714781,1.593666 6.251991,3.094204 9.509009,4.213053 -0.626909,0.676977 -1.305512,1.291164 -2.038459,1.846194 -3.145205,-1.515785 -6.147136,-3.247597 -8.239807,-4.776839 0.276622,-0.40945 0.533035,-0.837899 0.769257,-1.282408 z m -1.130358,1.790449 c 2.163546,1.738518 4.929902,3.491765 7.609142,4.962422 -0.746546,0.482146 -1.543334,0.912759 -2.393863,1.294177 -2.386928,-1.710624 -4.592542,-3.513112 -6.194555,-5.085999 0.346274,-0.365163 0.671965,-0.757925 0.979276,-1.1706 z m -1.405281,1.596373 c 1.593151,1.691003 3.613615,3.452674 5.676384,5.056649 -0.772568,0.301188 -1.58564,0.567163 -2.441358,0.799418 -1.721893,-1.704154 -3.262808,-3.407256 -4.395254,-4.885223 0.404085,-0.293146 0.790962,-0.618414 1.160228,-0.970844 z m 0.330903,1.080548 c 1.009211,1.586238 1.771394,1.462507 3.128121,3.085247 -0.728141,0.165597 0.786165,-0.124082 0,0 -1.072454,-1.632095 -2.436323,-1.706311 -3.128121,-3.085247 0.45887,-0.207628 -0.428027,0.280681 0,0 z m 0,0 c 0.595345,1.434895 2.263254,1.571282 3.128121,3.085247 -0.636267,0.08181 0.673056,-0.05865 0,0 -0.667467,-1.551279 -2.745549,-1.787447 -3.128121,-3.085247 0.453882,-0.08315 -0.433792,0.154099 0,0 z M 96.013937,36.30467 c -0.25082,2.078221 -0.566174,3.926856 -0.963388,5.582592 -3.556016,0.640108 -8.316301,0.75159 -13.248828,-0.669204 -0.567602,6.03821 -5.544796,14.042716 -15.354009,11.15355 l 1.177999,-3.161013 c 9.396789,3.626836 11.86492,-3.734731 12.708708,-10.00213 6.334995,1.106067 11.718502,-0.690085 15.679518,-2.903795 z',
                  'm 101.30713,31.573267 c -0.0473,1.878545 -0.21287,3.644382 -0.49403,5.310788 -6.093377,0.72585 -12.534571,0.911046 -17.112132,0.483175 -0.0167,-0.90827 -0.08527,-1.821818 -0.214974,-2.733683 5.872702,-0.05393 12.708829,-1.454722 17.821136,-3.06028 z m -17.612879,6.899839 c 5.06589,0.627187 11.403182,0.531 16.801039,0.03514 -0.35028,1.557224 -0.8144,3.021105 -1.39371,4.401799 -5.705757,-0.145617 -11.508523,-0.773351 -15.661061,-1.716176 0.139163,-0.892593 0.225193,-1.801712 0.253732,-2.720763 z m -0.457337,3.833873 c 4.49615,1.145321 10.118659,1.822167 15.188216,2.07326 -0.61055,1.215125 -1.320007,2.362504 -2.130617,3.448367 -5.073704,-0.858883 -10.032971,-2.082276 -13.621905,-3.391008 0.224081,-0.692963 0.411778,-1.404554 0.564306,-2.130619 z m -0.867647,2.997751 c 3.774938,1.57604 8.409428,2.926204 12.804906,3.911904 -0.8597,0.988232 -1.81162,1.92406 -2.85978,2.812232 -4.079805,-1.445114 -7.940493,-3.094511 -10.852564,-4.665864 0.340828,-0.658764 0.641221,-1.348183 0.907438,-2.058272 z m -1.336353,2.835486 c 2.947871,1.742223 6.529697,3.409606 10.106877,4.836395 -0.970606,0.742662 -2.01297,1.452044 -3.129525,2.131137 -3.135537,-1.70815 -6.014394,-3.488883 -8.222754,-5.118034 0.452157,-0.580456 0.866806,-1.199351 1.245402,-1.849498 z m -1.706871,2.416389 c 2.078185,1.832891 4.568911,3.693507 7.154084,5.435844 -0.963198,0.53249 -1.975187,1.047154 -3.037541,1.544608 -2.186499,-1.871935 -4.157546,-3.726765 -5.701461,-5.396053 0.564732,-0.481795 1.093756,-1.01179 1.584918,-1.584399 z M 76.858491,52.8314 c 1.430247,1.787999 3.15185,3.630703 4.996079,5.420342 -0.867409,0.376253 -1.765951,0.742693 -2.694926,1.101225 -1.58,-1.923267 -2.968229,-3.788977 -4.041097,-5.469951 0.60858,-0.303588 1.188811,-0.655881 1.739944,-1.051616 z M 100.52992,20.56257 c 0.49547,3.045217 0.8056,5.791777 0.92088,8.298718 -4.772987,2.361793 -11.467457,4.468016 -19.032957,4.475179 1.667751,8.781835 -2.103245,22.152583 -17.174663,22.07669 L 65.61732,50.45532 C 80.406707,51.744487 80.888271,40.311029 79.517762,31.091644 88.940211,30.06483 95.827573,25.3182 100.52992,20.56257 Z'
               ],
               attrs: {
                  'stroke-width': '0px',
                  'stroke': 'none',
                  'fill': this.fillColor,
                  'filter': this.shadow
               }
            }
         ]
      },
      {
        carac: 'uppercases',
        assets: [
           {
              name: 'crown',
               d: [
                  'm 52.959196,34.522053 v 0 0 c -0.406276,0 -1.071217,0.162996 -1.325227,0.574478 0,0 -0.395858,-0.0082 -0.795451,0 -0.596404,0.0123 -1.604858,0.318349 -1.604858,0.318349 0,0 0.814926,0.340771 1.604858,0.340771 h 0.186616 c -0.181354,0.279629 -0.302102,0.559258 -0.29336,0.838888 l 2.227422,-0.003 2.227421,0.003 c -0.06667,-0.441477 -0.187172,-0.586814 -0.29336,-0.81092 l 0.179762,-0.0041 c 1.419634,-0.03271 1.714999,-0.364597 1.714999,-0.364597 0,0 -0.668659,-0.32441 -1.714999,-0.32441 -0.396992,0 -0.788597,0.0061 -0.788597,0.0061 -0.274192,-0.323769 -0.650752,-0.566721 -1.325226,-0.574478 z',
                  'm 52.916667,11.377084 v 0 0 c -1.195854,0 -3.15308,0.479771 -3.900744,1.69095 0,0 -1.165192,-0.02426 -2.341375,0 -1.755488,0.03621 -4.723826,0.937045 -4.723826,0.937045 0,0 2.398697,1.003043 4.723826,1.003043 h 0.549296 c -0.533807,0.823076 -0.889222,1.646153 -0.863491,2.46923 l 6.556314,-0.0088 6.556314,0.0088 c -0.196224,-1.299469 -0.550935,-1.72726 -0.863491,-2.386907 l 0.529116,-0.01219 c 4.178629,-0.09627 5.048024,-1.073176 5.048024,-1.073176 0,0 -1.968168,-0.954885 -5.048024,-0.954885 -1.168524,0 -2.321198,0.01784 -2.321198,0.01784 -0.807071,-0.952998 -1.915459,-1.668117 -3.900741,-1.690951 z',
                  'm 52.916667,11.377083 v 0 0 c -1.195855,0 -3.153079,0.479771 -3.900743,1.69095 0,0 -2.352729,-0.02426 -3.528912,0 -1.755488,0.03621 -3.278362,-0.648097 -2.016194,-4.2546631 -2.707481,3.5648501 -1.767231,6.1947511 0.557898,6.1947511 h 3.195129 c -0.533807,0.823077 -0.889222,1.646154 -0.863491,2.469231 l 6.556313,-0.0088 6.556313,0.0088 c -0.196224,-1.29947 -0.550935,-1.727261 -0.863491,-2.386908 l 1.885509,-0.01219 c 4.17965,-0.02702 4.454927,-2.503288 1.867517,-6.2648848 0.497633,1.9963638 1.040278,4.2368258 -2.039579,4.2368258 -1.168524,0 -3.505528,0.01784 -3.505528,0.01784 -0.807072,-0.952998 -1.91546,-1.668117 -3.900741,-1.69095 z',
                  'm 52.916666,5.0270827 -4.305683,3.4447512 a 2.9765623,2.5796874 0 0 1 1.659848,2.3099361 2.9765623,2.5796874 0 0 1 -2.97656,2.579688 2.9765623,2.5796874 0 0 1 -2.976563,-2.579688 2.9765623,2.5796874 0 0 1 0.520382,-1.457792 l -6.936528,-1.5187703 3.96875,5.9531253 0.264583,2.447396 h 10.781771 10.781771 l 0.264582,-2.447396 3.968752,-5.9531253 -6.936528,1.5187703 a 2.9765623,2.5796874 0 0 1 0.520382,1.457792 2.9765623,2.5796874 0 0 1 -2.976565,2.579688 2.9765623,2.5796874 0 0 1 -2.976562,-2.579688 2.9765623,2.5796874 0 0 1 1.659848,-2.3099361 z'
               ],
              attrs: {
                  'stroke-width': '0.5px',
                  'stroke': this.strokeColor,
                  'fill': this.fillColor,
                  'filter': this.shadow
              }
           }
        ]
      }
    ]
  }
   
}

var draw = new Draw(config.strokeColor, config.fillColor, config.strokeDarkColor, config.fillShield, config.shadow).paths();


// Init shield
draw.reverse().forEach(carac => {
  carac.assets.forEach(asset => {
    asset['svg'] = s.path(asset.d[0]).attr(asset.attrs);
  });
});

// Return the password strength levels
var checkPass = function(pwd) {
  return {
    length: Math.max.apply(null, config.strengthSteps.length.map((v, i) => {
      return pwd.length >= v ? i : 0;
    })),
    specials: Math.max.apply(null, config.strengthSteps.specials.map((v, i) => {
      return [...pwd].filter(l => !/^[a-zA-Z0-9]+$/.test(l)).length >= v ? i : 0;
    })),
    numbers: Math.max.apply(null, config.strengthSteps.numbers.map((v, i) => {
      return [...pwd].filter(l => /^[0-9]+$/.test(l)).length >= v ? i : 0;
    })),
    uppercases: Math.max.apply(null, config.strengthSteps.uppercases.map((v, i) => {
      return [...pwd].filter(l => /^[A-Z]+$/.test(l)).length >= v ? i : 0;
    })),
  }
}

document.getElementById('pwd').addEventListener('keyup', (e) => {
   
   let password = e.target.value;

   // Update each shape according to current pwd level
   for(var carac in checkPass(password)) {
     draw.forEach(c => {
       if(c.carac == carac) {
         c.assets.forEach(asset => {
            asset.svg.animate({ d: asset.d[checkPass(password)[carac]] }, 250, mina.easeinout);     
         });
       }
     });
   }
   
   //update each level progress bar according to current pwd level
   for(var carac in checkPass(password)) {

      document.querySelector('[data-carac=' + carac + ']').setAttribute('data-level', checkPass(password)[carac]);
      
   }
   
});

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js