<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/56942480bb.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 

<div id="wrapper">
  <div id="svgWrapper">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 305.7 326.9" style="enable-background:new 0 0 305.7 326.9;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
	.st1{fill:none;stroke:url(#SVGID_2_);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:none;stroke:url(#SVGID_3_);stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
	.st3{fill:none;stroke:url(#SVGID_4_);stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
	.st4{fill:none;stroke:url(#SVGID_5_);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st5{fill:none;stroke:url(#SVGID_6_);stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
	.st6{fill:none;stroke:url(#SVGID_7_);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st7{fill:none;stroke:url(#SVGID_8_);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st8{fill:none;stroke:url(#SVGID_9_);stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st9{fill:none;stroke:url(#SVGID_10_);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st10{fill:none;stroke:url(#SVGID_11_);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st11{fill:none;stroke:url(#SVGID_12_);stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st12{fill:#181523;stroke:url(#SVGID_13_);stroke-width:4;stroke-miterlimit:10;}
	.st13{fill:none;stroke:url(#SVGID_14_);stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st14{fill:none;stroke:url(#SVGID_15_);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st15{fill:none;stroke:url(#SVGID_16_);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st16{fill:none;stroke:url(#SVGID_17_);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st17{fill:none;stroke:url(#SVGID_18_);stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st18{fill:#181523;stroke:url(#SVGID_19_);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="swords">
	<g id="sword-right">
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="201.8246" y1="81.0234" x2="201.8246" y2="105.8914">
			<stop  offset="0" style="stop-color:#FF8901"/>
			<stop  offset="1" style="stop-color:#E52E71"/>
		</linearGradient>
		<line class="st0" x1="178.6" y1="83" x2="225.1" y2="103.9"/>
		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="165.5329" y1="51.6546" x2="165.5329" y2="300.8525">
			<stop  offset="0" style="stop-color:#FF8901"/>
			<stop  offset="1" style="stop-color:#E52E71"/>
		</linearGradient>
		<polyline class="st1" points="214.5,53.7 108.8,275.7 109.7,298.9 127,284.9 222.3,57.9 		"/>
		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="222.8899" y1="34.1813" x2="222.8899" y2="58.9361">
			<stop  offset="0" style="stop-color:#FF8901"/>
			<stop  offset="1" style="stop-color:#E52E71"/>
		</linearGradient>
		<ellipse transform="matrix(0.9345 -0.356 0.356 0.9345 -1.9738 82.3909)" class="st2" cx="222.9" cy="46.6" rx="10.4" ry="10.4"/>
	</g>
	<g id="sword-left">
		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="110.5006" y1="81.0234" x2="110.5006" y2="105.8914">
			<stop  offset="0" style="stop-color:#FF8901"/>
			<stop  offset="1" style="stop-color:#E52E71"/>
		</linearGradient>
		<line class="st3" x1="133.8" y1="83" x2="87.2" y2="103.9"/>
		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="146.7923" y1="51.6546" x2="146.7923" y2="300.8525">
			<stop  offset="0" style="stop-color:#FF8901"/>
			<stop  offset="1" style="stop-color:#E52E71"/>
		</linearGradient>
		<polyline class="st4" points="97.8,53.7 203.5,275.7 202.6,298.9 185.3,284.9 90,57.9 		"/>
		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="89.4354" y1="34.1813" x2="89.4354" y2="58.9361">
			<stop  offset="0" style="stop-color:#FF8901"/>
			<stop  offset="1" style="stop-color:#E52E71"/>
		</linearGradient>
		<ellipse transform="matrix(0.356 -0.9345 0.9345 0.356 14.0903 113.5626)" class="st5" cx="89.4" cy="46.6" rx="10.4" ry="10.4"/>
	</g>
</g>
<g id="wings">
	<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="89.0083" y1="80.0864" x2="89.0083" y2="218.2749">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st6" d="M153.8,180.8c0,0-3.6,25-23.8,32.5s-42.4-0.9-50.8-6.3s-18.2-12.5-24-27.1c0,0-19.1-11.8-18.7-41.7
		c0,0-18.7-20.7-10-54.6c0,0,2.3-4.4,7.7,1.9c5.4,6.3,47,48.4,89.4,61.5C123.6,147,154.8,155.7,153.8,180.8z"/>
	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="61.0109" y1="135.4071" x2="61.0109" y2="164.9678">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st7" d="M86.2,163.5c0,0-25.5-4.7-50.4-26.6"/>
	<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="74.683" y1="178.1688" x2="74.683" y2="189.2321">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st8" d="M93.9,187.4c-1.1,0.1-14,2-31.3-4.9c-16.2-6.5,0,0,0,0"/>
	<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="217.9578" y1="80.8117" x2="217.9578" y2="219.0002">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st9" d="M153.2,181.5c0,0,3.6,25,23.8,32.5c20.2,7.5,42.4-0.9,50.8-6.3c8.4-5.4,18.2-12.5,24-27.1
		c0,0,19.1-11.8,18.7-41.7c0,0,18.7-20.7,10-54.6c0,0-2.3-4.4-7.7,1.9s-47,48.4-89.4,61.5C183.4,147.7,152.2,156.4,153.2,181.5z"/>
	<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="245.9552" y1="136.1324" x2="245.9552" y2="165.6931">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st10" d="M220.8,164.2c0,0,25.5-4.7,50.4-26.6"/>
	<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="232.2831" y1="178.8941" x2="232.2831" y2="189.9574">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st11" d="M213,188.1c1.1,0.1,14,2,31.3-4.9c16.2-6.5,0,0,0,0"/>
</g>
<g id="shield">
	<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="155.1985" y1="95.6" x2="155.1985" y2="265.28">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st12" d="M155.4,97.6c0,0,2.4-0.4,4.4,2.8s24.9,27.9,69.8,26c0,0-7,89.9-74.2,136.5c0,0-63.1-39.6-74.5-136.1
		c0,0,45.6,2.9,70.3-26.7C151.2,100,152.6,97.6,155.4,97.6z"/>
	<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="171.026" y1="120.7933" x2="171.026" y2="131.8795">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st13" d="M163.6,122.3c0,0,8.6,5.4,14.9,8.1"/>
	<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="201.7623" y1="133.1288" x2="201.7623" y2="189.382">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st14" d="M188.8,134.6c0,0,13.3,4.6,25.9,6c0,0-5.7,26.8-14.7,47.2"/>
	<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="190.0285" y1="196.0098" x2="190.0285" y2="213.7522">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st15" d="M194.2,197.5c0,0-4.8,10.5-8.4,14.7"/>
	<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="130.1562" y1="203.381" x2="130.1562" y2="230.6007">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st16" d="M121.1,204.9c0,0,11.7,19.7,18.1,24.2"/>
</g>
<g id="crown">
	<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="155.6981" y1="60.7746" x2="155.6981" y2="66.5512">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st17" d="M133.2,65.1c0,0,21.9-6.2,44.9,0"/>
	<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="155.2471" y1="26.5662" x2="155.2471" y2="61.6399">
		<stop  offset="0" style="stop-color:#FF8901"/>
		<stop  offset="1" style="stop-color:#E52E71"/>
	</linearGradient>
	<path class="st18" d="M128.9,60.1l-5.8-12.8l8.8-5.5c0,0,1.3,9.8,9.1,9.6c7.8-0.2,9.3-6.5,9.3-6.5s2.6-7.2-4.5-11.4l9.4-5.5
		l9.2,5.3c0,0-6.3,4.1-4.6,10.7s8.2,7.2,8.2,7.2s9.5,1.1,10.6-9.6l8.8,5.3l-5.7,13.1C181.7,60.1,155.8,52.4,128.9,60.1z"/>
</g>
</svg>
    <div id="inputWrapper">
      <input oninput="eventFunction()" id="passInput" type="password" class="gradientInput" autofocus>
      <button id="showHide" type="button"><i id="hidePass" class="far fa-eye-slash"></i><i id="showPass" class="far fa-eye"></i></button>
    </div>
    <div id="instructions">
      <p>Combine length, lower and upper cases, numbers and symbols.</p>
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #100e17;
}

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #181523;
  border-radius: 6px;
  padding: 0 90px 30px 90px;
  width: 380px;
}

#svgWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

svg {
  width: 100%;
  padding: 30px 30px 0 30px;
}

#sword-left, #sword-right, #wings, #crown {
  opacity: 0;
}

#inputWrapper {
  display: flex;
  justify-content: center;
  background: #100e17;
  border-radius: 6px;
  padding: 6px 18px 9px 18px;
  position: relative;
  width: 80%;
  margin-top: 18px;
}

input {
  font-size: 16px;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 1px;
  color: #e5306d;
  background: #100e17;
  outline: 0;
  border: 0;
  background: -webkit-linear-gradient(60deg, #e5316c, #fe8603);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 80%;
  position: relative;
  left: -20px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 0 12px;
  width: 50px;
  font-size: 18px;
  color: rgba(255,255,255,.8);
  background: -webkit-linear-gradient(-60deg, #e5316c 30%, #fe8603);
  cursor: pointer;
  transition: 150ms ease-in-out;
}

button:hover {
  color: rgba(255,255,255,1);
}

#showPass {
  display: none;
}

#instructions {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
  color: white;
  font-size: 14px;
  text-align: center;
  color: #e5316c;
  margin-top: 30px;
  opacity: .5;
}

ul {
  padding: 0;
}

li {
  padding: 0;
  list-style: none;
  margin: 3px 0;
  background: -webkit-linear-gradient(60deg, #e5316c, #fe8603);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-height: 420px) {
  #instructions {
    display: none;
  }
}
let passStrength = 0;
let password = "";
let length = 0;

function getPass() {
  let passInput = document.getElementById("passInput").value;
  password = passInput;
  return password;
}

function getLength() {
  let passLength = password.length;
  length = passLength;
  return length;
}

function lengthReq() {
  if (length > 11 && passStrength == 0) {
    passStrength++;
  }
  if (length < 12 && passStrength >= 1) {
    passStrength--;
  }
}

function upperReq() {
  let chars = password;
  if (/[a-z].?[A-Z]/g.test(chars) && passStrength <= 1) {
    passStrength++;
  }
}

function numReq() {
  let chars = password;
  if (/[0-9]{1}/.test(chars) && passStrength <= 1) {
    passStrength++;
  }
}

function specialReq() {
  let chars = password;
  if (/[!@#\$%\^\&*\)\(+=._-]/g.test(chars) && passStrength <= 3) {
    passStrength++;
  }
}

function checkStrength() {
  switch(passStrength) {
    case 0:
      swordLeft.reverse();
      swordRight.reverse();
      wings.reverse();
      crown.reverse();
      break;
    case 1:
      swordLeft.play();
      swordRight.reverse();
      wings.reverse();
      crown.reverse();
      break;
    case 2:
      swordLeft.play();
      swordRight.play();
      wings.reverse();
      crown.reverse();
      break;
    case 3:
      swordLeft.play();
      swordRight.play();
      wings.play();
      crown.reverse();
      break;
    case 4:
      swordLeft.play();
      swordRight.play();
      wings.play();
      crown.play();
      break;
  }
}

function deletePass() {
  if (password == "") {
    passStrength = 0;
  }
}

function eventFunction() {
  getPass();
  getLength();
  lengthReq();
  upperReq();
  numReq();
  specialReq();
  deletePass();
  checkStrength();
  console.log(passStrength);
};

function toggle() {
  var x = document.getElementById("passInput");
  if (x.type === "password") {
    $("#showPass").css({"display": "block"});
    $("#hidePass").css({"display": "none"});
    x.type = "text";
  } else {
    $("#showPass").css({"display": "none"});
    $("#hidePass").css({"display": "block"});
    x.type = "password";
  }
} 

$("#showHide").click(function() {
  getPass();
  toggle();
});

gsap.set("#swords", {y: -60});
gsap.set("#sword-left", {x: -30, rotate: -30, transformOrigin: "center"});
gsap.set("#sword-right", {x: 30, rotate: 30, transformOrigin: "center"});
gsap.set("#wings", {scale: 0, y: 60, transformOrigin: "center"});
gsap.set("#crown", {rotate: 30, transformOrigin: "center", y: 60});

var swordLeft = gsap.timeline();
  swordLeft.to("#sword-left", .5, {opacity: 1, rotate: 0, y: 60, x: 0, ease: Back.easeOut});
  swordLeft.pause();

var swordRight = gsap.timeline();
 swordRight.to("#sword-right", .5, {opacity: 1, rotate: 0, y: 60, x: 0, ease: Power4.easeInOut});
  swordRight.pause();

var wings = gsap.timeline();
  wings.to("#wings", .5, {delay: .5, opacity: 1, scale: 1, y: 0, ease: Back.easeOut, transformOrigin: "center"});
  wings.pause();

var crown = gsap.timeline();
  crown.to("#crown", .5, {delay: 1, opacity: 1, y: 0, rotate: 0, ease: Back.easeOut});
  crown.pause();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/CSSRulePlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js
  9. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EasePack.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  13. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  14. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js
  15. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  16. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js
  17. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/PixiPlugin.min.js
  18. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  19. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/ScrollToPlugin.min.js
  20. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  21. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js