😅Draw svg on scroll Full (ok)

https://codepen.io/asprajapati/pen/zYxodGM

Example 1

<h1>SCROLL TO DRAW SVG</h1>
    
    <div class="empty-space"></div>
  
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 954 129" style="enable-background:new 0 0 954 129;" xml:space="preserve">

  <g id="Group" stroke="#fff" stroke-width="1"><!--CHANGE LINE COLOUR-->



	<path class="path" d="M0.108402 36.8661C-0.25031 37.9108 0.305794 39.0485 1.35049 39.4072L18.3749 45.2528C19.4196 45.6115 20.5573 45.0554 20.916 44.0107C21.2747 42.966 20.7186 41.8283 19.6739 41.4696L4.5411 36.2735L9.73715 21.1407C10.0959 20.096 9.53976 18.9584 8.49506 18.5996C7.45036 18.2409 6.31267 18.797 5.95395 19.8417L0.108402 36.8661ZM476.103 78.4463L475.146 80.2023L476.103 78.4463ZM2.87829 39.3125C4.46371 38.5375 6.11383 37.7591 7.82745 36.9792L6.17053 33.3385C4.42481 34.133 2.74143 34.9271 1.12171 35.7188L2.87829 39.3125ZM18.0612 32.6164C21.3409 31.3042 24.7935 29.9985 28.4131 28.7086L27.0703 24.9407C23.4045 26.2471 19.9041 27.5707 16.5753 28.9026L18.0612 32.6164ZM38.9383 25.1589C42.3659 24.0651 45.9164 22.99 49.5857 21.9398L48.485 18.0942C44.7778 19.1553 41.1888 20.242 37.7222 21.3482L38.9383 25.1589ZM60.3262 19.0283C63.8391 18.1276 67.4456 17.2519 71.1429 16.4058L70.2505 12.5066C66.5197 13.3604 62.8794 14.2442 59.3327 15.1536L60.3262 19.0283ZM82.0255 14.0574C85.5987 13.332 89.2468 12.6356 92.9676 11.9716L92.2648 8.03379C88.5131 8.70332 84.8339 9.40568 81.2297 10.1373L82.0255 14.0574ZM103.965 10.1394C107.586 9.57826 111.27 9.04878 115.013 8.55385L114.489 4.58836C110.716 5.08719 107.003 5.62088 103.352 6.18652L103.965 10.1394ZM126.068 7.21454C129.703 6.81398 133.389 6.4466 137.125 6.11486L136.771 2.13053C133.007 2.46479 129.292 2.83496 125.63 3.23861L126.068 7.21454ZM148.223 5.24646C151.891 4.99781 155.604 4.78401 159.36 4.6072L159.172 0.611629C155.389 0.789736 151.648 1.00511 147.952 1.25561L148.223 5.24646ZM170.527 4.19595C174.189 4.09841 177.89 4.03646 181.627 4.01196L181.601 0.0120417C177.837 0.0367175 174.109 0.0991176 170.42 0.197371L170.527 4.19595ZM192.761 4.05017C196.451 4.09957 200.173 4.18586 203.928 4.31071L204.061 0.312919C200.28 0.187181 196.531 0.100284 192.815 0.0505254L192.761 4.05017ZM215.05 4.79003C218.722 4.9844 222.423 5.216 226.151 5.48635L226.44 1.49683C222.686 1.22458 218.959 0.991354 215.261 0.795622L215.05 4.79003ZM237.28 6.40233C240.948 6.74021 244.642 7.11593 248.36 7.53088L248.803 3.55556C245.06 3.13774 241.341 2.75941 237.647 2.41919L237.28 6.40233ZM259.403 8.87084C263.07 9.35146 266.759 9.87057 270.469 10.4294L271.065 6.47406C267.329 5.91136 263.615 5.38869 259.923 4.90477L259.403 8.87084ZM281.448 12.19C285.083 12.8083 288.738 13.4652 292.411 14.1617L293.156 10.2317C289.458 9.53049 285.779 8.86918 282.119 8.24663L281.448 12.19ZM303.374 16.3481C306.973 17.1012 310.588 17.8927 314.22 18.7237L315.112 14.8245C311.456 13.9879 307.816 13.1911 304.193 12.4329L303.374 16.3481ZM325.083 21.3166C328.66 22.2058 332.252 23.1337 335.858 24.1012L336.895 20.2378C333.265 19.2639 329.649 18.3299 326.048 17.4347L325.083 21.3166ZM346.59 27.0868C350.145 28.1112 353.713 29.1744 357.293 30.2775L358.471 26.4548C354.867 25.3445 351.276 24.2743 347.697 23.2432L346.59 27.0868ZM367.883 33.6457C371.407 34.8019 374.943 35.9971 378.489 37.2321L379.804 33.4546C376.235 32.2116 372.677 31.0087 369.13 29.845L367.883 33.6457ZM388.932 40.9739C392.407 42.2542 395.892 43.5731 399.386 44.9315L400.835 41.2034C397.319 39.8364 393.812 38.509 390.314 37.2205L388.932 40.9739ZM409.71 49.0502C413.134 50.4511 416.566 51.8902 420.005 53.3683L421.584 49.6933C418.124 48.206 414.67 46.7578 411.225 45.3481L409.71 49.0502ZM430.194 57.8518C433.564 59.3696 436.941 60.9252 440.324 62.5193L442.029 58.9009C438.625 57.297 435.228 55.7318 431.837 54.2046L430.194 57.8518ZM450.363 67.3542C453.677 68.9854 456.998 70.6539 460.323 72.3604L462.149 68.8016C458.804 67.0849 455.464 65.4063 452.129 63.7652L450.363 67.3542ZM470.198 77.532C471.846 78.4127 473.495 79.3027 475.146 80.2023L477.06 76.6902C475.4 75.7853 473.741 74.8899 472.083 74.0041L470.198 77.532ZM475.146 80.2023C476.823 81.1165 478.499 82.0161 480.174 82.9013L482.043 79.3649C480.383 78.4876 478.722 77.5961 477.06 76.6902L475.146 80.2023ZM490.211 88.0415C493.607 89.7253 496.998 91.3508 500.383 92.9192L502.065 89.2897C498.711 87.7362 495.352 86.126 491.988 84.4578L490.211 88.0415ZM510.672 97.5177C514.156 99.0189 517.635 100.46 521.107 101.843L522.587 98.1273C519.15 96.758 515.705 95.3307 512.254 93.8441L510.672 97.5177ZM531.619 105.861C535.187 107.167 538.747 108.413 542.3 109.599L543.566 105.804C540.051 104.631 536.526 103.398 532.994 102.105L531.619 105.861ZM553.002 113.001C556.646 114.101 560.279 115.139 563.904 116.117L564.946 112.255C561.36 111.288 557.764 110.26 554.159 109.171L553.002 113.001ZM574.805 118.887C578.498 119.767 582.18 120.585 585.85 121.343L586.66 117.426C583.029 116.676 579.386 115.866 575.732 114.996L574.805 118.887ZM596.93 123.458C600.655 124.11 604.366 124.701 608.064 125.234L608.634 121.274C604.976 120.748 601.305 120.163 597.621 119.518L596.93 123.458ZM619.281 126.673C623.03 127.096 626.764 127.459 630.483 127.764L630.81 123.777C627.132 123.476 623.438 123.117 619.73 122.698L619.281 126.673ZM641.773 128.515C645.549 128.709 649.309 128.843 653.05 128.921L653.133 124.921C649.432 124.845 645.713 124.712 641.977 124.521L641.773 128.515ZM664.318 128.983C668.107 128.946 671.877 128.853 675.626 128.703L675.467 124.707C671.758 124.854 668.028 124.947 664.28 124.983L664.318 128.983ZM686.883 128.087C690.653 127.824 694.401 127.506 698.127 127.135L697.731 123.155C694.044 123.522 690.335 123.836 686.604 124.096L686.883 128.087ZM709.353 125.851C713.096 125.367 716.815 124.831 720.507 124.245L719.881 120.295C716.225 120.875 712.545 121.405 708.84 121.884L709.353 125.851ZM731.63 122.317C735.348 121.618 739.038 120.869 742.7 120.074L741.85 116.165C738.225 116.953 734.572 117.694 730.891 118.386L731.63 122.317ZM753.677 117.528C757.348 116.623 760.987 115.672 764.594 114.678L763.532 110.822C759.959 111.807 756.354 112.748 752.72 113.644L753.677 117.528ZM775.443 111.53C779.057 110.428 782.636 109.284 786.18 108.101L784.913 104.307C781.402 105.479 777.856 106.612 774.276 107.704L775.443 111.53ZM796.818 104.393C800.381 103.099 803.906 101.766 807.39 100.398L805.928 96.6743C802.475 98.0302 798.983 99.3508 795.453 100.633L796.818 104.393ZM817.837 96.1413C821.318 94.6711 824.757 93.1669 828.151 91.632L826.503 87.9873C823.139 89.5086 819.731 90.9993 816.281 92.4563L817.837 96.1413ZM838.375 86.855C841.795 85.2049 845.166 83.5255 848.488 81.8205L846.661 78.262C843.368 79.9522 840.027 81.6168 836.637 83.2524L838.375 86.855ZM858.457 76.5468C861.785 74.7331 865.059 72.8959 868.277 71.0392L866.277 67.5747C863.088 69.4152 859.843 71.2364 856.543 73.0343L858.457 76.5468ZM877.96 65.2915C881.216 63.3038 884.409 61.2991 887.535 59.2822L885.367 55.9209C882.268 57.9199 879.104 59.907 875.876 61.8773L877.96 65.2915ZM896.948 53.0405C900.106 50.8887 903.188 48.7285 906.192 46.5654L903.855 43.3192C900.878 45.4622 897.825 47.6027 894.696 49.7351L896.948 53.0405ZM915.259 39.8528C918.313 37.5282 921.274 35.2067 924.14 32.8953L921.629 29.7816C918.792 32.0695 915.86 34.368 912.836 36.6702L915.259 39.8528ZM932.822 25.6813C935.763 23.162 938.585 20.6633 941.285 18.1945L938.586 15.2425C935.919 17.6817 933.129 20.1517 930.22 22.6436L932.822 25.6813ZM949.496 10.4141C950.847 9.08627 952.158 7.77049 953.431 6.46833L950.57 3.67287C949.316 4.95559 948.023 6.25251 946.692 7.56209L949.496 10.4141Z"/>

</g>
</svg>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

body {
  background: black;
  color: red;
}

h1 {
  text-align: center;
  padding-bottom: 40px;
  font-weight: normal;
  font-size: 2.4em;
  
}

svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  max-width: 640px;
}

.path {
  stroke-dashoffset: 4000;
  stroke-dasharray: 4000;
}

.empty-space {
  width: 100%;
  height: 3000px;
}

$(document).ready(function() {
  var $dashOffset = $(".path").css("stroke-dashoffset");

  $(window).on('scroll', function () {     
    var $percentageComplete = (($(window).scrollTop()/($("html").height()-$(window).height()))*100);    
    var $newUnit = parseInt($dashOffset, 10); 
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    $(".path").css({
      strokeDashoffset: $newUnit - $offsetUnit,
      strokeDasharray: 129,
    });
    $("#Group").css({
      fill: "rgba(241,42,76,"+$offsetUnit+")"
    });
  });

});

Example 2

<h1>SCROLL TO DRAW SVG</h1>
    
    <div class="empty-space"></div>
  
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 795 300" style="enable-background:new 0 0 795 300;" xml:space="preserve">

  <g id="Group" stroke="#e62b25" stroke-width="3" fill="none"><!--CHANGE LINE COLOUR-->



	<path class="path" d="M0.108402 36.8661C-0.25031 37.9108 0.305794 39.0485 1.35049 39.4072L18.3749 45.2528C19.4196 45.6115 20.5573 45.0554 20.916 44.0107C21.2747 42.966 20.7186 41.8283 19.6739 41.4696L4.5411 36.2735L9.73715 21.1407C10.0959 20.096 9.53976 18.9584 8.49506 18.5996C7.45036 18.2409 6.31267 18.797 5.95395 19.8417L0.108402 36.8661ZM476.103 78.4463L475.146 80.2023L476.103 78.4463ZM2.87829 39.3125C4.46371 38.5375 6.11383 37.7591 7.82745 36.9792L6.17053 33.3385C4.42481 34.133 2.74143 34.9271 1.12171 35.7188L2.87829 39.3125ZM18.0612 32.6164C21.3409 31.3042 24.7935 29.9985 28.4131 28.7086L27.0703 24.9407C23.4045 26.2471 19.9041 27.5707 16.5753 28.9026L18.0612 32.6164ZM38.9383 25.1589C42.3659 24.0651 45.9164 22.99 49.5857 21.9398L48.485 18.0942C44.7778 19.1553 41.1888 20.242 37.7222 21.3482L38.9383 25.1589ZM60.3262 19.0283C63.8391 18.1276 67.4456 17.2519 71.1429 16.4058L70.2505 12.5066C66.5197 13.3604 62.8794 14.2442 59.3327 15.1536L60.3262 19.0283ZM82.0255 14.0574C85.5987 13.332 89.2468 12.6356 92.9676 11.9716L92.2648 8.03379C88.5131 8.70332 84.8339 9.40568 81.2297 10.1373L82.0255 14.0574ZM103.965 10.1394C107.586 9.57826 111.27 9.04878 115.013 8.55385L114.489 4.58836C110.716 5.08719 107.003 5.62088 103.352 6.18652L103.965 10.1394ZM126.068 7.21454C129.703 6.81398 133.389 6.4466 137.125 6.11486L136.771 2.13053C133.007 2.46479 129.292 2.83496 125.63 3.23861L126.068 7.21454ZM148.223 5.24646C151.891 4.99781 155.604 4.78401 159.36 4.6072L159.172 0.611629C155.389 0.789736 151.648 1.00511 147.952 1.25561L148.223 5.24646ZM170.527 4.19595C174.189 4.09841 177.89 4.03646 181.627 4.01196L181.601 0.0120417C177.837 0.0367175 174.109 0.0991176 170.42 0.197371L170.527 4.19595ZM192.761 4.05017C196.451 4.09957 200.173 4.18586 203.928 4.31071L204.061 0.312919C200.28 0.187181 196.531 0.100284 192.815 0.0505254L192.761 4.05017ZM215.05 4.79003C218.722 4.9844 222.423 5.216 226.151 5.48635L226.44 1.49683C222.686 1.22458 218.959 0.991354 215.261 0.795622L215.05 4.79003ZM237.28 6.40233C240.948 6.74021 244.642 7.11593 248.36 7.53088L248.803 3.55556C245.06 3.13774 241.341 2.75941 237.647 2.41919L237.28 6.40233ZM259.403 8.87084C263.07 9.35146 266.759 9.87057 270.469 10.4294L271.065 6.47406C267.329 5.91136 263.615 5.38869 259.923 4.90477L259.403 8.87084ZM281.448 12.19C285.083 12.8083 288.738 13.4652 292.411 14.1617L293.156 10.2317C289.458 9.53049 285.779 8.86918 282.119 8.24663L281.448 12.19ZM303.374 16.3481C306.973 17.1012 310.588 17.8927 314.22 18.7237L315.112 14.8245C311.456 13.9879 307.816 13.1911 304.193 12.4329L303.374 16.3481ZM325.083 21.3166C328.66 22.2058 332.252 23.1337 335.858 24.1012L336.895 20.2378C333.265 19.2639 329.649 18.3299 326.048 17.4347L325.083 21.3166ZM346.59 27.0868C350.145 28.1112 353.713 29.1744 357.293 30.2775L358.471 26.4548C354.867 25.3445 351.276 24.2743 347.697 23.2432L346.59 27.0868ZM367.883 33.6457C371.407 34.8019 374.943 35.9971 378.489 37.2321L379.804 33.4546C376.235 32.2116 372.677 31.0087 369.13 29.845L367.883 33.6457ZM388.932 40.9739C392.407 42.2542 395.892 43.5731 399.386 44.9315L400.835 41.2034C397.319 39.8364 393.812 38.509 390.314 37.2205L388.932 40.9739ZM409.71 49.0502C413.134 50.4511 416.566 51.8902 420.005 53.3683L421.584 49.6933C418.124 48.206 414.67 46.7578 411.225 45.3481L409.71 49.0502ZM430.194 57.8518C433.564 59.3696 436.941 60.9252 440.324 62.5193L442.029 58.9009C438.625 57.297 435.228 55.7318 431.837 54.2046L430.194 57.8518ZM450.363 67.3542C453.677 68.9854 456.998 70.6539 460.323 72.3604L462.149 68.8016C458.804 67.0849 455.464 65.4063 452.129 63.7652L450.363 67.3542ZM470.198 77.532C471.846 78.4127 473.495 79.3027 475.146 80.2023L477.06 76.6902C475.4 75.7853 473.741 74.8899 472.083 74.0041L470.198 77.532ZM475.146 80.2023C476.823 81.1165 478.499 82.0161 480.174 82.9013L482.043 79.3649C480.383 78.4876 478.722 77.5961 477.06 76.6902L475.146 80.2023ZM490.211 88.0415C493.607 89.7253 496.998 91.3508 500.383 92.9192L502.065 89.2897C498.711 87.7362 495.352 86.126 491.988 84.4578L490.211 88.0415ZM510.672 97.5177C514.156 99.0189 517.635 100.46 521.107 101.843L522.587 98.1273C519.15 96.758 515.705 95.3307 512.254 93.8441L510.672 97.5177ZM531.619 105.861C535.187 107.167 538.747 108.413 542.3 109.599L543.566 105.804C540.051 104.631 536.526 103.398 532.994 102.105L531.619 105.861ZM553.002 113.001C556.646 114.101 560.279 115.139 563.904 116.117L564.946 112.255C561.36 111.288 557.764 110.26 554.159 109.171L553.002 113.001ZM574.805 118.887C578.498 119.767 582.18 120.585 585.85 121.343L586.66 117.426C583.029 116.676 579.386 115.866 575.732 114.996L574.805 118.887ZM596.93 123.458C600.655 124.11 604.366 124.701 608.064 125.234L608.634 121.274C604.976 120.748 601.305 120.163 597.621 119.518L596.93 123.458ZM619.281 126.673C623.03 127.096 626.764 127.459 630.483 127.764L630.81 123.777C627.132 123.476 623.438 123.117 619.73 122.698L619.281 126.673ZM641.773 128.515C645.549 128.709 649.309 128.843 653.05 128.921L653.133 124.921C649.432 124.845 645.713 124.712 641.977 124.521L641.773 128.515ZM664.318 128.983C668.107 128.946 671.877 128.853 675.626 128.703L675.467 124.707C671.758 124.854 668.028 124.947 664.28 124.983L664.318 128.983ZM686.883 128.087C690.653 127.824 694.401 127.506 698.127 127.135L697.731 123.155C694.044 123.522 690.335 123.836 686.604 124.096L686.883 128.087ZM709.353 125.851C713.096 125.367 716.815 124.831 720.507 124.245L719.881 120.295C716.225 120.875 712.545 121.405 708.84 121.884L709.353 125.851ZM731.63 122.317C735.348 121.618 739.038 120.869 742.7 120.074L741.85 116.165C738.225 116.953 734.572 117.694 730.891 118.386L731.63 122.317ZM753.677 117.528C757.348 116.623 760.987 115.672 764.594 114.678L763.532 110.822C759.959 111.807 756.354 112.748 752.72 113.644L753.677 117.528ZM775.443 111.53C779.057 110.428 782.636 109.284 786.18 108.101L784.913 104.307C781.402 105.479 777.856 106.612 774.276 107.704L775.443 111.53ZM796.818 104.393C800.381 103.099 803.906 101.766 807.39 100.398L805.928 96.6743C802.475 98.0302 798.983 99.3508 795.453 100.633L796.818 104.393ZM817.837 96.1413C821.318 94.6711 824.757 93.1669 828.151 91.632L826.503 87.9873C823.139 89.5086 819.731 90.9993 816.281 92.4563L817.837 96.1413ZM838.375 86.855C841.795 85.2049 845.166 83.5255 848.488 81.8205L846.661 78.262C843.368 79.9522 840.027 81.6168 836.637 83.2524L838.375 86.855ZM858.457 76.5468C861.785 74.7331 865.059 72.8959 868.277 71.0392L866.277 67.5747C863.088 69.4152 859.843 71.2364 856.543 73.0343L858.457 76.5468ZM877.96 65.2915C881.216 63.3038 884.409 61.2991 887.535 59.2822L885.367 55.9209C882.268 57.9199 879.104 59.907 875.876 61.8773L877.96 65.2915ZM896.948 53.0405C900.106 50.8887 903.188 48.7285 906.192 46.5654L903.855 43.3192C900.878 45.4622 897.825 47.6027 894.696 49.7351L896.948 53.0405ZM915.259 39.8528C918.313 37.5282 921.274 35.2067 924.14 32.8953L921.629 29.7816C918.792 32.0695 915.86 34.368 912.836 36.6702L915.259 39.8528ZM932.822 25.6813C935.763 23.162 938.585 20.6633 941.285 18.1945L938.586 15.2425C935.919 17.6817 933.129 20.1517 930.22 22.6436L932.822 25.6813ZM949.496 10.4141C950.847 9.08627 952.158 7.77049 953.431 6.46833L950.57 3.67287C949.316 4.95559 948.023 6.25251 946.692 7.56209L949.496 10.4141Z"/>

</g>
</svg>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

body {
  background: black;
  color: red;
}

h1 {
  text-align: center;
  padding-bottom: 40px;
  font-weight: normal;
  font-size: 2.4em;
  
}

svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  max-width: 640px;
}

.path {
  stroke-dashoffset: 4000;
  stroke-dasharray: 4000;
}

.empty-space {
  width: 100%;
  height: 3000px;
}

$(document).ready(function() {
  var $dashOffset = $(".path").css("stroke-dashoffset");

  $(window).on('scroll', function () {     
    var $percentageComplete = (($(window).scrollTop()/($("html").height()-$(window).height()))*100);    
    var $newUnit = parseInt($dashOffset, 10); 
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    $(".path").css({
      strokeDashoffset: $newUnit - $offsetUnit,
      strokeDasharray: 300
    });
  });

});