Scrollsnapping

<?xml version="1.0" encoding="UTF-8"?> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>the-modern-web/scrollsnapping</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="the-modern-web/scrollsnapping" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#1B2027" stroke-width="2"> <rect id="mask" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> <g id="scroll" transform="translate(15.000000, 11.000000)" fill-rule="nonzero"> <polygon id="Shape" fill="#EFAD7D" points="29.4273734 7.44766147 38.8349457 7.44766147 38.8349457 10.5835189 29.4273734 10.5835189"> </polygon> <path d="M41.9708032,7.44766147 C41.9708032,9.1794265 40.5667108,10.5835189 38.8349457,10.5835189 C37.1027979,10.5835189 35.6990883,9.1794265 35.6990883,7.44766147 C35.6990883,5.71589644 37.1027979,4.31180401 38.8349457,4.31180401 C40.5667108,4.31180401 41.9708032,5.71589644 41.9708032,7.44766147 Z" id="Shape" fill="#656D78"> </path> <path d="M35.6990883,22.3429844 L35.6990883,42.7275891 L34.6337695,42.7275891 C34.0856069,42.2406737 33.3548511,41.9436247 32.5632308,41.9436247 L9.04429986,41.9436247 L9.04429986,6.27171492 C9.04429986,5.18917038 9.92319741,4.31180401 11.0042108,4.31180401 L38.8349457,4.31180401 C37.1031807,4.31180401 35.6990883,5.71436526 35.6990883,7.44766147 L35.6990883,22.3429844 Z" id="Shape" fill="#F2C397"> </path> <path d="M29.4273734,43.5100223 C29.4273734,45.1085746 30.6274359,46.4341941 32.1789045,46.6217636 L32.1712486,46.6458797 L5.9084424,46.6458797 C4.17667736,46.6458797 2.77258494,45.2417873 2.77258494,43.5100223 C2.77258494,41.7767261 4.17667736,40.3741648 5.9084424,40.3741648 L32.5632308,40.3741648 C30.8314658,40.3741648 29.4273734,41.7767261 29.4273734,43.5100223 Z" id="Shape" fill="#FFD2A6"> </path> <path d="M41.9708032,6.6636971 C42.4025961,6.6636971 42.7547676,7.0158686 42.7547676,7.44766147 C42.7547676,7.87792316 42.4025961,8.23162584 41.9708032,8.23162584 L38.8349457,8.23162584 C38.4043013,8.23162584 38.0509814,7.87792316 38.0509814,7.44766147 C38.0509814,7.0158686 38.4043013,6.6636971 38.8349457,6.6636971 L41.9708032,6.6636971 Z" id="Shape" fill="#FFCE54"> </path> <path d="M2.01273659,14.8953229 C1.79645738,14.8953229 1.6169265,14.71962 1.6169265,14.5033408 C1.6169265,14.2870616 1.78765317,14.1113586 2.00431514,14.1113586 L2.01273659,14.1113586 C2.22825025,14.1113586 2.40471877,14.2870616 2.40471877,14.5033408 C2.40471877,14.71962 2.22825025,14.8953229 2.01273659,14.8953229 Z" id="Shape" fill="#A0D468"> </path> <path d="M25.5331988,0.783964365 C25.3169195,0.783964365 25.1373886,0.60826139 25.1373886,0.391982183 C25.1373886,0.175702976 25.3084981,0 25.5247773,0 L25.5331988,0 C25.7490952,0 25.925181,0.175702976 25.925181,0.391982183 C25.925181,0.60826139 25.7490952,0.783964365 25.5331988,0.783964365 Z" id="Shape" fill="#ED5565"> </path> <path d="M0.444807857,38.4142539 C0.22852865,38.4142539 0.0489977728,38.2385509 0.0489977728,38.0222717 C0.0489977728,37.8059925 0.219724437,37.6302895 0.436386414,37.6302895 L0.444807857,37.6302895 C0.660321523,37.6302895 0.83679004,37.8059925 0.83679004,38.0222717 C0.83679004,38.2385509 0.660321523,38.4142539 0.444807857,38.4142539 Z" id="Shape" fill="#A0D468"> </path> <path d="M40.4269905,32.142539 C40.2107113,32.142539 40.0311804,31.966836 40.0311804,31.7505568 C40.0311804,31.5342776 40.2030554,31.3585746 40.418569,31.3585746 L40.4269905,31.3585746 C40.6425042,31.3585746 40.8189727,31.5342776 40.8189727,31.7505568 C40.8189727,31.966836 40.6425042,32.142539 40.4269905,32.142539 Z" id="Shape" fill="#AC92EC"> </path> <path d="M42.7788836,43.9020045 C42.5626044,43.9020045 42.3830735,43.7263015 42.3830735,43.5100223 C42.3830735,43.2937431 42.5549485,43.1180401 42.7704621,43.1180401 L42.7788836,43.1180401 C42.9943972,43.1180401 43.1708658,43.2937431 43.1708658,43.5100223 C43.1708658,43.7263015 42.9943972,43.9020045 42.7788836,43.9020045 Z" id="Shape" fill="#FFCE54"> </path> <path d="M14.5576977,50.1737194 C14.3414184,50.1737194 14.1618875,49.9980164 14.1618875,49.7817372 C14.1618875,49.565458 14.3337625,49.389755 14.5492762,49.389755 L14.5576977,49.389755 C14.773594,49.389755 14.9496799,49.565458 14.9496799,49.7817372 C14.9496799,49.9980164 14.773594,50.1737194 14.5576977,50.1737194 Z" id="Shape" fill="#ED5565"> </path> <path d="M42.7547676,21.1670379 C42.5384884,21.1670379 42.3627854,20.9913349 42.3627854,20.7750557 L42.3627854,17.6391982 C42.3627854,17.422919 42.5384884,17.247216 42.7547676,17.247216 C42.9710468,17.247216 43.1467497,17.422919 43.1467497,17.6391982 L43.1467497,20.7750557 C43.1467497,20.9913349 42.9718123,21.1670379 42.7547676,21.1670379 Z" id="Shape" fill="#A0D468"> </path> <path d="M43.5387319,19.5991091 L41.9708032,19.5991091 C41.754524,19.5991091 41.578821,19.4234062 41.578821,19.2071269 C41.578821,18.9908477 41.754524,18.8151448 41.9708032,18.8151448 L43.5387319,18.8151448 C43.7550111,18.8151448 43.9307141,18.9908477 43.9307141,19.2071269 C43.9307141,19.4234062 43.7557767,19.5991091 43.5387319,19.5991091 Z" id="Shape" fill="#A0D468"> </path> <path d="M5.9084424,4.70378619 C5.69216319,4.70378619 5.51646021,4.52808322 5.51646021,4.31180401 L5.51646021,1.17594655 C5.51646021,0.959667341 5.69216319,0.783964365 5.9084424,0.783964365 C6.1247216,0.783964365 6.30042458,0.959667341 6.30042458,1.17594655 L6.30042458,4.31180401 C6.30042458,4.52808322 6.12548714,4.70378619 5.9084424,4.70378619 Z" id="Shape" fill="#FFCE54"> </path> <path d="M6.69240676,3.13585746 L5.12447803,3.13585746 C4.90819882,3.13585746 4.73249585,2.96015449 4.73249585,2.74387528 C4.73249585,2.52759607 4.90819882,2.3518931 5.12447803,2.3518931 L6.69240676,2.3518931 C6.90868597,2.3518931 7.08438894,2.52759607 7.08438894,2.74387528 C7.08438894,2.96015449 6.90945151,3.13585746 6.69240676,3.13585746 Z" id="Shape" fill="#FFCE54"> </path> <path d="M4.34051367,27.4387528 C4.12423446,27.4387528 3.94853148,27.2630498 3.94853148,27.0467706 L3.94853148,23.9109131 C3.94853148,23.6946339 4.12423446,23.518931 4.34051367,23.518931 C4.55679287,23.518931 4.73249585,23.6946339 4.73249585,23.9109131 L4.73249585,27.0467706 C4.73249585,27.2630498 4.55755841,27.4387528 4.34051367,27.4387528 Z" id="Shape" fill="#AC92EC"> </path> <path d="M5.12447803,25.8708241 L3.5565493,25.8708241 C3.34027009,25.8708241 3.16456712,25.6951211 3.16456712,25.4788419 C3.16456712,25.2625627 3.34027009,25.0868597 3.5565493,25.0868597 L5.12447803,25.0868597 C5.34075724,25.0868597 5.51646021,25.2625627 5.51646021,25.4788419 C5.51646021,25.6951211 5.34152278,25.8708241 5.12447803,25.8708241 Z" id="Shape" fill="#AC92EC"> </path> <g id="Group" transform="translate(12.543430, 10.191537)" fill="#FFD2A6"> <path d="M19.2358366,0.783964365 L0.42069184,0.783964365 C0.204412633,0.783964365 0.028709657,0.60826139 0.028709657,0.391982183 C0.028709657,0.175702976 0.204412633,0 0.42069184,0 L19.2358366,0 C19.4521158,0 19.6278188,0.175702976 19.6278188,0.391982183 C19.6278188,0.60826139 19.4528814,0.783964365 19.2358366,0.783964365 Z" id="Shape"> </path> <path d="M19.2358366,5.48775056 L0.42069184,5.48775056 C0.204412633,5.48775056 0.028709657,5.31204758 0.028709657,5.09576837 C0.028709657,4.87948917 0.204412633,4.70378619 0.42069184,4.70378619 L19.2358366,4.70378619 C19.4521158,4.70378619 19.6278188,4.87948917 19.6278188,5.09576837 C19.6278188,5.31204758 19.4528814,5.48775056 19.2358366,5.48775056 Z" id="Shape"> </path> <path d="M19.2358366,10.1915367 L0.42069184,10.1915367 C0.204412633,10.1915367 0.028709657,10.0158338 0.028709657,9.79955457 C0.028709657,9.58327536 0.204412633,9.40757238 0.42069184,9.40757238 L19.2358366,9.40757238 C19.4521158,9.40757238 19.6278188,9.58327536 19.6278188,9.79955457 C19.6278188,10.0158338 19.4528814,10.1915367 19.2358366,10.1915367 Z" id="Shape"> </path> <path d="M19.2358366,14.8953229 L0.42069184,14.8953229 C0.204412633,14.8953229 0.028709657,14.71962 0.028709657,14.5033408 C0.028709657,14.2870616 0.204412633,14.1113586 0.42069184,14.1113586 L19.2358366,14.1113586 C19.4521158,14.1113586 19.6278188,14.2870616 19.6278188,14.5033408 C19.6278188,14.71962 19.4528814,14.8953229 19.2358366,14.8953229 Z" id="Shape"> </path> <path d="M19.2358366,19.5991091 L0.42069184,19.5991091 C0.204412633,19.5991091 0.028709657,19.4234062 0.028709657,19.2071269 C0.028709657,18.9908477 0.204412633,18.8151448 0.42069184,18.8151448 L19.2358366,18.8151448 C19.4521158,18.8151448 19.6278188,18.9908477 19.6278188,19.2071269 C19.6278188,19.4234062 19.4528814,19.5991091 19.2358366,19.5991091 Z" id="Shape"> </path> <path d="M19.2358366,24.3028953 L0.42069184,24.3028953 C0.204412633,24.3028953 0.028709657,24.1271923 0.028709657,23.9109131 C0.028709657,23.6946339 0.204412633,23.518931 0.42069184,23.518931 L19.2358366,23.518931 C19.4521158,23.518931 19.6278188,23.6946339 19.6278188,23.9109131 C19.6278188,24.1271923 19.4528814,24.3028953 19.2358366,24.3028953 Z" id="Shape"> </path> </g> <path d="M35.6990883,43.5100223 C35.6990883,45.2417873 34.2949958,46.6458797 32.5632308,46.6458797 C30.831083,46.6458797 29.4273734,45.2417873 29.4273734,43.5100223 C29.4273734,41.7782572 30.831083,40.3741648 32.5632308,40.3741648 C34.2949958,40.3741648 35.6990883,41.7782572 35.6990883,43.5100223 Z" id="Shape" fill="#656D78"> </path> <path d="M35.6990883,42.7260579 C36.1308811,42.7260579 36.4830526,43.0782294 36.4830526,43.5100223 C36.4830526,43.940284 36.1308811,44.2939866 35.6990883,44.2939866 L32.5632308,44.2939866 C32.1325864,44.2939866 31.7792664,43.940284 31.7792664,43.5100223 C31.7792664,43.0782294 32.1325864,42.7260579 32.5632308,42.7260579 L35.6990883,42.7260579 Z" id="Shape" fill="#FFCE54"> </path> </g> </g> </svg>