Last active
March 20, 2022 11:40
-
-
Save theWhiteFox/dc22f505a62d075d4c8207046df15d3d to your computer and use it in GitHub Desktop.
Animated signature
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Animated signing of signature (SVG paths) | |
----------------------------------------- | |
animate writing a signature with SVG stroke-dashoffset/stroke-dasharray and CSS transitions | |
A [Pen](https://codepen.io/ghepting/pen/xnezB) by [Gary Hepting](http://codepen.io/ghepting) on [CodePen](http://codepen.io/). | |
[License](https://codepen.io/ghepting/pen/xnezB/license). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container | |
.signature | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="34.924 351.353 548.489 159.86"> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/> | |
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/> | |
</svg> | |
button Play it again |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.signature = | |
initialize: -> | |
$('.signature svg').each -> | |
paths = $('path, circle, rect', this) | |
delay = 0 | |
for path in paths | |
length = path.getTotalLength() | |
previousStrokeLength = speed || 0 | |
speed = if length < 100 then 20 else Math.floor(length) | |
delay += previousStrokeLength + 100 | |
$(path).css('transition', 'none') | |
.attr('data-length', length) | |
.attr('data-speed', speed) | |
.attr('data-delay', delay) | |
.attr('stroke-dashoffset', length) | |
.attr('stroke-dasharray', length + ',' + length) | |
animate: -> | |
$('.signature svg').each -> | |
paths = $('path, circle, rect', this) | |
for path in paths | |
length = $(path).attr('data-length') | |
speed = $(path).attr('data-speed') | |
delay = $(path).attr('data-delay') | |
$(path).css('transition', 'stroke-dashoffset ' + speed + 'ms ' + delay + 'ms linear') | |
.attr('stroke-dashoffset', '0') | |
$(document).ready -> | |
window.signature.initialize() | |
$('button').on 'click', -> | |
window.signature.initialize() | |
setTimeout( -> | |
window.signature.animate() | |
, 500) | |
$(window).load -> | |
window.signature.animate() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import compass | |
.container | |
max-width: 400px | |
margin: 0 auto | |
.signature | |
position: relative | |
overflow: auto | |
width: 100% | |
height: 0 | |
padding-bottom: 55.30973451% | |
svg | |
position: absolute | |
top: 0 | |
left: 0 | |
width: 100% | |
height: 100% |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment