Enhance User Experience: Build this Fingerprint Animation using CSS
In the world of web design, adding unique and engaging elements to your website can make all the difference. One such element is a fingerprint animation. It not only adds an interesting visual component but also symbolizes security and identity.
Must Read: Professional Loading animation using HTML, CSS and JavaScript
In this tutorial, we'll walk you through the process of creating a captivating fingerprint animation using SVG (Scalable Vector Graphics) and CSS (Cascading Style Sheets). Whether you want to add a personal touch to your portfolio or enhance your website's security page, this animation is sure to leave a lasting impression on your visitors.
Before we dive into the code, let's understand the key components of this animation:
- SVG Fingerprint: We'll use SVG to draw the fingerprint shape. SVG is a powerful tool for creating vector graphics that can be easily manipulated with CSS.
- CSS Styling: We'll leverage CSS to add color, animations, and effects to our fingerprint, giving it a lifelike appearance.
- Scanner Animation: To make the animation more interactive, we'll create a scanning effect that mimics a fingerprint being authenticated.
Our HTML structure is simple and consists of a container for the fingerprint animation:
<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>
Creating the SVG Fingerprint
- Inside the svg-box, we embed an SVG containing the fingerprint path. The SVG is set to maintain a 1:1 aspect ratio, ensuring it remains visually consistent.
Adding CSS Styles
- We'll apply CSS styles to both the fingerprint and the scanner. CSS allows us to define the appearance and behavior of our elements. You can customize the colors, animations, and timing to match your website's design.
Animating the Scanner
- To add an interactive touch, we include a scanner animation. The scanner moves over the fingerprint, creating the illusion of authentication or verification.
Below is the code snippet for the CSS code.
.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%;
}
}Main Container and Fingerprint Box
- ".main-container" styles the main container that holds the fingerprint animation.
- It takes up the full viewport height (100vh) and horizontally and vertically centers its contents using Flexbox.
- The fingerprint-box represents the container for the fingerprint graphic.
- It's given a fixed width and height of 200px and is centered within its parent.
- A subtle border with a light blue color (#34d9fd61) is applied.
Pseudo-elements for Borders
- .fingerprint-box::before and .fingerprint-box::after create diagonal borders on the top-left and bottom-right corners.
- .svg-box::before and .svg-box::after create diagonal borders on the top-right and bottom-left corners.
- These borders add a decorative touch to the box.
Scanner Animation and SVG Styling
- The scanner class represents the scanning animation. It spans the entire width of the container and animates vertically to create a scanning effect. A linear gradient background creates a semi-transparent blue scanner line.
- The svg-box class applies a drop shadow to the SVG, giving it a subtle 3D effect. The svg-box path applies a stroke-dash animation to the path elements within the SVG. This animation creates a dashed line effect that appears to move along the path.
Keyframes for Animations
- @keyframes printsAnimations defines the animation for the stroke-dash animation on the SVG path.
- @keyframes scanning defines the animation for the scanner line.
- These animations control the movement and appearance of the fingerprint and scanning elements.
Must Read: Interactive Quiz Web App using HTML CSS JavaScript Project | With Levels
By combining SVG and CSS, you can create visually appealing animations that enhance your website's user experience. This fingerprint animation is just one example of the creative possibilities that these technologies offer. Feel free to modify and adapt it to suit your specific needs.
We hope you found this post inspiring and insightful. If you have any questions or ideas, feel free to share them in the comments below. Until next time, happy coding!
