medium-better-login-page-demo

app.component.html

<section class="flex">

  <section>
    <h1>This is an Input Eye Trace animation for login</h1>
  </section>

	<section class="svg-container">
		<svg #svgEye width="200" viewBox="0 0 911 654" fill="none" xmlns="http://www.w3.org/2000/svg">
			<g id="undraw_Surveillance_re_8tkl 1">
				<path id="eyeball"
					d="M470.909 483.818C570.822 483.818 651.818 402.822 651.818 302.909C651.818 202.996 570.822 122 470.909 122C370.996 122 290 202.996 290 302.909C290 402.822 370.996 483.818 470.909 483.818Z"
					fill="#3F3D56" />
				<path id="sclera" #sclera
					d="M466.175 429.852C519.238 429.852 562.253 370.679 562.253 297.685C562.253 224.692 519.238 165.519 466.175 165.519C413.112 165.519 370.096 224.692 370.096 297.685C370.096 370.679 413.112 429.852 466.175 429.852Z"
					fill="white" />
				<path id="pupil" #pupil
					d="M465.814 345.362C480.623 345.362 492.629 326.477 492.629 303.181C492.629 279.885 480.623 261 465.814 261C451.005 261 439 279.885 439 303.181C439 326.477 451.005 345.362 465.814 345.362Z"
					fill="#3F3D56" />
			</g>
		</svg>
	</section>

	<section class="form-container">
		<mat-form-field class="form-field">
			<mat-label>Enter email</mat-label>
			<input (ngModelChange)="onEmailChange($event)" (focus)="onEmailFocus()" (blur)="onBlur()" matInput type="email" [(ngModel)]="emailValue" placeholder="Ex. pat@example.com">
		</mat-form-field><br>
			<mat-form-field class="form-field">
				<mat-label>Enter password</mat-label>
				<input (focus)="onPasswordFocus()" (blur)="onBlur()" matInput type="password" [(ngModel)]="passwordValue">
		</mat-form-field>
	</section>
</section>