Last active
January 9, 2016 01:18
-
-
Save kirjavascript/83f8ef6c86ef32deaba8 to your computer and use it in GitHub Desktop.
signature scrawler
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
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <head><title>thom</title></head> | |
| <style> | |
| svg{position:absolute;top:0;left:0;right:0;bottom:0;background:whitesmoke} | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script> | |
| window.addEventListener("load",() => { | |
| var c = { | |
| w: self.innerWidth, | |
| h: self.innerHeight | |
| } | |
| var s = d3.select("svg") | |
| .attr("width",c.w).attr("height",c.h) | |
| var lineLength = function() {return this.getTotalLength()}; | |
| s.selectAll(".scrawl") | |
| .attr({ | |
| "stroke-dasharray":lineLength, | |
| "stroke-dashoffset":lineLength | |
| }) | |
| .each(function(e,i){ | |
| d3.select(this) | |
| .transition() | |
| .delay([0,167,490.75,641.5,1086][i]) | |
| .duration([286,500,301,539,290][i]) | |
| .attr("stroke-dashoffset",0) | |
| }) | |
| }) | |
| </script> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="1064" height="580"> | |
| <defs> | |
| <clipPath id="name1"> | |
| <path d="M220.98 187.404l-.68-8.152c-.372-4.483-.907-14.27-1.187-21.746-.28-7.478-1.13-21.92-1.887-32.096-.758-10.175-1.44-20.975-1.512-24-.237-9.79-4.08-43.154-6.08-52.79-1.606-7.734-.61-11.335 4.613-16.71 5.486-5.645 11.38-8.45 17.817-8.478 6.313-.028 15.582 5.358 19.27 11.198 5.187 8.22 5.3 9.236 5.864 52.622 3.186 100.776 2.633 85.75 5.167 131.465.406 14.687 2.582 45.053 3.92 54.693.19 1.375.81 7.45 1.378 13.5.568 6.05 1.467 13.25 1.997 16 1.02 5.286 3.655 24.084 5.087 36.27 1.124 9.563 7.582 42.502 9.456 48.23.81 2.475 3.414 10.542 5.786 17.925 4.31 13.423 6.693 17.274 8.705 14.075 2.273-3.614 8.28-27.156 9.95-39 1.668-11.836 4.086-27.375 5.68-36.5 1.882-10.772 3.076-19.72 4.336-32.5 3.132-31.735 12.622-67.5 21.663-81.633 8.223-12.856 23.534-14.196 38.933-3.408 6.54 4.58 10.554 9.38 14.666 17.54 1.663 3.3 4.948 9.183 7.3 13.074 2.354 3.89 6.1 11.352 8.326 16.582 2.226 5.23 5.81 13.072 7.966 17.427 2.155 4.355 4.498 9.717 5.208 11.917.71 2.2 3.018 7.577 5.13 11.947 2.114 4.37 3.842 8.582 3.842 9.358 0 .775 1.344 4.225 2.987 7.667s4.592 10.412 6.553 15.49c1.96 5.077 3.98 9.976 4.485 10.885 1.506 2.71 10.976 24.045 10.976 24.73 0 .348 1.17 2.948 2.602 5.778 1.43 2.83 3.865 8.552 5.41 12.716 1.543 4.165 4.236 10.69 5.984 14.5 1.748 3.812 4.713 11.295 6.588 16.63 1.875 5.333 6.72 18.158 10.763 28.5 6.626 16.938 9.942 26.685 15.192 44.645 1.894 6.48 1.597 11.178-1.25 19.76l-1.788 5.395-7.5 2.19c-9.674 2.823-10.254 2.81-13.984-.33-6.144-5.17-13.78-18.696-20.54-36.384-1.992-5.212-4.49-11.305-5.55-13.54-1.058-2.237-1.926-4.522-1.926-5.078s-2.416-7.074-5.37-14.485c-2.952-7.41-5.706-14.577-6.12-15.924-.412-1.348-1.987-5.15-3.5-8.45-1.512-3.3-4.43-10.05-6.48-15-5.97-14.4-8.333-19.876-18.768-43.5-6.685-15.133-15.61-35.97-21.2-49.5-2.047-4.95-5.002-11.7-6.568-15-1.567-3.3-3.767-8.343-4.89-11.207-2.732-6.97-10.047-21.178-15.34-29.793-5.3-8.627-6.984-8.93-11.073-2-6.672 11.31-9.64 25.407-10.206 48.5-.21 8.525-.866 20.675-1.458 27-1.676 17.893-4.206 47.816-4.65 55-.222 3.575-1.063 9.65-1.87 13.5-.806 3.85-2.396 12.175-3.532 18.5-3.6 20.04-7.182 28.194-16.1 36.645-3.842 3.64-5.374 4.343-12.566 5.77-13.282 2.63-20.726-.31-27.813-10.986-8.526-12.847-15.63-29.76-20.967-49.93-1.455-5.5-3.745-13.665-5.087-18.146-1.343-4.48-2.45-9.205-2.46-10.5-.01-1.294-.706-5.504-1.55-9.354-1.77-8.08-2.842-13.63-4.927-25.5-.822-4.675-2.16-12.05-2.973-16.39-.813-4.34-1.312-8.164-1.11-8.5.204-.335-.053-3.085-.57-6.11-.518-3.025-1.35-9.1-1.848-13.5-.5-4.4-1.412-11.6-2.027-16-.616-4.4-1.248-10.025-1.405-12.5-.156-2.475-1.1-11.568-2.097-20.207-4.51-59.222-1.83-21.002-5.19-72.8zm-49.87 102.722c.76 5.974 4.042 20.294 8.722 38.053 6.41 24.33 7.843 30.053 10.447 41.73 1.348 6.05 3.165 13.925 4.035 17.5 2.773 11.387 3.4 14.365 4.316 20.5.494 3.3 1.337 7.35 1.876 9 .538 1.65 1.94 7.5 3.117 13 1.176 5.5 3.248 14.358 4.605 19.685 1.356 5.326 2.466 10.76 2.466 12.075 0 1.314 1.125 5.698 2.5 9.74 1.375 4.043 2.508 8.284 2.518 9.426.01 1.14 1.395 6.574 3.08 12.074 1.683 5.5 3.73 12.7 4.546 16 .817 3.3 3.183 11.175 5.26 17.5 6.56 20 7.096 22.104 7.093 27.865-.01 7.378-2.546 11.607-8.58 14.276-6.24 2.76-10.4 3.168-13.666 1.338-1.512-.848-2.75-1.892-2.75-2.32 0-.428-1.324-2.133-2.943-3.79-3.29-3.364-8.735-14.662-13.074-27.122-1.58-4.54-3.566-9.49-4.41-11-4.21-7.512-11.998-36.128-23.072-84.746-2.004-8.8-4.312-18.925-5.13-22.5-.817-3.575-2.135-8.79-2.928-11.587-.793-2.8-1.442-6.044-1.442-7.213 0-1.17-.864-4.504-1.92-7.412-1.055-2.908-2.198-6.863-2.54-8.788-20.42-91.275-17.5-80.944-30.686-130.003-1.068-4.123-2.35-9.747-2.852-12.497-1.05-5.772-3.657-18.18-5.042-24-.523-2.2-2.584-10.75-4.578-19-3.175-13.13-4.36-18.687-6.832-32-.307-1.65-.983-4.8-1.503-7-1.15-4.874-3.727-19.35-4.536-25.5-.326-2.475-1.216-8.55-1.977-13.5-2.003-13.025-3.37-23.94-4.067-32.5-.336-4.125-1.462-12.514-2.503-18.642-1.04-6.128-2.428-19.23-3.083-29.112-1.178-17.774-1.167-18.02 1.05-22.6 3.342-6.904 9.89-10.67 18.47-10.624 8.07.044 21.574 8.936 22.798 15.014 2.36 11.723 2.783 17.232 3.298 42.964.865 43.253 2.524 60.085 9.462 96 2.153 11.147 9.184 41.697 11.047 48 1.056 3.575 2.446 9.425 3.088 13 13.6 57.5-.8-2.492 16.322 68.716zm337.652 124.108c-3.537-.97-9.72-3.39-13.74-5.376-12.36-6.107-21.576-18.432-26.134-34.948-1.27-4.6-1.644-10.198-1.603-24 .048-16.227.325-19.083 2.814-29 5.974-23.802 14.732-48.853 21.142-60.478.764-1.387 2.563-5.403 3.998-8.924 1.434-3.52 3.33-7.57 4.21-9 2.936-4.766 12.514-19.544 15.397-23.76 1.566-2.29 2.847-4.663 2.847-5.273 0-1.51-2.73-2.53-15-5.59-6.596-1.648-11.36-3.427-12.817-4.786-1.274-1.19-3.895-5.49-5.824-9.555l-3.507-7.39 3.035-6.167c2.34-4.75 3.995-6.704 7.214-8.513 4.11-2.31 4.428-2.334 20.288-1.456 29.897 1.653 87.237-.65 113.612-4.562 3.575-.53 11.225-1.46 17-2.067 12.015-1.26 20.015-2.845 38.843-7.693 16.603-4.275 27.02-8.274 46.41-17.813 8.847-4.353 16.453-7.47 18.218-7.463 4.344.017 12.576 2.697 14.977 4.877 1.13 1.025 3.06 2.383 4.292 3.018 2.874 1.482 4.737 5.166 6.2 12.26 1.163 5.648.344 11-3.045 19.887-.536 1.403-2.274 7.928-3.862 14.5-1.59 6.57-3.65 14.873-4.578 18.448-1.89 7.272-2.677 35.26-1.008 35.817.522.174 2.413-4.056 4.204-9.4 1.79-5.344 5.05-14.036 7.243-19.316 2.192-5.28 5.11-12.533 6.484-16.118 4.78-12.475 15.92-32.35 21.477-38.32 4.3-4.618 7.794-5.918 15.662-5.826 8.303.097 11.163 1.01 16.44 5.25 7.36 5.916 10 15.69 13.887 51.414 1.017 9.36 6.215 26.915 8.726 29.473 3.02 3.077 10.307-3.074 38.472-32.474 14.566-15.204 21.473-21.18 28.994-25.09 4.766-2.476 6.545-2.834 13.962-2.81 12.777.04 22.942 3.7 29.614 10.666 2.758 2.88 6.2 6.86 7.646 8.846 4.787 6.57 13.408 26.88 15.87 37.388.92 3.924 4.016 14.1 7.908 26 1.08 3.3 1.963 6.728 1.962 7.618 0 5.22 12.11 34.597 15 36.383.524.324 2.51 2.93 4.416 5.794 1.905 2.864 5.117 7.006 7.14 9.206 16.062 17.48 19.977 24.08 18.987 32.004-.89 7.12-3.626 11.175-9.138 13.537-5.407 2.32-14.012 3.474-17.085 2.296-4.36-1.672-21.037-16.513-30.82-27.426-8.82-9.837-20.594-28.828-23.91-38.564-1.283-3.765-3.528-9.996-4.99-13.846-1.46-3.85-3.057-8.575-3.55-10.5-.49-1.925-1.987-6.65-3.324-10.5-1.336-3.85-3.92-11.5-5.74-17-3.21-9.704-7.435-19.168-10.155-22.754-2.575-3.395-8.898 1.347-31.582 23.686-26.494 26.092-27.89 26.938-46.04 27.903-10.597.563-13.036.392-17.67-1.236-13.493-4.744-20.805-13.365-30.985-36.536-2.29-5.21-2.788-5.758-4.072-4.474-1.66 1.66-8.822 20.834-10.382 27.8-.568 2.536-2.202 10.01-3.632 16.61-2.523 11.648-6.388 27.37-12.294 50-1.58 6.05-3.38 13.7-4.002 17-.623 3.3-1.617 8.557-2.21 11.68-1.114 5.886-5.138 12.154-9.98 15.545-2.186 1.532-12.915 3.43-20.028 3.543-3.225.05-10.55-5.21-13.69-9.832-5.435-7.996-10.062-26.882-11.255-45.936-2.07-33.05-1.82-105.543.42-121.43 1-7.093 1.257-11.784.676-12.364-.58-.58-2.58-.346-5.27.62-21.11 7.574-45.473 12.67-75.336 15.752-4.95.51-9.9 1.167-11 1.457-1.1.29-5.782.943-10.404 1.45-13.538 1.488-13.38 1.818 5.582 11.694 22.768 11.856 25.345 13.615 35.846 24.464 15.17 15.673 18.517 20.585 22.802 33.465 2.932 8.814 3.67 12.544 3.65 18.467-.05 15.43-5.243 29.06-16.92 44.423-1.673 2.2-5.04 6.96-7.484 10.575-5.093 7.54-12.92 15.102-27.12 26.206-10.845 8.48-30.818 20.733-38.877 23.85-2.792 1.08-6.987 2.845-9.324 3.92-8.122 3.744-24.805 8.958-33.566 10.49-13.262 2.323-32.697 2.458-40.618.284zm27.834-35.87c25.594-3.21 62.402-22.73 83.29-44.17 11.82-12.13 16.682-18.338 21.283-27.166 3.806-7.304 4.452-12.884 2.48-21.437-2.11-9.15-20.962-28.5-35.32-36.26-3.483-1.88-9.393-5.184-13.135-7.34-6.632-3.822-14.583-7.32-25.263-11.114l-5.263-1.87-5.436 2.666c-3.825 1.875-7.117 4.677-11.108 9.452-6.457 7.724-14.85 20.293-18.728 28.047-1.448 2.894-3.75 7.17-5.116 9.5-2.363 4.033-3.98 8.22-10.728 27.74-6.1 17.645-9.09 39.627-6.88 50.547 2.066 10.216 8.09 18.29 15.658 20.99 4.768 1.698 4.178 1.68 14.264.417z" fill="#4b78a7" /> | |
| </clipPath> | |
| <clipPath id="name2"> | |
| <path d="M137.064 315.488c-7.653 5.856.01.02-7.68 5.873-4.078 3.104-9.155 8.638-12.167 11.268-3.012 2.63-7.512 7.054-10 9.832-2.488 2.777-6.542 6.862-9.01 9.078-2.467 2.216-5.617 5.328-7 6.916-1.382 1.587-4.54 5.057-7.014 7.71-5.41 5.8-8.45 9.608-13.496 16.903-2.092 3.025-5.257 7.13-7.034 9.12-1.776 1.992-5.113 6.846-7.415 10.787-2.814 4.82-6.05 8.654-9.87 11.703l-5.685 4.535-10.69-.395c-9.795-.36-11.034-.633-14.804-3.245-5.685-3.94-8.365-9.995-8.413-19.01-.02-3.854.594-8.58 1.368-10.5 2.51-6.24 10.112-16.688 20.367-27.995 1.247-1.375 4.236-5.2 6.643-8.5 2.406-3.3 8.06-9.825 12.562-14.5 4.504-4.675 8.66-9.382 9.235-10.46.576-1.08 3.545-4.005 6.598-6.5 3.053-2.497 13.462-11.965 23.133-21.04 9.67-9.075 19.026-17.53 20.79-18.788 5.706-4.07 14.825-12.644 16.184-15.216 21.605-18.69 7.87-6.906 37.108-30.997.845 0 5.18-2.812 9.633-6.25 20.926-16.153 24.917-19.115 33.914-25.173 5.296-3.565 11.323-8.08 13.393-10.033l3.765-3.55c38.085-25.298 17.886-11.51 57.713-40.327 2.475-1.865 6.353-4.33 8.617-5.48 2.264-1.15 5.414-3.165 7-4.48 1.586-1.313 8.508-5.894 15.383-10.18 6.875-4.285 14.298-8.968 16.495-10.408 2.197-1.44 7.21-4.418 11.14-6.618 9.12-5.105 14.223-8.297 27.525-17.215 5.92-3.97 13.536-8.616 16.925-10.328 3.39-1.71 8.696-4.83 11.79-6.93 6.307-4.28 28.966-17.43 36.625-21.253 2.75-1.372 7.925-3.486 11.5-4.696 3.575-1.21 8.274-3.36 10.442-4.78 4.163-2.723 12.227-5.265 16.77-5.285 5.965-.027 8.89 8.195 4.92 13.833-1.028 1.46-2.18 3.654-2.56 4.875-1.59 5.13-19.68 22.768-27.382 26.702-1.82.93-5.024 3.24-7.12 5.133-2.095 1.893-5.8 4.322-8.233 5.398-2.433 1.078-6.955 4.173-10.048 6.88s-11.398 8.735-18.456 13.396c-20.198 13.34-23.292 15.406-32.333 21.607-14.75 10.117-42.076 28.544-46.954 31.664-2.58 1.65-6.825 4.575-9.435 6.5-14.6 10.773-18.112 13.215-21.442 14.915-2.018 1.03-4.57 2.89-5.67 4.13-55.803 42.376-8.032 5.29-64.822 50.126-3.015 1.61-17.1 12.152-17.522 13.115-.19.432-4.737 4.11-10.105 8.176-5.367 4.064-12.326 10.236-15.465 13.714-33.388 30.45 10.146-9.005-39.714 36.244z" fill="#4b78a7"/> | |
| </clipPath> | |
| </defs> | |
| <path class="scrawl" clip-path="url(#name1)" d="M106.35 18.006c4.878 121.96 21.866 173.668 36.1 246.848 14.234 73.18 32.16 141.253 46.833 192.21 14.673 50.956 38.05 114.155 38.05 114.155" fill="none" stroke="#000" stroke-width="51" stroke-linecap="round" /> | |
| <path class="scrawl" clip-path="url(#name1)" d="M231.76 41.394s1.474 78.83 8.258 145.405c6.784 66.575 18.44 178.293 22.253 196.386 3.814 18.092 20.34 81.38 35.718 79.634 15.377-1.747 9.06-7.22 17.09-34.01 8.028-26.79 9.35-109.312 17.63-136.637 8.28-27.324 18.103-80.31 40.428-42.456 22.324 37.852 22.268 41.215 63.145 135.586 40.88 94.37 53.73 138.66 53.73 138.66" fill="none" stroke="#000" stroke-width="51" stroke-linecap="round" /> | |
| <path class="scrawl" lip-path="url(#name1)" d="M539.208 223.54s-32.375 40.44-40.693 64.67c-8.317 24.233-15.086 52.226-10.732 71.226 4.353 19 6.756 29.773 25.368 37.076 18.612 7.303 49.636-4.98 73.177-16.586 23.54-11.607 45.628-27.46 58.245-43.718 12.617-16.258 19.074-28.766 18.597-44.665-.478-15.9-21.836-40.076-43.937-50.52-22.102-10.443-26.354-10.36-58.61-23.692-32.257-13.33-67.055-30.865-67.055-30.865" fill="none" stroke="#000" stroke-width="45.2" stroke-linecap="round" /> | |
| <path class="scrawl" clip-path="url(#name1)" d="M497.772 185.715s92.492-.04 128.67-1.38c69.436-6.9 49.01-7.136 119.354-32.08 6.456-3.73-29.223 73.074-8.97 172.132 20.255 99.058 9.026 10.202 32.082-58.987 23.055-69.19 10.72-47.32 36.91-85.204 26.19-37.884 1.223 67.126 35.875 76.925 34.653 9.8 81.88-75.735 103.487-53.812 21.607 21.922 26.14 47.994 36.566 84.86 10.426 36.863 45.88 65.54 45.88 65.54" fill="none" stroke="#000" stroke-width="52.3" stroke-linecap="round" /> | |
| <path class="scrawl" clip-path="url(#name2)" d="M15.61 418.036s16.37-28.425 43.793-59.112c27.422-30.687 77.99-75.893 127.928-116.51 49.94-40.62 126.178-95.563 171.722-126.84 45.543-31.276 99.52-63.42 99.52-63.42" fill="none" stroke="#000" stroke-width="53.2" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1"/> | |
| </svg> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment