guillaumejuvenet - how this site is built ? / SVG path / self drawing - css

Question

http://www.guillaumejuvenet.com/
I'am impressed how this guy made his portfolio. Can anyone tell me how it is working?
I tried to make the path in illustrator and start draw it using stroke in CSS.
Everything works but I'am still far, far away from similar effect.
Here is the way that I used for it.
body {
background-color: #a3d5d3;
}
#check path{
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 116px; /* stroke-dasharray: 10px 5px; linia obrysowania*/
stroke-dashoffset: -116px; /*gdzie zaczynaja sie linie*/
fill: transparent;
transition: stroke-dashoffset 0.6s linear 0.5s, fill 1s ease;
}
#check.checked path {
fill: #fff;
stroke-dashoffset: 0px;
transition: stroke-dashoffset 0.8s linear, fill 2s ease 0.7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app ng-init="checked = false">
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 30 29" id="check" ng-class="checked ? 'checked' : ''">
<path style="stroke-dashoffset: {{range}}px" fill="#fff" d="M1.609,0.008c0.013,0.129,0.023,0.248,0.033,0.367
c0.103,1.153,0.203,2.307,0.307,3.459c0.132,1.465,0.265,2.933,0.395,4.397c0.11,1.232,0.219,2.467,0.328,3.7
c0.124,1.389,0.249,2.777,0.373,4.167c0.109,1.23,0.218,2.467,0.328,3.699c0.134,1.502,0.27,3.002,0.398,4.504
c0.008,0.098,0.039,0.139,0.135,0.164c3.177,0.896,6.352,1.793,9.525,2.688c0.08,0.021,0.176,0.021,0.256,0
c3.187-0.895,6.373-1.789,9.56-2.682c0.109-0.031,0.143-0.078,0.15-0.186c0.067-0.838,0.146-1.674,0.219-2.51
c0.082-0.922,0.166-1.846,0.248-2.77c0.074-0.826,0.146-1.65,0.221-2.477c0.084-0.924,0.166-1.848,0.248-2.771
c0.072-0.825,0.146-1.649,0.221-2.476c0.082-0.92,0.164-1.84,0.246-2.76c0.074-0.828,0.146-1.656,0.223-2.486
c0.082-0.92,0.164-1.84,0.246-2.76c0.074-0.838,0.148-1.678,0.228-2.517c0.021-0.25,0.042-0.502,0.065-0.76
C17.571,0.008,9.6,0.008,1.609,0.008z M20.831,7.965c-3.82,0-7.638,0-11.47,0c0.09,1.033,0.179,2.056,0.267,3.082
c3.649,0,7.287,0,10.938,0c-0.026,0.217-0.061,0.422-0.08,0.629c-0.051,0.521-0.1,1.043-0.146,1.562
c-0.084,0.943-0.166,1.892-0.248,2.835c-0.071,0.848-0.146,1.691-0.221,2.539c-0.047,0.535-0.101,1.07-0.146,1.604
c-0.008,0.084-0.062,0.086-0.11,0.102c-1.294,0.355-2.585,0.713-3.878,1.066c-0.709,0.197-1.416,0.396-2.126,0.592
c-0.032,0.01-0.076,0.004-0.11-0.008c-2.006-0.551-4.011-1.104-6.015-1.652c-0.092-0.023-0.094-0.08-0.1-0.146
c-0.051-0.645-0.102-1.283-0.15-1.927c-0.067-0.864-0.135-1.729-0.203-2.595c-0.002-0.021-0.002-0.049-0.004-0.08
c0.99,0,1.978,0,2.971,0c0.025,0.281,0.052,0.563,0.076,0.838c0.044,0.49,0.088,0.98,0.13,1.473
c0.004,0.057,0.021,0.078,0.075,0.094c1.076,0.287,2.15,0.578,3.228,0.867c0.038,0.012,0.084,0.006,0.123-0.004
c1.063-0.285,2.123-0.574,3.188-0.855c0.063-0.02,0.092-0.049,0.098-0.113c0.117-1.254,0.236-2.51,0.357-3.764
c0-0.004-0.002-0.008-0.004-0.022c-3.463,0-6.929,0-10.401,0C6.596,11.049,6.326,8.029,6.055,5c5.025,0,10.028,0,15.057,0
C21.021,5.988,20.925,6.971,20.831,7.965z"/>
</svg>
<button ng-click="checked = !checked">Toggle</button>
</div>
Any tips?