Обсервер пересечения

<?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/intersection-observer</title> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="4" y="0" width="69" height="69" rx="14"> </rect> </defs> <g id="the-modern-web/intersection-observer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(-2.000000, 2.000000)"> <rect id="mask" stroke="#32393F" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" x="3" y="-1" width="71" height="71" rx="14"> </rect> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"> </use> </mask> <rect stroke="#32393F" stroke-width="2" x="3" y="-1" width="71" height="71" rx="14"> </rect> <rect id="Rectangle" fill="#9CDD05" fill-rule="nonzero" mask="url(#mask-2)" x="0" y="36" width="76" height="35"> </rect> <g id="clouds" mask="url(#mask-2)" fill-rule="nonzero"> <g transform="translate(40.000000, 7.000000)" id="Shape"> <path d="M7.92025,6.70667969 L9.86283594,6.70667969 C10.5885,5.37539844 11.8286797,4.36596875 13.3171797,3.94636328 C13.0177227,3.21927734 12.3026211,2.70745313 11.4677773,2.70745313 C11.2590664,2.70745313 11.0580234,2.73959766 10.8690664,2.79875781 C10.870082,2.76839063 10.8714023,2.73807422 10.8714023,2.70745313 C10.8714023,1.22240625 9.66717578,0.01828125 8.18202734,0.01828125 C6.90117187,0.01828125 5.83039844,0.91365625 5.55958203,2.11244922 C5.39870703,2.05882422 5.22706641,2.02947266 5.04826562,2.02947266 C4.49810156,2.02947266 4.01242969,2.30491016 3.72119922,2.72532812 C3.55869922,2.68343359 3.38807422,2.66073437 3.21242187,2.66073437 C2.09523437,2.66073437 1.18960156,3.56641797 1.18960156,4.68365625 C1.18960156,5.80069141 2.09528516,6.70657813 3.21242187,6.70657813 L6.44652734,6.70657813" fill="#9FDEF7"> </path> <path d="M18.968625,5.48224219 C17.9292344,4.37048828 16.4495195,3.67554687 14.8075586,3.67554687 C12.0954336,3.67554687 9.82764453,5.57197266 9.25401953,8.11078125 C8.91358203,7.99723437 8.5499375,7.93477344 8.17146484,7.93477344 C7.0061875,7.93477344 5.97791797,8.51825 5.36117969,9.40854687 C5.01693359,9.31962891 4.65592969,9.27184375 4.28380469,9.27184375 C1.91790625,9.27184375 0,11.18975 0,13.5556484 C0,15.9214453 1.91790625,17.8396055 4.28380469,17.8396055 L9.00701953,17.8396055 C9.01697266,16.3834531 10.1998203,15.2061914 11.6581055,15.2061914 C11.9346602,15.2061914 12.2013125,15.2485937 12.4519687,15.3271523 C12.4508008,15.2870352 12.4489727,15.2468164 12.4489727,15.2061914 C12.4489727,13.2365391 14.0456367,11.6398242 16.0152383,11.6398242 C17.7135156,11.6398242 19.1337148,12.8274453 19.4928906,14.4171016 C19.7060195,14.345957 19.9335703,14.3069062 20.1706172,14.3069062 C20.9002422,14.3069062 21.5443008,14.6722266 21.9304414,15.2298555 C22.1460078,15.1740977 22.3720352,15.1441367 22.6050195,15.1441367 C23.5815937,15.1441367 24.4360391,15.6661172 24.9051563,16.4460156 C25.5854219,15.6948086 25.9998477,14.6984297 25.9998477,13.6053125 C25.9998477,11.2665312 24.104082,9.37096875 21.7655039,9.37096875 C21.3239102,9.37096875 20.8981602,9.43866016 20.4978516,9.56408984 C20.4999336,9.49995312 20.5027266,9.43566406 20.5027266,9.37096875 C20.5027266,8.41465625 20.2670508,7.51344141 19.8504414,6.72206641" fill="#BEEAFC"> </path> <path d="M4.54197656,9.27976562 C4.4565625,9.27458594 4.37053906,9.27179297 4.28380469,9.27179297 C1.91790625,9.27174219 0,11.1896992 0,13.5555977 C0,15.9213945 1.91790625,17.8395547 4.28380469,17.8395547 L9.00701953,17.8395547 C9.01011719,17.382625 9.12889453,16.9532187 9.33526953,16.5790117 C6.99989062,14.7817109 5.27926953,12.2258398 4.54197656,9.27976562 Z" fill="#AEE4FF"> </path> <path d="M4.14446094,6.04428906 C4.14446094,4.6548125 4.35814844,3.31540625 4.75378516,2.05653906 C4.32712109,2.13530078 3.95926172,2.38189453 3.72125,2.72537891 C3.55875,2.68348437 3.388125,2.66078516 3.21247266,2.66078516 C2.09528516,2.66078516 1.18965234,3.56646875 1.18965234,4.68370703 C1.18965234,5.80074219 2.09533594,6.70662891 3.21247266,6.70662891 L4.16096484,6.70662891 C4.15019922,6.48715234 4.14446094,6.26640625 4.14446094,6.04428906 Z" fill="#83D4ED"> </path> <path d="M22.6050703,15.030793 C22.3720859,15.030793 22.145957,15.0606523 21.9304922,15.1165117 C21.5443516,14.558832 20.900293,14.1935625 20.170668,14.1935625 C19.9336211,14.1935625 19.7060703,14.2326133 19.4929414,14.3037578 C19.1337148,12.7140508 17.7135664,11.5264805 16.0152891,11.5264805 C14.0456875,11.5264805 12.4490234,13.1231953 12.4490234,15.0928477 C12.4490234,15.1334727 12.4508008,15.1736914 12.4520195,15.2138086 C12.2013633,15.13525 11.9347109,15.0928477 11.6581562,15.0928477 C10.1938789,15.0928477 9.00676563,16.2797578 9.00676563,17.7444414 C9.00676563,19.2087188 10.1939297,20.3957305 11.6581562,20.3957305 L19.5967383,20.3957305 L21.0700547,20.3957305 L22.6051719,20.3957305 C24.0867148,20.3957305 25.287793,19.1947031 25.287793,17.7132617 C25.2876914,16.2317187 24.0866133,15.030793 22.6050703,15.030793 Z" fill="#E4F2F9"> </path> <path d="M14.4857578,14.3469727 C14.4857578,13.3898984 14.6888828,12.4803555 15.0537461,11.6585625 C13.5513828,12.0783711 12.4489219,13.4563711 12.4489219,15.0927461 C12.4489219,15.1333711 12.4506992,15.1735898 12.451918,15.213707 C12.2012617,15.1351484 11.9346094,15.0927461 11.6580547,15.0927461 C10.1937773,15.0927461 9.00666406,16.2796562 9.00666406,17.7443398 C9.00666406,19.2086172 10.1938281,20.3956289 11.6580547,20.3956289 L18.3955586,20.3956289 C16.0905469,19.357 14.4857578,17.0393945 14.4857578,14.3469727 Z" fill="#D7EDF9"> </path> </g> </g> <g id="golf" mask="url(#mask-2)" fill-rule="nonzero"> <g transform="translate(15.000000, 7.000000)" id="Shape"> <path d="M21.2928177,43.3535912 C21.2928177,44.6053944 20.632282,45.613628 19.5543278,46.4131523 C17.5722683,47.8736648 14.1301489,48.5690608 10.8618785,48.5690608 L9.12338858,44.9530924 L7.38489871,48.2910834 C3.62948892,47.6998158 0.430939227,46.1003146 0.430939227,43.3535912 C0.430939227,39.9114717 5.22899024,38.5206798 9.12338858,38.2078422 C9.71420347,38.1729819 10.3054712,38.1381215 10.8618785,38.1381215 C14.1301489,38.1381215 17.5722683,38.8335175 19.5543278,40.29403 C20.632282,41.0935543 21.2928177,42.1017879 21.2928177,43.3535912 Z" fill="#575F64"> </path> <path d="M21.2928177,43.3535912 C21.2928177,44.6053944 20.6381797,45.613628 19.56985,46.4131523 C17.6054875,47.8736648 14.1941013,48.5690608 10.9550118,48.5690608 L9.2320442,44.9530924 L9.2320442,38.2078422 C9.81758395,38.1729819 10.4035725,38.1381215 10.9550118,38.1381215 C14.1941013,38.1381215 17.6054875,38.8335175 19.56985,40.29403 C20.6381797,41.0935543 21.2928177,42.1017879 21.2928177,43.3535912 Z" fill="#32393F"> </path> <polygon fill="#F03800" points="9.8839779 3.58563536 9.8839779 20.5359116 31.0718232 12.0607735"> </polygon> <path d="M33.3535912,48.5690608 C30.4778392,48.5690608 28.1381215,46.2293432 28.1381215,43.3535912 C28.1381215,40.4778392 30.4778392,38.1381215 33.3535912,38.1381215 C36.2293432,38.1381215 38.5690608,40.4778392 38.5690608,43.3535912 C38.5690608,46.2293432 36.2293432,48.5690608 33.3535912,48.5690608 Z" fill="#D3D3D8"> </path> <path d="M10.8618785,0 L10.8618785,48.5690608 C10.2880834,48.5690608 9.67833863,48.5344431 9.06906077,48.4998255 C8.45978292,48.4310396 7.8500381,48.3618043 7.27624309,48.2925688 L7.27624309,0 L10.8618785,0 Z" fill="#ECECF1"> </path> <path d="M10.8618785,0 L10.8618785,48.5690608 C10.3402466,48.5690608 9.78593316,48.5344431 9.2320442,48.4998255 L9.2320442,0 L10.8618785,0 Z" fill="#D3D3D8"> </path> </g> </g> </g> </g> </svg>