CSS SVG Stroke Animation | Toshusai Sharaku | Plantpot

CSS SVG Stroke Animation | Otani Oniji III in the Role of the Servant Edobei by Toshusai Sharaku

Web Dev
Sponsored links

Demo

Please reload the page to start the SVG stroke animation.

Full Screen

 

Sponsored links

 

Video

YouTube Channel

 

Sponsored links

 

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS SVG Stroke Animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="sharaku">
      <svg xmlns="http://www.w3.org/2000/svg" width="513" height="720" viewBox="0 0 513 720">
        <g fill="none" fill-rule="evenodd">
          <path fill="#25211E" stroke="#25211E" d="M452.294984 242.837914C452.871598 244.876536 451.590467 249.888679 445.882802 249.888679 440.175138 249.888679 438.614002 246.912632 438.614002 243.324103 438.614002 239.735575 441.839067 239.735575 445.882802 234.794064 449.926538 229.852553 449.926538 226.935227 455.417395 219.542635 460.908253 212.150044 464.07737 210.319792 469.344356 210.319792 474.611341 210.319792 479.272376 213.616771 481.845822 217.310193 484.419268 221.003615 483.875483 229.59088 483.445822 231.288658 483.016161 232.986436 479.477103 232.779126 478.439958 232.174774 477.402812 231.570422 478.039789 222.384576 475.302139 219.045407 472.564488 215.706237 466.458753 216.466262 463.388684 218.642917 460.318615 220.819572 457.264027 226.782978 454.822587 230.175625 452.381148 233.568272 450.438715 234.695673 450.131351 237.06543 449.823988 239.435186 451.718369 240.799292 452.294984 242.837914zM356.220188 248.345087C357.259193 250.513386 352.47594 255.042188 349.150303 255.838371 345.824667 256.634554 342.417472 256.794804 339.655386 252.357517 336.893299 247.92023 341.985685 244.58981 335.634693 239.131764 329.283701 233.673718 315.071168 222.520462 311.210774 220.471615 307.35038 218.422768 303.29608 218.845484 298.084814 221.429487 292.873547 224.01349 292.150484 227.307235 293.113042 232.824048 294.075601 238.34086 302.123704 242.179948 300.355378 243.059432 298.587051 243.938916 289.629824 236.687233 288.03609 232.824048 286.442356 228.960862 287.212891 224.440529 288.804571 220.471615 290.396251 216.502702 296.426945 212.421526 302.685786 211.242899 308.944626 210.064272 315.547832 215.360615 318.448359 217.306611 321.348885 219.252608 341.892317 238.718389 346.222416 241.387379 350.552515 244.05637 355.181183 246.176788 356.220188 248.345087z"/>
          <path fill="#DC8767" stroke="#DC8767" d="M365.501099 246.332805C365.501099 248.797326 366.46869 271.391884 365.501099 273.961708 364.533509 276.531533 353.433963 276.531533 345.055116 272.623313 336.676269 268.715094 336.241501 270.001781 325.627835 265.575134 315.014168 261.148487 309.416918 259.51389 302.225415 256.277642 295.033912 253.041393 280.841126 246.084622 278.685994 241.394442 276.530861 236.704263 280.283211 223.98944 281.951982 212.744195 283.620753 201.49895 279.197827 184.175382 281.951982 184.175382 284.706137 184.175382 299.456835 200.592047 301.29633 203.038881 303.135824 205.485714 302.181903 209.622346 301.29633 210.586339 300.410756 211.550331 289.06927 214.073407 287.158596 223.98944 285.247923 233.905472 287.678582 234.275814 291.257762 237.835128 293.643882 240.208004 296.990071 242.460268 301.29633 244.59192 308.187817 247.612293 313.782066 249.969914 318.079075 251.664782 324.524589 254.207084 329.709021 254.704599 337.283466 257.988963 344.857911 261.273326 346.847602 264.268945 350.429774 265.575134 354.011946 266.881323 355.827617 268.42423 358.004353 266.596319 360.18109 264.768409 357.082329 251.841639 357.359672 249.540299 357.637015 247.238958 360.006049 245.299687 361.672083 244.59192 363.338118 243.884152 365.501099 243.868283 365.501099 246.332805zM428.171056 240.268724C427.517814 242.352091 427.390632 247.982059 432.790215 255.60127 435.55198 259.498325 442.140525 265.170681 444.709137 267.110922 450.383284 267.110922 447.26293 264.297371 455.01984 260.545901 462.776751 256.794431 466.231697 256.890287 472.447416 252.761724 478.663135 248.633162 489.806792 241.438161 489.806792 237.130311 489.806792 236.276345 485.065689 234.007818 485.065689 230.104235 485.065689 226.200653 485.03668 220.558719 483.958109 218.744728 481.295409 214.266474 479.351992 213.164881 478.735711 212.018138 477.582768 209.872804 487.93726 197.980073 489.806792 194.43573 491.676324 190.891386 490.447679 190.763684 488.19533 191.847606 485.942981 192.931527 468.61401 209.235752 470.967778 209.423294 472.447416 209.541187 475.429608 210.316955 478.4713 212.474083 480.617942 213.996453 482.879013 216.473306 483.809398 218.994083 484.739783 221.51486 485.358055 230.896293 483.958109 232.409819 483.179199 233.251922 482.119521 233.53607 480.926246 233.643759 479.732971 233.751448 478.88572 233.639565 477.993499 234.894987 473.078189 241.811202 464.619889 249.570193 458.21682 250.909555 451.813751 252.248916 451.813751 250.909555 445.728479 250.909555 442.148264 250.909555 439.649923 249.56838 438.614002 247.52685 437.889174 246.098404 437.465682 244.227258 437.702547 242.087447 437.778773 241.398827 428.712541 238.541782 428.171056 240.268724z"/>
          <path fill="#25211E" stroke="#25211E" d="M374.443203 186.271486C376.266511 184.507574 376.266511 164.976078 370.975401 163.280215 365.684291 161.584352 344.68411 150.846735 334.77162 143.571538 324.85913 136.296341 303.405679 111.530373 294.032397 109.821546 284.659114 108.112718 276.48762 113.647387 269.380728 118.558636 262.273836 123.469885 255.729003 136.167034 258.179785 138.130214 260.630567 140.093395 269.870564 130.552395 284.310351 131.538705 298.750138 132.525016 303.632143 138.354886 317.000433 148.386944 330.368723 158.419001 332.785085 159.702849 340.903253 164.976078 349.02142 170.249307 352.203618 171.701983 360.359007 175.757741 368.514396 179.813499 372.619894 188.035399 374.443203 186.271486zM423.010245 182.053143C419.140147 182.053143 416.468447 168.665838 418.307716 163.999221 420.146984 159.332604 429.521071 159.122923 441.376101 150.469081 453.231132 141.815238 466.506596 116.835671 473.986947 113.909816 476.227866 113.033307 480.618435 111.289231 482.83927 112.430711 486.995833 114.56713 489.724049 121.711389 490.668867 124.558867 492.017786 128.62422 493.26159 134.176654 491.333021 135.115747 489.404452 136.054841 484.834237 132.113833 480.948111 133.566514 477.061985 135.019195 469.844313 140.117809 460.703397 148.136014 451.56248 156.154219 445.453168 162.116929 440.31809 166.092619 435.183011 170.06831 434.379226 169.571408 430.172357 173.664992 425.965487 177.758576 426.880342 182.053143 423.010245 182.053143z"/>
          <path stroke="#25211E" stroke-width="1.5" d="M425.094084 424.076063C421.235927 420.232579 417.531974 416.695606 410.189026 413.088917 394.76241 405.511712 385.403175 411.032325 379.483212 407.550934 373.563249 404.069542 374.047274 396.303229 377.089664 389.735127 379.117925 385.356393 386.169982 380.125136 398.245837 374.041356M497.766448 372.431146C504.020998 393.35423 506.655933 408.034461 508.099348 420.765552 509.763793 435.446149 512.548035 452.462626 496.292101 459.460993 480.036167 466.459359 461.93427 448.836404 443.457592 438.386011M417.933327 242.087447C423.893697 248.002587 431.517181 255.365511 440.803779 264.176219 454.733676 277.392281 461.890718 284.959527 465.283462 291.508909 468.676206 298.058291 470.326178 307.735795 475.055903 319.668675 479.785629 331.601554 486.073584 335.916908 494.629834 362.364738"/>
          <path fill="#25211E" stroke="#25211E" d="M433.275006 482.579978C435.915967 482.197165 439.199068 481.863758 441.139018 481.846408 453.024499 481.740112 457.167815 484.333334 462.34543 484.796848 467.523045 485.260362 472.604857 483.761668 474.175706 486.624963 475.746555 489.488258 473.537163 494.252905 470.334096 494.252905 467.131028 494.252905 459.563155 490.003476 451.498448 489.263698 447.421003 488.889672 442.73249 486.61371 435.258365 485.136513 430.056692 484.108446 430.634045 482.962791 433.275006 482.579978zM303.170134 508.063133C291.598267 513.146537 295.078134 511.687033 287.283236 516.412979 279.488339 521.138925 277.590824 524.805531 271.594727 524.805531 265.598629 524.805531 264.01041 520.794876 264.01041 517.386727 264.01041 513.978578 265.734164 510.90196 268.508016 509.182243 271.281867 507.462525 275.245545 506.257803 307.64087 498.89643 312.263663 497.845966 316.37697 496.897739 320.111901 496.033456 320.874987 495.856874 323.077694 495.82368 323.289615 496.421155 323.508864 497.03929 321.711899 498.297707 320.967397 498.653844 314.235941 501.873875 309.499073 505.282894 303.170134 508.063133z"/>
          <path fill="#25211E" stroke="#25211E" d="M332.604772,493.14914 C346.846239,489.9002 356.235013,488.033323 374.886812,485.579022 C390.59265,483.512366 406.107667,482.623496 418.73799,482.221344 C428.202796,481.919983 437.108979,484.550529 419.631627,483.739086 C414.975103,483.522892 409.64734,483.5422 403.500769,483.926798 C374.284246,485.754913 366.692375,487.216441 343.841921,491.505355 C339.757939,492.271898 336.204246,493.130966 333.055678,494.054021 C318.587562,498.295588 325.867605,494.686106 332.604772,493.14914 Z"/>
          <path stroke="#25211E" stroke-width="1.5" d="M487.156683 242.474202C488.686088 244.503136 490.456097 246.911114 492.504954 249.888679 504.355548 267.110922 507.051074 274.878043 510.411288 296.335831 513.771502 317.793618 510.268074 337.203837 507.609848 360.54546 506.835969 367.340817 504.071375 374.361745 500.509515 381.584624M458.417918 59.848634C461.915342 70.1466014 465.257313 78.8929196 468.44383 86.0875887 473.223606 96.8795922 469.151204 92.6815108 476.517365 109.049514 483.883525 125.417517 488.347912 129.530299 492.326205 139.155503 496.304498 148.780707 496.886247 152.372364 496.492209 163.835819 496.09817 175.299274 496.492209 172.274787 492.326205 186.515972 491.86224 188.102002 491.310858 189.533461 490.698103 190.847181M478.09101 458.391509C479.672611 476.605847 483.185407 491.516902 479.842862 501.67362 475.302139 515.471142 456.549427 521.261438 449.339851 555.817332 442.130276 590.373227 441.448271 617.389145 436.032577 633.440159 430.616884 649.491173 397.009658 680.52608 381.750018 684.478266 366.490378 688.430451 316.665721 686.648823 287.304946 678.333923 257.944172 670.019022 214.039825 655.336818 166.142783 648.583697 134.211423 644.081616 104.263545 644.081616 76.2991502 648.583697"/>
          <path stroke="#25211E" stroke-width="1.5" d="M119.652307 645.108856C88.8966682 658.461568 61.7485528 673.522754 38.2079607 690.292415 26.0925756 698.923077 13.3996404 708.490581.129154972 718.994926M146.466419 594.869238C127.323237 577.512756 103.268014 553.466583 91.3009059 528.258634 79.3337982 503.050686 83.7385559 475.249702 91.3009059 448.455305 98.8632558 421.660909 110.504317 413.489168 112.614366 393.546613M128.713928 169.599413C124.328597 165.246596 119.75185 160.445202 114.983688 155.195233 107.831444 147.320278 102.959331 142.800239 94.2817525 139.869174 85.6041743 136.93811 75.8012831 133.621079 63.8227807 136.32925 51.8442784 139.037421 41.7825608 145.067374 38.1652917 156.836183 34.5480226 168.604993 33.6867091 169.092575 25.8049483 195.933752 17.9231874 222.774928 17.9231874 250.876881 18.3289176 270.21833 18.7346477 289.559779 22.6188003 309.269777 28.1846088 333.190008 33.7504173 357.110238 38.3013146 366.544447 43.4437916 372.999416 48.5862687 379.454386 57.5772062 387.775664 69.2356273 387.775664 77.0079081 387.775664 85.3566165 386.672441 94.2817525 384.465995"/>
          <path stroke="#25211E" stroke-width="1.5" d="M117.247069 195.822486C114.262615 200.285687 111.592245 202.517288 109.235957 202.517288 105.701525 202.517288 92.80951 192.567372 86.9086769 184.175382 81.0078439 175.783393 80.646495 165.393393 73.4533295 163.442699 66.260164 161.492005 61.5560725 164.96094 53.2743602 175.054189 47.7532187 181.783022 44.8563543 188.705788 44.5837669 195.822486M42.0706298 205.369728C39.017386 216.731989 37.2058541 225.208148 36.6360341 230.798204 36.066214 236.38826 36.066214 245.683615 36.6360341 258.684269"/>
          <path stroke="#25211E" stroke-width="1.5" d="M82.4212415,193.065459 C75.9654374,191.226719 70.3520919,191.226719 65.581205,193.065459 C58.4248747,195.823568 55.2773078,198.316525 51.2034812,208.069217 C48.4875969,214.571012 48.0183893,221.753078 49.7958586,229.615415"/>
          <path stroke="#25211E" stroke-width="1.5" d="M101.186328 207.35242C95.943093 205.842505 90.9586595 205.181607 86.2330272 205.369728 79.1445788 205.651909 76.2416123 206.774305 69.1426929 210.65091 62.0437734 214.527515 59.5015539 217.935932 58.0753806 223.775674 56.6492073 229.615415 57.0357465 231.33638 56.6492073 240.797742 56.2626681 250.259103 56.6938646 249.456765 60.8422377 261.550878 63.6078197 269.61362 66.977905 276.59578 70.9524934 282.497356M39.1396494 284.93336C48.7785223 288.07233 57.9942911 294.433048 66.7869559 304.015514 75.5796207 313.59798 81.7008136 323.951866 85.1505344 335.077173M191.780989 37.3634333C201.076245 42.3303439 207.521304 47.7244239 211.116163 53.5456733 216.508453 62.2775473 218.174429 75.7287022 219.309373 87.3132514 220.444318 98.8978005 217.950959 103.785274 216.568275 123.30805 215.185592 142.830827 217.611652 144.085079 214.363908 157.140653 211.116163 170.196228 208.283786 171.728005 201.750152 186.515972 195.216519 201.303938 191.96473 207.889799 189.209737 220.206788 186.454744 232.523777 186.848831 259.517378 189.209737 275.747888 190.783674 286.568228 198.085816 304.171688 211.116163 328.558267"/>
          <path stroke="#25211E" stroke-width="1.5" d="M193.388276,47.4161323 C199.492793,51.7457671 204.407971,56.2806526 208.133808,61.0207888 C213.722564,68.1309931 216.593077,74.4756815 218.315837,83.4882179 C220.038598,92.5007543 217.906469,100.493888 214.70529,111.893733 C211.504111,123.293578 207.699828,125.702449 206.158571,130.48352 C205.131067,133.670901 204.661004,138.077963 204.748383,143.704705"/>
          <path stroke="#25211E" stroke-width="1.5" d="M191.53026 67.7755619C193.705839 68.8277585 197.390606 71.8952797 202.584563 76.9781254 210.375498 84.6023941 216.384295 93.6329752 218.093002 98.778244 219.801709 103.923513 219.833028 119.065266 218.093002 127.50233 216.352976 135.939395 210.481446 143.803341 203.718415 160.144985 196.955384 176.48663 193.944936 182.351329 191.53026 191.686404 189.115584 201.021479 187.003445 209.639071 188.51813 223.757128 189.527919 233.169166 192.223011 244.811546 196.603406 258.684269M146.410541 9.28477605C137.008854 8.74924983 129.55309 7.77205652 124.043251 6.35319613 118.533412 4.93433575 113.970698 2.8166037 110.35511 7.10542736e-15M131.963944 16.143389C126.224199 16.1289515 120.472134 15.0327742 114.707749 12.8548572 108.943365 10.6769403 104.548701 7.93945054 101.523759 4.64238803M142.074777 32.8711024C128.517924 28.813165 117.944702 25.066796 110.35511 21.6319955 102.765518 18.1971949 96.7826625 14.4508259 92.4065447 10.3928885M128.713928 37.3634333C117.029252 32.6437971 108.380925 28.6456065 102.768949 25.3688615 97.1569729 22.0921164 92.1101534 18.0939258 87.6284908 13.3742896M106.357919 35.3804856C99.5728629 32.5148978 94.3528993 29.7195552 90.6980284 26.9944581 87.0431575 24.2693609 83.6629257 20.6523379 80.5573329 16.143389M115.092593 72.8299278C106.750897 69.7147843 99.9881528 66.4127786 94.8043596 62.9239107 89.6205664 59.4350428 84.9909191 55.069584 80.9154179 49.8275342M139.446292 88.4334594C130.860794 86.7692696 123.461053 84.7326873 117.247069 82.3237124 111.033085 79.9147375 105.016318 76.7501426 99.1967675 72.8299278M111.174608 86.3962848C101.145558 82.0182901 93.2968526 77.4961711 87.6284908 72.8299278 81.9601289 68.1636844 76.4029877 61.649997 70.9570672 53.2888654M99.1967675 88.4334594C89.1832698 83.3785806 80.6021238 77.1816192 73.4533295 69.8425751 66.3045352 62.503531 60.430596 53.8607162 55.831512 43.9141307M119.32153 131.15016C110.270165 126.632001 103.164324 122.451632 98.0040056 118.609053 92.8436872 114.766474 87.6494325 109.787701 82.4212415 103.672734M131.870632 143.704705C123.189167 140.375666 115.550132 136.926439 108.953528 133.357025 102.356924 129.78761 96.3943603 125.877028 91.0658376 121.62528"/>
          <path stroke="#25211E" stroke-width="1.5" d="M126.489399 150.512647C114.611394 146.32272 102.803541 139.37074 91.0658376 129.656705 79.3281347 119.942671 69.9000941 109.319985 62.7817157 97.7886486M70.9570672 117.411447C60.2614805 104.556131 52.8561809 94.8968015 48.7411685 88.4334594 44.6261561 81.9701173 41.1055186 75.7731558 38.1792561 69.8425751"/>
        </g>
      </svg>
    </div>
    <div id="title">
      <svg xmlns="http://www.w3.org/2000/svg" width="406" height="259" viewBox="0 0 406 259">
        <g fill="none">
          <path fill="#25211E" stroke="#25211E" d="M155.2,14.4 L27,14.4 L26.7552,12.3568 C26.416,9.624 26,6.84 25.2,3.8 L20.4,3.6 L20.2950997,4.90392536 C19.0821224,19.5005714 17.0171429,27.9714286 10.8,33.8 L10.1846625,34.3526038 C5.11114276,38.9375578 4,40.7132075 4,43.6 C4,47.8 7.4,51 11.8,51 C21.6,51 27.4,40 27.4,24.4 L27.4,21.2 L155.8,21.2 C152.8,29 148.8,37 144.2,44.4 L148,47.4 C155.6,41.2 162.4,34 168.6,26.4 L169.834053,26.1853494 C178.142149,24.7061983 179.6,23.6909091 179.6,21.4 L179.593147,21.1723985 C179.450283,18.8410416 176.989474,16.2905263 164.4,6.8 L161.6,6.8 L155.2,14.4 Z M66.2,57 C67.8,51.4 69.4,46 71,40.4 L72.1133621,40.2488249 C78.6399106,39.3322073 80.1468612,38.5275291 80.1985997,36.7006675 L80.2,36.6 C80.2,34.2 77.6,32.6 60.8,28 L59.4,28.8 C59.4,33.5222222 58.6864198,37.7092593 57.5962277,42.035048 L57.4,42.8 C53.6,57.6 45.6,80.8 35.8,103.4 L47.4,104.8 L49.8,103.4 C50.8,101 51.8,98.4 52.8,96 L119.4,96 C118.6,105 117.2,113.4 115.8,121.2 L17,121.2 L0.6,120 L3,129.2 L17,128 L114.6,128 L114.18734,129.995567 C111.274793,143.804132 107.881818,154.2 105.4,158.4 C101.471429,165.078571 95.9994898,167.127041 89.1736596,167.198071 L88.8,167.2 C83,167.2 76.4,166 61,162.2 L59.6,166.8 L61.0662222,167.295526 C74.9153333,172.044222 79.42,175.646667 80,182.8 L81.1645396,182.76016 C99.810652,182.059116 109.733333,178.557576 116.2,166.8 C120.6,158.8 125,144.6 128.2,128 L181.6,128 L181.6,123.2 L167.2,108.4 L164.4,108.4 L154.4,121.2 L129.4,121.2 C130.6,114.4 131.6,107.4 132.2,100.2 L133.294117,99.8160187 C138.328072,98.0148393 140.6,96.6695652 140.6,94.8 L140.596429,94.6350295 C140.494094,92.3044524 138.142529,90.1977011 127.2,81.6 L124.4,81.6 L117.6,89.2 L55.2,89.2 C58.6,80.8 61.2,72.2 64,63.8 L147.8,63.8 L147.8,59 L135.2,46 L132.4,46 L123.4,57 L66.2,57 Z M331.4,91.2 L331.4,100.4 L342.2,100 L344.2,98 L343.2,69.6 L343.2,36 L343.88408,35.7424345 C348.753119,33.8771267 350.4,32.5130435 350.4,30.6 L350.395886,30.4232173 C350.286359,28.1073312 347.94321,26.2024691 337.8,18.4 L335.2,18.4 L329.2,25.8 L308.8,25.8 C312,21.4 314.4,17.6 316.4,13.8 L317.114535,13.7950719 C323.145405,13.7097394 325,12.5185185 325,10.4 L324.996075,10.2562144 C324.86648,7.9108 321.46,5.696 304.8,0.6 L303.8,1.4 C304.175,3.8375 304.022656,7.3296875 303.837354,9.89902344 L303.695126,11.8226679 C303.324386,16.6775047 302.895652,20.3217391 301.8,25.8 L291.6,25.8 L289.468207,24.6199111 C284.902222,22.1031111 280.626667,19.8266667 275.6,17.4 L274.4,18.6 C276.6,24.4 277.2,29.4 277.2,38.2 L277.2,69.4 L276.4,101.2 L287,100.8 L288.8,98.8 L288.8,91.2 L331.4,91.2 Z M331.4,84.4 L288.8,84.4 L288.8,60.8 L331.4,60.8 L331.4,84.4 Z M331.4,54 L288.8,54 L288.8,32.6 L331.4,32.6 L331.4,54 Z M316,126.6 C317.44,128.52 318.752,130.44 320.1408,132.36 L321.2,133.8 C330.4,146.4 342.4,157.2 355.6,165.4 C366.8,172.4 378.8,177.2 391.4,181.4 C393.4,175.4 397.2,171.8 404,171.2 L405,167 C368,160.6 341.8,148.4 320.4,123.2 L399.4,123.2 L399.4,118.4 L385.4,103.8 L382.6,103.8 L372.8,116.4 L316.8,116.4 L316.8,108 L317.848972,107.69021 C323.205536,106.077509 324.8,105.058824 324.8,102.8 C324.8,100 319.8,99 303.2,96.2 L302.2,97.4 C304,102 304.6,105.6 304.6,112.8 L304.6,116.4 L242.8,116.4 L226.4,115.2 L228.8,124.4 L242.8,123.2 L297.2,123.2 C279.4,147.8 252.8,165.8 217.4,178.8 L219.4,183.2 C256.6,173.2 283.8,158.6 305.2,133.8 L303.6,189.8 L315.8,189.4 L317.8,187.4 L316,126.6 Z M222.8,82.2 L222.2,83.4 L223.227462,85.1073789 C230.479773,97.0579399 233.505495,99.8 235.8,99.8 C238.2,99.8 239.2,97.2 239.2,91.4 L241.141368,90.0921357 C252.944642,82.1172913 261.692308,75.7487179 270.8,67.4 L268.6,63 L266.512413,64.1803434 C255.834894,70.1781451 246.793939,74.630303 237.4,78.2 C233.4,79.8 227.4,81.8 222.8,82.2 Z M353.6,67 C365.6,73.2 374,81 379.8,89 L380.295539,89.7258496 C384.1936,95.38816 386.536,97.6 389.8,97.6 C394,97.6 396.2,94.6 396.2,89.6 C396.2,81.2 383.2,70.2 355.6,62.4 L353.6,67 Z M381.2,17.4 C379.8,22 377.4,25.4 373.6,30.4 L373.041837,31.1234056 C368.006888,37.5892857 362.6,42.8928571 351.8,50.8 L354.2,54.8 C368.8,48.8 377.8,42.2 387.4,34 C390.6,35 393,35.4 394.8,35.4 C396.921429,35.4 397.927041,34.6561224 397.996164,33.1683673 L398,33 C398,30 395.8,27.4 382.8,17 L381.2,17.4 Z M223.4,21 L226.4,17 C251.2,24.8 263,36.8 263,44.6 C263,49.6 261,52.6 256.8,52.6 C253.661538,52.6 251.484985,50.4838018 247.628792,44.3645852 L247.4,44 C242.4,36 234.4,27.6 223.4,21 Z"/>
          <path fill="#A46E4C" stroke="#A46E4C" d="M34.25,244.7 L32.09,244.7 L32.09,253.22 C32.09,254.66 32.45,255.2 33.29,255.5 C36.41,256.58 40.25,257.3 44.45,257.3 C53.21,257.3 58.55,252.44 58.55,245.24 C58.55,238.274194 54.7747919,236.012877 46.7100855,232.798859 L45.6062743,232.360216 C39.9916148,230.094671 37.61,228.263529 37.61,223.94 C37.61,218.84 40.25,216.38 45.35,216.38 C47.27,216.38 49.07,216.68 50.75,217.28 C51.89,217.7 52.19,218.12 52.49,219.38 L53.81,224.6 L55.97,224.6 L55.97,216.8 C55.97,215.84 55.73,215.18 54.71,214.88 C52.07,214.04 49.25,213.74 45.77,213.74 C38.33,213.74 32.87,218.12 32.87,225.14 C32.87,231.335 36.17695,234.281067 43.9318444,237.344134 L44.33,237.5 C50.75,240.02 53.87,241.88 53.87,246.56 C53.87,251.84 51.35,254.66 45.23,254.66 C42.77,254.66 39.53,254.06 37.55,253.16 C36.41,252.62 35.93,251.9 35.63,250.7 L34.25,244.7 Z M116.81,216.14 L116.81,214.1 C114.29,214.28 110.87,214.4 107.51,214.4 L106.337478,214.395115 C103.392007,214.370934 100.380588,214.258824 98.21,214.1 L98.21,216.14 L101.33,216.56 C104.69,217.04 104.93,217.16 104.93,221.84 L104.93,233.36 L81.89,233.36 L81.8909729,221.319957 C81.9086391,217.150237 82.2015385,217.021538 85.49,216.56 L88.61,216.14 L88.61,214.1 C86.09,214.28 82.67,214.4 79.31,214.4 L78.1374781,214.395115 C75.1920069,214.370934 72.1805882,214.258824 70.01,214.1 L70.01,216.14 L73.13,216.56 C76.49,217.04 76.73,217.16 76.73,221.84 L76.728719,249.783331 C76.7063783,253.894579 76.3582353,254.078824 73.13,254.54 L70.01,254.96 L70.01,257 C72.3725,256.83125 75.57875,256.715234 78.6894189,256.701392 L79.31,256.7 C82.67,256.7 86.09,256.82 88.61,257 L88.61,254.96 L85.49,254.54 L84.9298414,254.459008 C82.1673814,254.04219 81.9075791,253.647051 81.8909729,249.773642 L81.89,235.76 L104.93,235.76 L104.928719,249.783331 C104.906378,253.894579 104.558235,254.078824 101.33,254.54 L98.21,254.96 L98.21,257 C100.5725,256.83125 103.77875,256.715234 106.889419,256.701392 L107.51,256.7 C110.87,256.7 114.29,256.82 116.81,257 L116.81,254.96 L113.69,254.54 L113.129841,254.459008 C110.367381,254.04219 110.107579,253.647051 110.090973,249.773642 L110.090973,221.319957 C110.108639,217.150237 110.401538,217.021538 113.69,216.56 L116.81,216.14 Z M166.85,254.96 L166.13,254.9 L165.609378,254.805778 C163.483156,254.395556 162.964311,253.835111 160.928222,248.242222 L158.860469,242.441324 C156.445018,235.600248 152.368919,223.928649 149.03,214.1 L144.77,214.1 C141.3575,223.865 137.899062,233.308437 134.515273,242.269531 L132.273205,248.175434 C130.009313,254.08129 129.605484,254.460645 126.95,254.84 L126.11,254.96 L126.11,257 L127.4132,256.89968 C129.0836,256.7768 130.562,256.7 132.77,256.7 C135.83,256.7 138.41,256.82 140.93,257 L140.93,254.96 L137.57,254.54 L137.149017,254.479044 C135.552367,254.211953 134.99,253.653846 134.99,252.38 C134.99,251.4025 135.320625,250.039271 136.140299,247.550998 L138.47,240.56 L152.87,240.56 L155.295724,247.974245 C156.045296,250.300064 156.35,251.4416 156.35,252.38 C156.35,253.7 155.81,254.18 154.07,254.42 L149.63,254.96 L149.63,257 C151.7675,256.83125 154.643281,256.715234 157.664082,256.701392 L158.27,256.7 C161.33,256.7 164.57,256.82 166.85,257 L166.85,254.96 Z M139.25,238.16 C141.23,232.04 143.51,225.26 145.67,219.02 L152.03,238.16 L139.25,238.16 Z M176.27,214.1 L176.27,216.14 L179.657589,216.615904 C182.703841,217.069988 182.87,217.516471 182.87,221.84 L182.867509,250.010226 C182.837612,253.782422 182.488824,253.971765 179.27,254.48 L176.15,254.96 L176.15,257 C178.55,256.82 181.91,256.7 185.33,256.7 L186.467252,256.704885 C189.34128,256.729066 192.399412,256.841176 194.57,257 L194.57,254.96 L191.45,254.54 L190.715308,254.426013 C188.113136,253.98512 187.91,253.4 187.91,249.26 L187.91,238.58 L194.51,238.58 L195.769876,240.839957 C198.714864,246.082313 200.505714,248.964286 202.25,251.66 C205.31,256.34 207.35,257.24 210.77,257.24 C211.91,257.24 214.07,257.06 215.09,256.82 L215.09,254.96 C212.09,254.96 209.93,252.98 207.23,249.5 C204.53,245.96 201.95,242.06 198.83,236.96 C205.37,235.04 207.65,229.34 207.65,225.26 C207.65,218.72 203.21,214.1 195.29,214.1 L176.27,214.1 Z M187.91,236.18 L187.91,216.74 L192.41,216.74 C199.61,216.74 202.25,222.02 202.25,226.4 C202.25,231.8 199.79,236.18 193.25,236.18 L187.91,236.18 Z M263.03,254.96 L262.31,254.9 L261.789378,254.805778 C259.663156,254.395556 259.144311,253.835111 257.108222,248.242222 L255.040469,242.441324 C252.625018,235.600248 248.548919,223.928649 245.21,214.1 L240.95,214.1 C237.5375,223.865 234.079062,233.308437 230.695273,242.269531 L228.453205,248.175434 C226.189313,254.08129 225.785484,254.460645 223.13,254.84 L222.29,254.96 L222.29,257 L223.5932,256.89968 C225.2636,256.7768 226.742,256.7 228.95,256.7 C232.01,256.7 234.59,256.82 237.11,257 L237.11,254.96 L233.75,254.54 L233.329017,254.479044 C231.732367,254.211953 231.17,253.653846 231.17,252.38 C231.17,251.4025 231.500625,250.039271 232.320299,247.550998 L234.65,240.56 L249.05,240.56 L251.475724,247.974245 C252.225296,250.300064 252.53,251.4416 252.53,252.38 C252.53,253.7 251.99,254.18 250.25,254.42 L245.81,254.96 L245.81,257 C247.9475,256.83125 250.823281,256.715234 253.844082,256.701392 L254.45,256.7 C257.51,256.7 260.75,256.82 263.03,257 L263.03,254.96 Z M235.43,238.16 C237.41,232.04 239.69,225.26 241.85,219.02 L248.21,238.16 L235.43,238.16 Z M312.11,216.02 L312.11,214.1 C309.71,214.28 306.83,214.4 304.49,214.4 L303.5087,214.39646 C300.6926,214.3754 298.97,214.262 296.81,214.1 L296.81,216.02 L298.97,216.26 C300.53,216.44 301.31,216.74 301.31,217.46 C301.31,218.24 300.29,219.5 298.19,221.9 C295.67,224.84 293.195938,227.642187 290.566836,230.467344 L289.43,231.68 C288.11,233.12 287.21,233.6 284.21,234.32 L284.210973,221.319957 C284.228286,217.233631 284.509933,217.028303 287.616265,216.587328 L290.93,216.14 L290.93,214.1 C288.41,214.28 284.99,214.4 281.63,214.4 L280.457478,214.395115 C277.512007,214.370934 274.500588,214.258824 272.33,214.1 L272.33,216.14 L275.45,216.56 C278.81,217.04 279.05,217.16 279.05,221.84 L279.048719,249.783331 C279.026378,253.894579 278.678235,254.078824 275.45,254.54 L272.33,254.96 L272.33,257 C274.6925,256.83125 277.89875,256.715234 281.009419,256.701392 L281.63,256.7 C284.99,256.7 288.41,256.82 290.93,257 L290.93,254.96 L287.81,254.54 L287.249841,254.459008 C284.487381,254.04219 284.227579,253.647051 284.210973,249.773642 L284.21,236.3 L287.69,236.3 L289.824957,239.390094 C293.549576,244.756467 297.002273,249.588636 298.97,251.96 L299.474419,252.554545 C302.773673,256.369252 304.847143,257.24 308.39,257.24 C309.59,257.24 311.63,257.06 312.59,256.88 L312.59,255.02 C309.59,255.02 307.25,253.52 304.37,250.22 L303.899327,249.66779 C300.695794,245.862629 294.768537,237.97122 291.23,233.12 L294.40574,229.82654 C296.90291,227.24201 299.706815,224.355815 301.944147,222.107172 L303.259991,220.794376 C307.272152,216.830336 307.9952,216.5912 311.21,216.14 L312.11,216.02 Z M364.85,216.14 L362.99,216.44 L362.615706,216.49787 C359.800404,216.946389 359.69,217.336327 359.69,221.48 L359.69,241.1 C359.69,251.54 354.11,257.66 342.89,257.66 C332.09,257.66 326.99,252.2 326.99,241.58 L326.989162,221.319718 C326.974688,217.479896 326.7375,217.0175 323.69,216.5 L321.29,216.14 L321.29,214.1 C323.51,214.28 326.87,214.4 329.93,214.4 L331.576454,214.39103 C334.636016,214.360064 338.4644,214.2512 340.43,214.1 L340.43,216.14 L335.99,216.74 C332.51,217.22 332.33,217.52 332.33,221.84 L332.33,241.1 C332.33,250.4 336.53,255.02 345.05,255.02 C351.47,255.02 356.33,250.88 356.33,241.16 L356.327496,220.76033 C356.297405,217.144844 355.945294,217.015294 352.67,216.62 L348.41,216.14 L348.41,214.1 C350.87,214.28 354.59,214.4 357.65,214.4 L358.612222,214.396081 C361.224903,214.374072 362.917368,214.261053 364.85,214.1 L364.85,216.14 Z"/>
        </g>
      </svg>
    </div>
  </body>
</html>

CSS

@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 48% 48%;
  width: 100%;
  height: 100vh;
  background-image: url(bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#sharaku,
#title {
  display: flex;
  justify-content: center;
  align-items: center;
}
#sharaku svg,
#title svg {
  height: auto;
}
#sharaku path,
#title path {
  fill: transparent;
}
#sharaku path:nth-child(1) {
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: line-01 16s ease forwards,
             fill-01 3.5s ease forwards 6s;
}
#sharaku path:nth-child(2) {
  stroke-dasharray: 624;
  stroke-dashoffset: 624;
  animation: line-01 16s ease forwards,
             fill-02 3.5s ease forwards 6s;
}
#sharaku path:nth-child(3) {
  stroke-dasharray: 522;
  stroke-dashoffset: 522;
  animation: line-01 16s ease forwards,
             fill-01 3.5s ease forwards 6s;
}
#sharaku path:nth-child(4) {
  stroke-dasharray: 394;
  stroke-dashoffset: 394;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(5) {
  stroke-dasharray: 232;
  stroke-dashoffset: 232;
  animation: line-01 16s ease forwards,
             fill-01 3.5s ease forwards 6s;
}
#sharaku path:nth-child(6) {
  stroke-dasharray: 212;
  stroke-dashoffset: 212;
  animation: line-01 16s ease forwards,
             fill-01 3.5s ease forwards 6s;
}
#sharaku path:nth-child(7) {
  stroke-dasharray: 857;
  stroke-dashoffset: 857;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(8) {
  stroke-dasharray: 759;
  stroke-dashoffset: 759;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(9) {
  stroke-dasharray: 167;
  stroke-dashoffset: 167;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(10) {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(11) {
  stroke-dasharray: 495;
  stroke-dashoffset: 495;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(12) {
  stroke-dasharray: 107;
  stroke-dashoffset: 107;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(13) {
  stroke-dasharray: 709;
  stroke-dashoffset: 709;
  animation: line-01 16s ease forwards;
}
#sharaku path:nth-child(14) {
  stroke-dasharray: 142;
  stroke-dashoffset: 142;
  animation: line-01 16s ease forwards;
}
#title path:nth-child(1) {
  stroke-dasharray: 3690;
  stroke-dashoffset: 3690;
  animation: line-02 25s ease forwards,
             fill-01 2s ease forwards 6s;
}
#title path:nth-child(2) {
  stroke-dasharray: 1845;
  stroke-dashoffset: 1845;
  animation: line-02 25s ease forwards,
             fill-03 2s ease forwards 6s;
}
@keyframes line-01 {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes line-02 {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fill-01 {
  from {
    fill: transparent;
  }
  to {
    fill: #25211E;
  }
}
@keyframes fill-02 {
  from {
    fill: transparent;
  }
  to {
    fill: #DC8767;
  }
}
@keyframes fill-03 {
  from {
    fill: transparent;
  }
  to {
    fill: #A46E4C;
  }
}