Created this text animation for a personal new years project. (Also worth a check! (: Canvas (particles) animations)
Uses svg clipPath in combination with a stroke & stroke-dashoffset.
A Pen by SnailCrusher on CodePen.
Created
December 31, 2016 15:37
-
-
Save saikatharryc/6cf2c70c8bf1f472687b9cd8d4952f8e to your computer and use it in GitHub Desktop.
Happy New Year! -- CSS Only
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
| <body> | |
| <div id="new-year"><svg id="new-year-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200" > | |
| <defs> | |
| <path id="happy-path" d="M190.479,20.124h6.193v7.014h6.768v-7.014h6.221v20.043h-6.221V32.06h-6.768v8.107h-6.193V20.124zM231.698,36.858h-7.031l-0.977,3.309h-6.324l7.533-20.043h6.756l7.531,20.043h-6.485L231.698,36.858zM230.413,32.524l-2.212-7.205l-2.189,7.205H230.413zM246.728,20.124h10.295c2.242,0,3.921,0.533,5.038,1.6c1.116,1.066,1.675,2.584,1.675,4.553c0,2.023-0.608,3.605-1.825,4.744c-1.217,1.14-3.074,1.709-5.571,1.709h-3.391v7.438h-6.221V20.124zM252.948,28.669h1.518c1.194,0,2.032-0.207,2.516-0.622c0.483-0.415,0.725-0.945,0.725-1.593c0-0.629-0.21-1.162-0.629-1.6c-0.419-0.438-1.208-0.656-2.365-0.656h-1.764V28.669zM272.548,20.124h10.295c2.242,0,3.921,0.533,5.038,1.6c1.116,1.066,1.675,2.584,1.675,4.553c0,2.023-0.608,3.605-1.825,4.744c-1.217,1.14-3.074,1.709-5.571,1.709h-3.391v7.438h-6.221V20.124zM278.769,28.669h1.518c1.194,0,2.032-0.207,2.516-0.622c0.483-0.415,0.725-0.945,0.725-1.593c0-0.629-0.21-1.162-0.629-1.6c-0.419-0.438-1.208-0.656-2.365-0.656h-1.764V28.669zM296.373,20.124h6.879l4.038,6.762l4.046-6.762h6.843l-7.793,11.648v8.395h-6.207v-8.395L296.373,20.124z"/> | |
| <path id="ear-path" d="M406.717,124.56c-1.023,1.445-2.131,3.061-4.259,2.772c-2.259-0.306-2.811-2.237-3.431-4.025c-0.09-0.259-0.105-0.545-0.15-0.819c-1.198-7.405-0.307-14.724,1.18-21.96c0.799-3.895,2.174-7.672,3.292-11.508c-3.756-1.819-5.97-1.39-8.683,2.002c-1.294,1.616-2.771,1.333-4.323,0.876c-1.474-0.433-2.901-0.685-3.395-2.762c-0.613-2.582-1.802-5.054-2.979-7.458c-0.29-0.592-1.583-1.118-2.265-0.972c-0.666,0.143-1.388,1.093-1.657,1.842c-0.966,2.682,0.569,6.094,3.312,8.143c0.597,0.446,1.206,1.379,1.187,2.07c-0.252,8.868-1.593,17.586-4.166,26.074c-0.714,2.359-1.863,4.654-3.183,6.745c-1.709,2.709-3.949,2.404-5.259-0.554c-0.473-1.068-0.806-2.224-1.03-3.372c-1.571-8.042-0.969-16.072,0.276-24.081c0.541-3.475,1.262-6.922,2.03-11.08c-2.842,0.461-5.271,0.856-8.04,1.305c-2.777-2.893-5.969-3.495-10.297-1.569c-3.491,1.554-5.731,4.333-7.347,7.667c-3.203,6.611-4.091,13.695-3.843,20.916c0.114,3.297-0.852,6.144-2.391,8.896c-1.642,2.934-4.114,4.489-7.558,4.103c-3.216-0.362-5.17-2.456-6.106-5.293c-0.84-2.544-1.691-7.769-1.691-10.524l0.084-2.648c0.247-5.555,1.097-10.806,3.217-15.757c0.632-1.479,1.789-3.119,3.12-4.198l-2.099-2.424c-5.873,2.566-8.426,7.539-10.233,12.924c-0.868,2.546-2.155,7.69-2.04,10.239l0.069,2.272c-0.083,3.547,0.183,6.039,1.506,10.314c1.837,5.941,6.042,9.225,11.444,9.458c5.932,0.258,9.823-2.789,12.34-7.917c0.259-0.528,0.543-1.044,0.944-1.81c0.315,1.01,0.517,1.725,0.759,2.425c0.908,2.628,2.006,5.249,5.117,5.746c3.177,0.507,5.182-1.707,6.457-4.084c2.088-3.894,3.695-8.044,5.508-12.085c0.164-0.368,0.358-0.723,0.74-1.487c0.055,1.197,0.045,1.896,0.125,2.585c0.502,4.368,1.067,8.74,3.901,12.351c2.864,3.646,7.474,3.907,10.706,0.594c0.956-0.98,1.946-2.116,2.394-3.369c1.42-3.972,2.914-7.966,3.791-12.077c1.398-6.56,2.325-13.221,3.421-19.648c2.08,0.713,4.336,1.487,6.505,2.23c-0.692,4.938-1.538,10.006-2.083,15.107c-0.541,5.071-0.499,10.156,1.406,15.017c1.645,4.198,5.27,5.917,9.611,4.661c4.363-1.262,7.274-3.958,8.469-15.164l-0.934,0.089C409.422,119.302,409.147,121.126,406.717,124.56zM360.222,112.837c-0.603,2.653-1.947,5.189-3.273,7.602c-0.5,0.912-1.993,1.929-2.876,1.802c-0.886-0.128-2.027-1.518-2.26-2.538c-0.585-2.551-0.721-5.207-1.161-8.857c0.768-3.898,1.515-8.763,2.736-13.507c0.877-3.414,2.829-6.417,6.002-8.203c1.146-0.644,2.727-0.679,4.103-0.657c0.426,0.007,1.276,1.201,1.183,1.714C363.292,97.761,361.926,105.338,360.222,112.837zM419.532,115.219c0-12.133,0.254-46.425,0.254-52.913c0-0.084,0.59-0.084,0.674-0.084c0.926,0,8.088,6.909,8.088,7.583c0,3.117-4.717,38.252-4.717,46.762c-0.676,0.337-1.602,0.59-2.359,0.59C420.376,117.157,419.532,116.651,419.532,115.219zM426.19,127.857c0,2.696-1.686,5.392-4.889,5.392c-3.874,0-5.392-2.274-5.392-4.802c0-2.949,2.107-6.066,5.308-6.066C424.505,122.381,426.19,125.161,426.19,127.857z"/> | |
| <path id="y-path" d="M284.696,170.172c2.44-0.078,5.23-0.183,7.442-1.135c5.449-2.347,8.231-7.203,9.789-12.566c1.444-4.97,2.521-10.111,3.114-15.251c0.979-8.493-0.432-26.082-0.432-26.082l-0.169-2.341c-0.758-7.796-2.058-16.429-3.284-24.289c-0.423,1.21-0.863,2.415-1.265,3.631c-3.14,9.52-6.693,18.855-12.234,27.295c-2.69,4.095-5.7,7.95-9.874,10.625c-1.839,1.18-3.917,2.179-6.024,2.716c-6.749,1.715-11.068-1.434-11.976-8.368c-0.948-7.247,0.464-14.272,1.939-21.281c2.25-10.681,4.739-21.332,4.853-32.316c0.03-2.888-0.238-5.858-0.924-8.654c-0.959-3.902-3.937-5.207-7.319-3.044c-2.317,1.482-4.464,3.613-5.961,5.924c-4.692,7.242-6.827,15.456-7.992,23.912c-0.405,2.947-0.479,5.969-0.369,8.944c0.051,1.351,0.957,2.659,1.401,4.012c0.203,0.618,0.225,1.296,0.329,1.946c-0.743-0.149-1.937-0.068-2.153-0.488c-0.971-1.891-2.089-3.862-2.39-5.916c-1.99-13.571,1.077-25.854,10.161-36.31c3.738-4.303,8.579-6.77,14.435-6.909c4.879-0.116,7.738,1.895,9.072,6.569c1.468,5.149,1.241,10.41,0.129,15.511c-2.142,9.832-4.768,19.556-7.025,29.364c-1.231,5.35-2.259,10.765-1.54,16.321c0.682,5.263,3.711,7.056,8.691,5.091c3.983-1.571,6.778-4.603,9.171-7.966c7.643-10.748,11.921-22.843,13.908-35.793c0.686-4.465,1.089-8.973,1.705-13.45c0.179-1.293,0.417-2.677,1.049-3.779c0.518-0.906,1.659-1.457,2.523-2.165c0.622,0.915,1.563,1.754,1.8,2.759c0.459,1.949,0.477,3.998,0.758,5.993c0.914,6.464,1.869,12.923,2.798,19.386c0.808,5.636,1.886,13.371,2.661,18.825l0.207,2.318c0.615,8.838,0.812,17.805-0.532,26.59c-1.421,9.283-3.696,18.275-9.8,25.778c-3.688,4.534-8.481,7.071-14.315,7.646c-0.942,0.093-1.849,0.114-2.717,0.068L284.696,170.172z"/> | |
| <path id="ye-path" d="M287.053,173.223c-9.205,0.907-15.088-5.002-14.533-14.351c0.552-9.3,4.909-16.955,10.026-24.326c5.606-8.077,11.912-15.37,20.146-20.848c0.546-0.364,1.748-0.901,1.748-0.901s2.031-0.758,3.403-1.14s3.649-0.766,3.649-0.766c2.687-0.505,4.427-0.816,6.499-0.763c4.118,0.106,8.034-0.783,8.034-0.783c7.391-1.539,12.221-11.504,10.252-18.448c-0.608-2.147-2.502-2.798-4.165-1.3l-2.166-2.49c0.937-0.433,1.947-0.767,2.958-0.963c6.018-1.17,9.421,1.746,9.254,7.875c-0.208,7.669-5.826,14.722-14.064,17.2c-1.001,0.392-2.153,0.775-2.153,0.775c-4.613,0.772-7.881,0.407-7.881,0.407c-1.97-0.115-3.266,0.084-4.157,0.253c-0.709,0.135-2.204,0.556-2.204,0.556s-2.451,0.32-3.512,0.604s-3.578,1.325-3.578,1.325s-0.708,0.441-0.97,0.644c-11.366,8.146-21.111,21.347-25.327,36.335c-1.351,4.803-1.338,9.774,1.059,14.431c1.16,2.254,2.768,3.705,5.324,3.624c0.765-0.024,1.564-0.052,2.369-0.106L287.053,173.223z"/> | |
| <path id="new-path" d="M145.333,130.093c0.669,2.194-0.211,3.95-1.429,5.516c-3.465,4.457-11.309,4.125-15.224-0.635c-3.273-3.979-3.988-8.816-4.199-13.712c-0.447-10.312,1.673-20.296,3.873-30.303c1.231-5.598,1.676-11.375,2.343-17.087c0.148-1.274-0.152-2.636-0.428-3.917c-1.012-4.687-4.817-6.663-9.331-4.913c-2.915,1.131-4.947,3.303-6.685,5.779c-4.012,5.715-6.208,12.231-8.139,18.843c-3.253,11.134-4.772,22.556-5.505,34.101c-0.136,2.152-0.415,4.3-0.468,6.453c-0.103,4.162-5.818,6.183-9.137,3.985c-0.551-0.364-0.867-1.559-0.792-2.321c0.845-8.646,1.977-17.269,2.658-25.927c0.945-12.016,1.403-24.073-1.532-35.909c-0.788-3.178-2.365-6.202-3.887-9.138c-0.665-1.283-1.972-2.357-3.213-3.19c-2.7-1.813-5.657-1.07-7.579,1.757c-2.339,3.439-2.859,7.406-2.666,11.378c0.476,9.799,2.659,19.115,8.699,27.164c0.155,0.207,0.229,0.475,0.402,0.844c-2.155,0.325-3.7-0.697-4.813-2.066c-8-9.839-11.293-20.962-8.326-33.478c0.997-4.201,3.208-7.913,7.676-9.486c4.889-1.722,11.163,0.542,14.563,5.145c4.531,6.134,6.871,13.156,7.948,20.583c0.682,4.7,0.846,9.475,1.194,13.636c1.454-4.187,2.812-9.073,4.846-13.662c1.842-4.158,4.242-8.107,6.732-11.931c2.05-3.147,5.208-5.168,8.666-6.63c6.354-2.69,12.348-0.475,15.411,5.715c2.277,4.603,2.706,9.555,1.757,14.462c-1.688,8.719-3.779,17.36-5.687,26.038c-1.406,6.396-2.662,12.821-1.919,19.416c0.199,1.771,0.643,3.56,1.283,5.224c1.017,2.644,3.055,4.06,5.959,4.058c2.801-0.001,4.479-1.552,5.544-3.993C144.222,131.212,144.674,130.602,145.333,130.093zM218.268,93.114c0.221,9.172-0.831,18.205-4.015,26.864c-1.557,4.236-3.804,8.085-8.193,10.064c-3.464,1.562-6.769,0.682-9.06-2.367c-2.789-3.712-3.467-8.114-4.003-12.552c-0.05-0.412-0.057-0.828-0.086-1.289c-1.413,3.097-2.551,6.28-4.258,9.121c-1.403,2.334-3.207,4.604-5.319,6.299c-3.747,3.004-7.154,1.754-8.665-2.827c-0.491-1.488-0.791-3.04-1.319-5.117c-0.462,1.092-0.728,1.756-1.021,2.407c-2.573,5.714-6.95,8.714-12.421,8.488c-6.041-0.25-9.706-3.834-11.43-9.146c-3.557-10.956-2.047-21.448,4.294-31.065c2.631-3.991,6.582-6.093,11.507-6.027c3.812,0.052,6.251,2.324,6.557,6.129c0.594,7.397-3.562,14.252-10.799,17.743c-1.246,0.601-2.522,1.223-3.854,1.541c-1.283,0.306-1.803,0.854-1.564,2.142c0.541,2.924,0.828,5.922,1.658,8.76c0.863,2.952,2.844,5.126,6.14,5.523c3.537,0.425,6.062-1.205,7.675-4.246c1.736-3.273,2.968-6.685,2.848-10.51c-0.182-5.858,0.027-11.695,2.088-17.29c1.752-4.761,5.438-7.205,9.731-6.569c-4.994,9.188-4.968,18.924-3.889,28.782c0.191,1.748,0.483,3.965,2.583,4.341c2.26,0.405,3.138-1.76,3.997-3.366c2.494-4.664,3.501-9.777,4.224-14.958c0.442-3.167,0.762-6.358,1.345-9.499c0.857-4.618,4.592-6.715,8.764-5.54c-0.498,2.643-1.228,5.211-1.427,7.819c-0.623,8.137-0.706,16.271,1.36,24.267c0.225,0.87,0.526,1.733,0.901,2.549c1.543,3.353,4.549,3.971,6.573,0.905c1.864-2.824,3.475-6.14,4.033-9.435c1.319-7.784,1.244-15.673-0.642-23.42c-0.437-1.796-1.257-3.518-2.051-5.202c-0.524-1.111-1.316-2.339-0.086-3.157c1.037-0.688,2.727-1.32,3.706-0.928c1.225,0.491,2.5,1.909,2.895,3.191C217.793,87.964,218.207,90.57,218.268,93.114zM154.734,109.411c6.24-1.846,10.514-7.919,10.646-14.894c0.04-2.104,0.404-4.534-2.131-5.54c-1.646-0.653-3.641,0.973-4.991,3.916C155.885,98.067,155.039,103.583,154.734,109.411z"/> | |
| <path id="underline" fill="#EFEFEF" d="M8,190c115.125-0.125,259.625-1,328.833-2.667c1-0.024,121.583,3.083,152.167,3.229c0.684,0.003,0.707,0.747,0,0.75c-27.167,0.104-151.667,3.017-153,2.938C298,192,9.636,191.068,8.833,190.667"/> | |
| </defs> | |
| <clipPath id="happy-clip"><use xlink:href="#happy-path" overflow="visible"/></clipPath> | |
| <clipPath id="ear-clip"><use xlink:href="#ear-path" overflow="visible"/></clipPath> | |
| <clipPath id="new-ye-clip"><use xlink:href="#new-ye-path" overflow="visible"/></clipPath> | |
| <clipPath id="y-clip"><use xlink:href="#y-path" overflow="visible"/></clipPath> | |
| <clipPath id="ye-clip"><use xlink:href="#ye-path" overflow="visible"/></clipPath> | |
| <clipPath id="new-clip"><use xlink:href="#new-path" overflow="visible"/></clipPath> | |
| <clipPath id="underline-clip"><use xlink:href="#underline" overflow="visible"/></clipPath> | |
| <polyline id="happy-stroke" class="stroke-fill" clip-path="url(#happy-clip)" fill="none" stroke="#4F2525" stroke-width="6" stroke-linejoin="round" stroke-miterlimit="10" points="193.458,17.771 193.479,41.896 206.625,45.542 206.667,18.667 186.917,26.5 195,29.667 204.917,29.625 212.562,48.75 219.344,43.438 228.229,14.438 237.188,43.958 223.375,42.25 216.188,34.625 239.208,34.583 243.875,44.292 249.938,44.062 249.833,20.312 249.833,21.979 258.396,22.417 261.333,25.604 260.042,29.417 255.896,30.562 251.125,30.875 259.833,38.292 270.542,44.542 275.667,42.833 275.708,20.312 275.583,22.167 283.833,22.25 287.042,24.604 286.25,29.083 281.812,30.75 277.688,30.708 296.188,14.438 307.247,33.146 307.375,41.5 304.25,35.75 316.229,17.958 "/> | |
| <path id="underline-stroke" class="stroke-fill" clip-path="url(#underline-clip)"fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#601B1B" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M494,191.5c0,0-134.006-0.858-164-1s-327.5,0-327.5,0"/> | |
| <path id="n-stroke" class="stroke-fill"clip-path="url(#new-clip)" fill="none" stroke="#4F2525" stroke-width="10" stroke-linejoin="round" stroke-miterlimit="10" d="M82.5,100c-11.333-11.833-18.621-46.594,0.917-44.583c20.25,2.083,11.167,80,11.167,80s8.583-75.667,31.917-73.333c21.756,2.176-6.892,58.902,2,69.417c11.417,13.5,17.917-1.75,17.917-1.75"/> | |
| <path id="ew-stroke" class="stroke-fill" clip-path="url(#new-clip)" fill="none" stroke="#4F2525" stroke-width="9" stroke-linejoin="round" stroke-miterlimit="10" d="M155.042,111.083c5.625,0.042,19.125-14.708,11.833-22c-3.387-3.387-16.441,5.794-16.188,22.979c0.25,16.938,11.438,21.812,15.062,17c2.025-2.688,12.312-40.062,14.688-39.688c1.736,0.274-7.229,36.493-0.625,37.625c6.562,1.125,15.489-38.206,15.688-38.312c8.872-4.745-3.562,22.438,3.375,35.375c1.632,3.043,2.985,5.177,7.5,4.125c15.562-3.625,6.312-48.25,6.312-48.25"/> | |
| <path id="y-stroke" class="stroke-fill" clip-path="url(#y-clip)" fill="none" stroke="#4F2525" stroke-width="10" stroke-linejoin="round" stroke-miterlimit="10" d="M245.667,105.833c-5.75-14.5-0.334-55.263,21.5-48.25C280.917,62,254.028,129.803,267,130.25c24.167,0.833,40-62.625,36-62.25s22,105.75-19.625,104"/> | |
| <path id="ye-stroke" class="stroke-fill" clip-path="url(#ye-clip)" fill="none" stroke="#4F2525" stroke-width="9" stroke-linejoin="round" stroke-miterlimit="10" d="M286.125,172.125c-4.875,0.125-9.375-2-11.5-14.25s18.5-35.75,24-40.625s16.503-5.341,26.25-6.375c8.25-0.875,16.25-11,15.5-16.375c-1.471-10.542-8.125-8.875-12.375-6.125"/> | |
| <path id="ear-stroke" class="stroke-fill" clip-path="url(#ear-clip)" fill="none" stroke="#4F2525" stroke-width="9" stroke-linejoin="round" stroke-miterlimit="10" d="M333.5,87.125c-11.25,4.625-13.25,26.375-10.188,34.812c2.441,6.726,5.553,7.938,8.625,7.938c4.188,0,7.059-6.344,8.188-9c4.438-10.438,4.572-15.379,7.875-24c6.25-16.312,12.625-9.312,12.625-9.312s-8.263,9.086-9.688,16.25c-2.125,10.688-5.125,26.438,2.062,22.125c3.727-2.236,4.544-11.855,7.312-19.625c3.805-10.68,8.938-19.875,8.938-19.875s-4.625,30.812-1.438,37.562s6.846,5.672,8.438,4.5c9.25-6.812,8.562-39.625,3.438-44.062s13.178,10.246,18,5.812c3.875-3.562-0.931,5.241-1.438,11.875c-0.785,10.278-2.375,23.625,2.562,26.312c2.147,1.169,10.688-8.938,12.438-9.604c2.574-0.98,8.726,13.833,10.917,13.833c0.833,0,0.25-7.25,0.25-7.25s11.25-4.167,11.25-4.167l3.75-60.167L424,63.156l0.25,6.094l-0.156,2.594L424,74.25l-2,44"/> | |
| </svg> | |
| </div> | |
| </body> |
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
| $primairyFontColor: #efefef; | |
| html{ | |
| background: -moz-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #241d33), color-stop(51%, #171930), color-stop(100%, #091119)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #241d33 0%, #171930 51%, #091119 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#241d33', endColorstr='#091119', GradientType=0); /* IE6-9 */ | |
| height: 100%; | |
| overflow:hidden; | |
| } | |
| body{ | |
| height:100%; | |
| } | |
| #new-year { | |
| position: relative; | |
| top: 50%; | |
| width: 90%; | |
| height: 90%; | |
| margin: 0 auto 0 auto; | |
| transform: translateY(-50%); | |
| svg{ | |
| width: 100%; | |
| height:100%; | |
| } | |
| } | |
| .stroke-fill { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| stroke: $primairyFontColor; | |
| } | |
| #happy-stroke { | |
| animation: happy-dash 1.7s linear normal forwards; | |
| } | |
| $newYearDelay: 1.8s; | |
| #n-stroke { | |
| animation: dash 2s $newYearDelay linear normal forwards; | |
| } | |
| #ew-stroke { | |
| animation: dash 2s (.7s+$newYearDelay) linear normal forwards; | |
| } | |
| #y-stroke{ | |
| animation: dash 2s (1.5s+$newYearDelay) linear normal forwards; | |
| } | |
| #ye-stroke{ | |
| animation: dash 1s (2.2s+$newYearDelay) linear normal forwards; | |
| } | |
| #ear-stroke{ | |
| animation: dash 2s (2.38s+$newYearDelay) linear normal forwards; | |
| } | |
| #underline-stroke{ | |
| animation: dash .5s (3.7s+$newYearDelay) cubic-bezier(0.550, 0.085, 0.680, 0.530) normal forwards; | |
| } | |
| @keyframes dash { | |
| 0% { stroke-dashoffset: 1000; } | |
| 100% { stroke-dashoffset: 0; } | |
| } | |
| // Tweaked the exact timings of when the stroke enters the masked areas. | |
| @keyframes happy-dash { | |
| //H | |
| 0% { stroke-dashoffset: 1000; } | |
| 6% { stroke-dashoffset: 976; } | |
| 6.01% { stroke-dashoffset: 958; } | |
| 13% { stroke-dashoffset: 936; } | |
| 13.01% { stroke-dashoffset: 905; } | |
| 20% { stroke-dashoffset: 896; } | |
| //A | |
| 20.01% { stroke-dashoffset: 864; } | |
| 27% { stroke-dashoffset: 840; } | |
| 27.01% { stroke-dashoffset: 830; } | |
| 34% { stroke-dashoffset: 808; } | |
| 34.01% { stroke-dashoffset: 775; } | |
| 40% { stroke-dashoffset: 764; } | |
| //P | |
| 40.01% { stroke-dashoffset: 738; } | |
| 60% { stroke-dashoffset: 688; } | |
| //P | |
| 60.01% { stroke-dashoffset: 658; } | |
| 80% { stroke-dashoffset: 610; } | |
| //Y | |
| 80.01% { stroke-dashoffset: 580; } | |
| 90% { stroke-dashoffset: 555; } | |
| 90.01% { stroke-dashoffset: 543; } | |
| 99.99% { stroke-dashoffset: 525; } | |
| 100% { stroke-dashoffset: 0; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment