Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <button class='button' type='button'>
press to scan fingerprint
<svg xmlns="http://www.w3.org/2000/svg" id="OBJECTS" viewBox="0 0 103.051 102">
   <defs>
       <pattern id="gif" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://media.giphy.com/media/dAWZiSMbMvObDWP3aA/giphy.gif" />
    </pattern>
  </defs>
  <g class="prints" stroke="#fff">
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.1 52.786s4.367-1.106 4.725-10.829 4.841-22.651 9.107-25.389"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M28.984 14.686S40.423-.54 66.58 4.026"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.173 11.689a43.984 43.984 0 00-19.836-3.077c-9.059.522-17.207 3.674-24.463 12.261-8.447 9.995-8.456 22.215-7.789 31.5.457 6.372-7.166 9.01-9.363 9.326"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M82.387 84.332a4.85 4.85 0 01-1.987-3.344c-.423-2.428 1.032-9.714 2.486-13.691s3.346-12.64 3.427-16.456a32.465 32.465 0 00-.624-6.964"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.383 18.957S86.59 26.26 88.491 39"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M72.031 17s-19.474-9.522-35.118 4.62"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M34.832 24.532s-2.749 3.991-2.5 4.091"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 32.956s-2.172 9.127-2.224 13.506a87 87 0 01-.422 10.347c-.352 1.971-2.323 7.827-11.826 11.129"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M16.845 74.418s6.676-3.673 8.717-5.643"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 62.637a10.878 10.878 0 003.454-6.445c.751-4.334-.281-8.932 0-12.217s1.231-15.111 11.08-20.836 21.055-3.191 25.636 0 10.717 8.937 11.236 18.045a58 58 0 01-2.214 17.947"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19.692 81.044s12.7-9.13 16.077-15.873 4.692-9.9 4.223-14.33-.351-12.689 2.722-17.885a17.446 17.446 0 0110.815-7.673"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.243 24.847a11.342 11.342 0 015.484.855"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M67.241 27.317s6.887 3.331 7.932 10.463 1.046 13.234-.643 18.02-6.224 20.672-7.289 23.851S63.976 97.159 68.83 99.1"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M78.178 65.209s-4.211 14.242-4.68 18.56-1.06 7.231 1.675 9.854"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M60.167 102.915s-2.767-3.358-2.884-10.887a31.772 31.772 0 013.732-14.923c.845-1.689 6.57-15.079 7.884-20.913s1.838-14.646.45-19.2-5.143-7-12.182-6.34S48.392 34.4 47.148 37.5s.165 9.87-.492 15.955S43 68.1 34.832 75.885 22.953 86.63 22.953 86.63"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M26.36 91.114s9.2-8.1 14.1-12.883 11.32-15.674 11.949-22.337-.887-11.87.117-14.71 3.046-5.468 6.049-5 5.529 1.5 5.768 7.977-3.516 17.926-3.516 17.926c-1.22 2.441-9.722 22.525-10.164 26.373"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M51.884 104.791s-2.1-6.2-1.974-9.762"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M40.274 100.944a20.083 20.083 0 010-8.916c1.1-4.97 4.412-8.916 6.335-11.638s7.537-10.418 9.658-19.522"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.34 43.109s.524 7.441-.891 13.068"/>
  </g>
  <g class="draw" stroke="url(#gif)">
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.1 52.786s4.367-1.106 4.725-10.829 4.841-22.651 9.107-25.389"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M28.984 14.686S40.423-.54 66.58 4.026"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.173 11.689a43.984 43.984 0 00-19.836-3.077c-9.059.522-17.207 3.674-24.463 12.261-8.447 9.995-8.456 22.215-7.789 31.5.457 6.372-7.166 9.01-9.363 9.326"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M82.387 84.332a4.85 4.85 0 01-1.987-3.344c-.423-2.428 1.032-9.714 2.486-13.691s3.346-12.64 3.427-16.456a32.465 32.465 0 00-.624-6.964"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.383 18.957S86.59 26.26 88.491 39"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M72.031 17s-19.474-9.522-35.118 4.62"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M34.832 24.532s-2.749 3.991-2.5 4.091"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 32.956s-2.172 9.127-2.224 13.506a87 87 0 01-.422 10.347c-.352 1.971-2.323 7.827-11.826 11.129"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M16.845 74.418s6.676-3.673 8.717-5.643"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 62.637a10.878 10.878 0 003.454-6.445c.751-4.334-.281-8.932 0-12.217s1.231-15.111 11.08-20.836 21.055-3.191 25.636 0 10.717 8.937 11.236 18.045a58 58 0 01-2.214 17.947"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19.692 81.044s12.7-9.13 16.077-15.873 4.692-9.9 4.223-14.33-.351-12.689 2.722-17.885a17.446 17.446 0 0110.815-7.673"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.243 24.847a11.342 11.342 0 015.484.855"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M67.241 27.317s6.887 3.331 7.932 10.463 1.046 13.234-.643 18.02-6.224 20.672-7.289 23.851S63.976 97.159 68.83 99.1"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M78.178 65.209s-4.211 14.242-4.68 18.56-1.06 7.231 1.675 9.854"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M60.167 102.915s-2.767-3.358-2.884-10.887a31.772 31.772 0 013.732-14.923c.845-1.689 6.57-15.079 7.884-20.913s1.838-14.646.45-19.2-5.143-7-12.182-6.34S48.392 34.4 47.148 37.5s.165 9.87-.492 15.955S43 68.1 34.832 75.885 22.953 86.63 22.953 86.63"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M26.36 91.114s9.2-8.1 14.1-12.883 11.32-15.674 11.949-22.337-.887-11.87.117-14.71 3.046-5.468 6.049-5 5.529 1.5 5.768 7.977-3.516 17.926-3.516 17.926c-1.22 2.441-9.722 22.525-10.164 26.373"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M51.884 104.791s-2.1-6.2-1.974-9.762"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M40.274 100.944a20.083 20.083 0 010-8.916c1.1-4.97 4.412-8.916 6.335-11.638s7.537-10.418 9.658-19.522"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.34 43.109s.524 7.441-.891 13.068"/>
  </g>
</svg>
</button>
              
            
!

CSS

              
                body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f1f3f6;
}

.container {
  width: 100%;
  height: 97vh;
}

svg {
  width: 80%;
  filter: drop-shadow( -1px -1px 1px rgb(55, 84, 170, 0.2));
}

.draw {
  opacity: 0;
  transition: opacity ease-in-out 1s;
}

.prints {
  opacity: 0;
}

.button {
  position: relative;
  width: 120px;
  height: 120px;
  background: #f1f3f6;
  border-radius: 50%;
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170, 0), 
    inset 0 0 20px rgba(255, 255, 255, 0), 
    10px 10px 18px rgba(55, 84, 170, 0.15), 
    -10px -10px 22px white, 
    inset 0px 0px 4px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.7s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  font-size: 0;
}

.button:hover, .button:focus {
  box-shadow: inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.button:hover .draw {
  opacity: 0.4;
}
.button:hover .prints{
  opacity: 1;
  transition: opacity ease-in-out 0.8s;
}

.button:before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: #f1f3f6;
  border-radius: 50%;
  position: absolute;
  top: 110%;
  box-shadow: inset 2px 2px 5px rgba(55, 84, 170, 0.15), inset -2px -2px 5px white, 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.button:after {
  --color: #ff99ac;
  content: '';
  width: 3px;
  height: 3px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: calc(110% + 6px);
  z-index: 9999;
  box-shadow: inset 0px 0px 1px var(--color), 
    0px 0px 2px var(--color), 
    0px 0px 3px var(--color), 
    0px 0px 4px var(--color),
    0px 0px 5px var(--color),
    0px 0px 6px var(--color),
    0px 0px 7px var(--color),
    0px 0px 20px var(--color),
    0px 0px 15px var(--color);
  animation: flash 0.6s infinite alternate forwards;
  transition: box-shadow 0.7s ease-in-out 0.5s;
}

.button:hover:after {
  --color: aqua;
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
              
            
!

JS

              
                gsap.registerPlugin(DrawSVGPlugin);

const tl = gsap.timeline({paused: true});

tl.from('.prints > *',{
  duration: 1,
  drawSVG: "0%",
  ease: 'none',
  stagger: 0.1,
})
tl.from('.draw > *',{
  duration: 1,
  drawSVG: "0%",
  ease: 'none',
  stagger: 0.1,
}, '<1')

const button = document.querySelector('.button');

button.addEventListener("mouseenter",  (e) => {
  tl.restart()
});
              
            
!
999px

Console