Want to build a futuristic biometric interface for your login or authentication page? This Fingerprint Scanner Animation simulates a real-time fingerprint scan using SVG graphics, CSS animations and a scanner light effect.
This component is perfect for:
- Biometric-style login mockups
- Futuristic dashboards
- Animated identity verification screens
Let’s dive into how this works and how you can build it.
HTML Structure
The HTML structure for Fingerprint Scanner Animation is minimal and semantic. Here’s how it works:
<div class="main-container">
<div class="fingerprint-box">
<div class="svg-box">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -30 90 200" style="aspect-ratio: 1;"
width="200">
<path stroke="#34d9fd"
d="M53.694 1.9C47.463-.352 40.907-.674 34.527 1.322c-.493.154-.806.858-.7 1.573.107.714.593 1.168 1.086 1.014 6.11-1.911 12.403-1.596 18.389.578 14.316 5.2 26.232 20.797 30.77 41.172 1.756 7.879 2.501 16.27 2.65 25.062.013.73.432 1.309.936 1.29.504-.017.903-.624.89-1.355-.15-8.914-.905-17.52-2.703-25.66C81.13 23.667 68.677 7.317 53.694 1.9ZM29.892 5.904c.487-.194.772-.923.638-1.628-.134-.704-.637-1.118-1.123-.924C22.735 6.02 13.35 15.236 7.55 27.547l-.007.015C2.45 38.684-.742 52.66.149 66.222l.003.04c.213 2.476.572 4.947.931 7.422.756 5.212 1.514 10.438.923 15.746-.08.721.259 1.4.757 1.517.498.116.966-.374 1.047-1.096.617-5.549-.15-10.96-.917-16.374-.354-2.504-.71-5.007-.927-7.525-.838-12.815 2.181-26.184 7.096-36.92 5.58-11.839 14.614-20.643 20.83-23.128Z">
</path>
<path stroke="#34d9fd"
d="M41.877 8.86c11.466-1.014 22.93 5.767 30.629 18.758.328.555.285 1.39-.098 1.867-.383.476-.96.412-1.288-.142-7.321-12.354-18.23-18.807-29.137-17.84l-.012.001c-13.793.967-26.71 14.527-31.462 33.527-.172.688-.696 1.043-1.17.794-.474-.25-.72-1.008-.548-1.696 5.006-20.016 18.57-34.247 33.086-35.268ZM75.288 33.4c-.281-.607-.849-.768-1.267-.36-.419.407-.53 1.229-.25 1.836 4.269 9.209 6.034 19.23 6.731 31.123.043.728.485 1.268.988 1.206.502-.062.875-.702.832-1.43-.713-12.153-2.533-22.662-7.034-32.375ZM81.712 71.393c.503-.045.936.51.968 1.239.344 7.98.347 17.009-.262 23.681-.066.725-.525 1.234-1.025 1.138-.5-.095-.852-.76-.786-1.485.588-6.431.59-15.268.25-23.17-.031-.729.351-1.357.855-1.403ZM9.13 51.441c.118-.71-.184-1.425-.674-1.597-.49-.171-.984.266-1.102.976a76.549 76.549 0 0 0-1.032 12.293c-.014 4.264.534 8.425 1.083 12.589.45 3.406.898 6.813 1.04 10.278.185 4.55-.475 9.108-1.617 13.446-.18.683.057 1.448.528 1.709.471.26.999-.083 1.179-.765 1.206-4.586 1.938-9.525 1.733-14.547-.14-3.44-.59-6.828-1.038-10.213-.548-4.132-1.096-8.261-1.082-12.484.014-3.931.344-7.86.982-11.685Z">
</path>
<path stroke="#34d9fd"
d="M33.094 22.032c.188.678-.04 1.449-.508 1.721-9.468 5.51-16.578 17.944-18.028 32.606-.606 6.126.049 12.193.703 18.26.369 3.416.737 6.832.88 10.257.311 7.427-.273 15.585-3.608 23.007-.275.613-.841.786-1.264.387-.422-.399-.542-1.218-.267-1.831 3.04-6.763 3.614-14.274 3.316-21.403-.145-3.475-.511-6.93-.877-10.384-.657-6.195-1.313-12.383-.691-18.669 1.549-15.655 9.12-28.846 19.156-34.686.468-.272 1 .057 1.188.735ZM65.155 29.567c-7.47-10.138-18.296-13.677-28.135-10.55-.492.157-.804.863-.696 1.577.108.714.595 1.166 1.088 1.01 9.317-2.962 19.51.416 26.494 9.895 5.887 7.989 9.305 19.614 10.2 32.297.05.727.5 1.256 1 1.182.503-.075.868-.724.817-1.451-.93-13.17-4.492-25.442-10.768-33.96ZM75.731 69.83c.502-.075.95.454 1.002 1.18.867 12.238.494 25.456-.816 38.243-.074.723-.538 1.222-1.037 1.115-.499-.108-.843-.781-.77-1.504 1.292-12.609 1.655-25.602.806-37.583-.051-.727.314-1.377.815-1.452Z">
</path>
<path stroke="#34d9fd"
d="M43.891 26.896c-13.995 0-25.365 16.18-25.365 36.183 0 2.137.13 4.23.38 6.266.088.72.562 1.2 1.059 1.072.496-.128.827-.815.74-1.535a47.74 47.74 0 0 1-.353-5.803c0-18.501 10.525-33.536 23.54-33.536 5.88 0 11.254 3.072 15.378 8.147.385.473.961.405 1.287-.152.327-.557.28-1.392-.105-1.865-4.444-5.47-10.233-8.777-16.56-8.777ZM62.499 40.607c.364-.506.942-.488 1.291.04 4.03 6.09 5.32 15.662 6.174 23.696.962 9.048 1.109 17.876 1.109 21.97 0 .73-.41 1.323-.914 1.323s-.913-.593-.913-1.324c0-4.026-.145-12.705-1.087-21.566-.793-7.458-1.935-16.597-5.687-22.268-.35-.527-.337-1.365.027-1.87ZM70.84 93.892c.04-.73-.334-1.367-.837-1.425-.503-.058-.943.486-.983 1.214-.448 8.152-1.034 16.295-2.224 23.817-.112.713.195 1.423.687 1.586.491.163.981-.282 1.094-.995 1.22-7.72 1.814-16.024 2.264-24.197ZM20.376 74.216c.495-.141.975.326 1.072 1.043 1.931 14.21.597 27.118-4.516 38.426-.277.611-.843.782-1.265.381-.422-.401-.54-1.221-.263-1.832 4.811-10.639 6.106-22.82 4.252-36.464-.097-.717.225-1.413.72-1.554Z">
</path>
<path stroke="#34d9fd"
d="M43.891 35.507c-9.084 0-17.996 10.19-18.906 22.997-.398 5.607.161 11.13.72 16.655.49 4.825.979 9.65.83 14.536-.34 11.181-2.603 20.41-6.493 28.011-.3.587-.216 1.416.19 1.851.405.436.977.313 1.277-.274 4.125-8.063 6.497-17.811 6.85-29.472.149-4.863-.342-9.674-.832-14.481-.56-5.498-1.12-10.992-.725-16.555.8-11.25 8.79-20.621 17.09-20.621 3.87 0 13.884 3.037 17.07 18.075 1.996 9.424 2.54 22.177 2.057 34.567-.483 12.389-1.987 24.238-4.01 31.836-.181.682.053 1.448.524 1.711.47.263.999-.077 1.18-.759 2.116-7.949 3.64-20.098 4.13-32.639.49-12.538-.049-25.645-2.135-35.493-3.536-16.692-14.62-19.945-18.817-19.945Z">
</path>
<path stroke="#34d9fd"
d="M29.837 113.687c.422.399.541 1.219.266 1.831-.567 1.258-1.065 2.575-1.563 3.891-.498 1.317-.997 2.634-1.563 3.892-.276.612-.841.785-1.264.386-.422-.4-.541-1.22-.266-1.832.567-1.258 1.065-2.575 1.563-3.891.498-1.317.996-2.633 1.563-3.892.275-.612.841-.785 1.264-.385ZM37.657 49.245c.419-.407.532-1.228.251-1.836-.28-.608-.848-.77-1.267-.364-3.616 3.505-5.835 8.325-5.835 15.386 0 4.205.514 7.642 1.041 11.166.79 5.275 1.324 10.539 1.228 15.957-.117 6.579-1.005 12.591-2.713 18.318-.2.671.014 1.45.477 1.74.463.29 1-.019 1.2-.69 1.806-6.056 2.74-12.403 2.862-19.3.1-5.63-.45-11.102-1.268-16.584-.529-3.54-1-6.701-1-10.607 0-6.05 1.836-10.097 5.024-13.186ZM41.221 44.595c3.79-1.12 7.868.264 10.87 3.784 5.362 6.29 6.075 17.758 6.653 27.051l.029.474c.747 11.98-.108 23.615-1.83 35.3-.105.715-.59 1.171-1.084 1.018-.493-.152-.807-.856-.702-1.57 1.696-11.51 2.523-22.87 1.797-34.51l-.072-1.172v-.006c-.514-8.398-1.157-18.917-5.94-24.527-2.567-3.01-6.086-4.215-9.356-3.249-.494.146-.976-.316-1.077-1.032-.1-.716.218-1.415.712-1.561ZM55.652 117.79c.125-.709-.17-1.429-.66-1.609-.488-.181-.985.247-1.11.956a40.877 40.877 0 0 1-2.481 8.59c-.26.628-.118 1.44.314 1.816.433.375.994.171 1.253-.456a44.288 44.288 0 0 0 2.684-9.297ZM51.186 98.584c.501.086.86.744.8 1.47-.862 10.562-2.81 19.983-5.934 28.153-.245.639-.8.87-1.242.516-.441-.354-.6-1.16-.356-1.799 2.99-7.819 4.878-16.897 5.718-27.18.06-.727.514-1.245 1.014-1.16Z">
</path>
<path stroke="#34d9fd"
d="M50.998 61.737c-.633-4.902-3.537-8.653-7.062-8.653-4.773 0-8.122 6.973-6.942 13.46 1.997 11.45 2.325 22.486.973 33.114v.008c-1.174 9.543-3.427 18.128-6.5 25.403-.263.623-.128 1.438.303 1.82.43.381.992.185 1.255-.438 3.199-7.572 5.528-16.471 6.739-26.317 1.403-11.039 1.056-22.461-1-34.246l-.003-.014c-.885-4.852 1.583-10.143 5.175-10.143 2.593 0 4.782 2.764 5.266 6.484 1.329 11.174 2.021 21.535 1.528 30.456-.04.729.335 1.367.838 1.425.503.058.943-.485.983-1.213.511-9.247-.21-19.864-1.55-31.127l-.003-.019ZM41.211 119.056c.449.334.626 1.131.395 1.782l-2.42 6.824c-.23.65-.78.906-1.23.572-.448-.334-.625-1.132-.394-1.782l2.42-6.824c.23-.65.78-.906 1.23-.572Z">
</path>
<path stroke="#34d9fd"
d="M44.616 63.013c-.116-.711-.607-1.153-1.098-.985-.491.167-.796.879-.68 1.59 3.08 18.998 2.656 35.68-1.095 49.891-.18.683.056 1.448.527 1.709.47.261.999-.081 1.179-.763 3.911-14.818 4.309-32.058 1.167-51.442Z">
</path>
</svg>
</div>
<div class="scanner"></div>
</div>
</div>.main-container: Centers the scanner using Flexbox..fingerprint-box: Acts as the main UI block, styled with borders and shadows..svg-box: Contains the SVG fingerprint paths..scanner: A div that animates vertically to mimic a scanning light.
The SVG inside .svg-box draws a detailed fingerprint shape. Each path is animated with stroke effects for a dynamic print visualization.
Styling the fingerprint scanner Animation
Let’s break it down by feature:
.main-container {
display: flex;
min-height: 100vh;
min-width: 250px;
align-items: center;
justify-content: center;
}
.fingerprint-box {
display: flex;
width: 200px;
height: 200px;
position: relative;
justify-content: center;
border: 1px solid #34d9fd61;
background: black;
}
.fingerprint-box::before,
.fingerprint-box::after,
.svg-box::before,
.svg-box::after {
position: absolute;
content: '';
width: 35px;
height: 35px;
}
.fingerprint-box::before {
top: -2px;
left: -2px;
border-top: 4px solid #34d9fd;
border-left: 4px solid #34d9fd;
}
.fingerprint-box::after {
right: -2px;
bottom: -2px;
border-right: 4px solid #34d9fd;
border-bottom: 4px solid #34d9fd;
}
.svg-box::before {
top: -2px;
right: -2px;
border-top: 4px solid #34d9fd;
border-right: 4px solid #34d9fd;
}
.svg-box::after {
left: -2px;
bottom: -2px;
border-left: 4px solid #34d9fd;
border-bottom: 4px solid #34d9fd;
}
.scanner {
top: 0%;
width: 100%;
position: absolute;
animation: scanning 4s linear infinite alternate;
background: linear-gradient(0deg, #34d9fd6e 0%, transparent 60%);
}
.svg-box svg {
filter: drop-shadow(0px 0px 20px #07ffff);
}
.svg-box path {
stroke-dasharray: 100;
animation: printsAnimations 4s infinite;
}
@keyframes printsAnimations {
0%,
100% {
stroke-dasharray: 100;
stroke-dashoffset: 50;
}
50% {
stroke-dasharray: 55;
stroke-dashoffset: 100;
}
}
@keyframes scanning {
0%,
100% {
height: 0%;
}
50% {
height: 100%;
}
}- The
@keyframes printsAnimationscreates a looping pulse on the fingerprint path to simulate activity. - The scanner moves up and down with a translucent gradient, creating a beautiful scan-line effect like in real biometric devices.
Final Thoughts
If you’re designing an interactive, stylish login form, this Fingerprint Scanner Animation is a great addition. Its glowing lines, animated scan light and SVG fingerprint path give it a premium, real-world biometric look.
You can also combine this with modal popups, unlock animations or JavaScript logic to make it more dynamic in real-world projects.
