Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/evil-cookie-policy.markdown

Last active April 29, 2020 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/7751d5cf2e1755830b72b52bc540a123 to your computer and use it in GitHub Desktop.
Save CodeMyUI/7751d5cf2e1755830b72b52bc540a123 to your computer and use it in GitHub Desktop.
Download ZIP
Evil Cookie Policy
Raw
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<div id="cookie-policy">
<div id="cookie-wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="240px"
height="240px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve">
<g id="background">
</g>
<g id="shadow">
<path id="floor-shadow" opacity="0.1" fill="#6D3A1F" d="M172.463,220.02c-9.135,0.68-18.108-0.353-30.442-0.202
c-14.227,0.177-20.922,0.554-30.73,2.68c-9.9,2.145-16.687,4.044-15.713,7.492c1.549,5.497,16.598,6.833,26.756,7.728
c9.595,0.842,20.385,1.215,29.926,1.495c20.566,0.6,31.696-2.003,40.881-2.551c8.965-0.534,19.87-5.272,18.959-9.794
C210.741,220.126,185.786,219.028,172.463,220.02z"/>
</g>
<g id="cookie-wrapper">
<g id="cookie_1_">
<path id="leg-l" fill="#BA7F50" d="M137.936,213.964c-0.728-8.278-0.281-15.826,0.731-22.442
c-0.449-0.768-0.877-1.566-1.447-2.158c-0.61-0.634-1.396-1.038-2.159-1.438c-1.599,9.013-2.253,19.827-0.516,32.009
c-1.274-0.136-3.535-0.447-6.471,0.129c-5.609,1.104-7.157,5.492-3.946,6.55c2.943,0.969,11.902-0.397,13.183-1.062
c1.44-0.749,1.377-2.588,1.323-3.675C138.581,220.788,138.073,216.521,137.936,213.964z"/>
<path id="leg-r" fill="#BA7F50" d="M173.583,213.251c-0.855-8.169-0.552-15.652,0.325-22.247
c-1.365,0.208-2.72-0.507-4.097-0.458c-1.06,8.366-1.232,18.061,0.479,28.77c-1.277-0.096-3.539-0.348-6.464,0.314
c-5.592,1.264-7.063,5.697-3.838,6.66c2.96,0.885,11.896-0.739,13.162-1.437c1.427-0.792,1.333-2.628,1.263-3.714
C174.342,220.052,173.763,215.801,173.583,213.251z"/>
<g id="body">
<path fill="#BA7F50" d="M214.798,131.338c-2.72-13.935-10.356-13.564-13.691-22.145c-1.952-5.02-8.01-7.696-12.273-12.958
c-4.028-4.972-11.228-5.879-14.996-6.775c-7.534-1.795-15.428-2.513-22.244-0.36c-6.818,2.152-13.903,3.176-21.17,3.23
c-6.128,0.043-12.377,3.742-15.786,9.328c-2.696,4.417-2.513,11.123-6.101,13.992c-3.587,2.871-7.096,3.626-8.969,7.535
c-3.551,7.413-1.436,13.276-2.511,17.223c-1.078,3.946-3.588,10.763-2.513,18.299c1.076,7.533,0.65,10.361,5.74,15.069
c2.012,1.858,4.665,2.511,6.1,7.893c1.438,5.383,9.688,13.274,17.222,16.505c7.537,3.229,9.778-1.492,16.227,2.707
c5.971,3.888,13.023,4.173,19.448,3.795c7.785-0.459,10.518-2.298,13.844-3.795c7.174-3.23,9.064-7.168,16.521-7.892
c6.688-0.646,17.002-6.402,19.713-17.419c2.443-9.932,7.352-12.458,6.182-19.325
C213.813,146.133,216.779,141.476,214.798,131.338z"/>
<g id="topping">
<path fill="#663F31" d="M159.175,99.411c-3.39-2.708-7.369-0.838-9.398-0.066c-2.025,0.772-5.158,1.646-5.191,7.087
c-0.012,1.974,0.682,3.119,1.715,3.836c4.035-0.79,8.143,0.586,11.719,2.519c1.256-0.266,2.482-0.996,3.684-2.589
C164.45,106.542,162.564,102.121,159.175,99.411z"/>
<path fill="#663F31" d="M129.062,119.911c-2.399-1.482-5.731-2.24-8.548-0.327c-3.632,2.462-2.97,5.225-2.526,6.284
c4.399-0.958,10.064-1.134,13.916,1.287C132.688,123.898,131.777,121.59,129.062,119.911z"/>
<path fill="#663F31" d="M124.54,97.799c-2.958,0.123-4.438,4.316-5.301,6.782c-0.545,1.557-0.428,3.769,0.899,4.133
c2.667-2.059,6.149-2.928,9.502-2.983c0.445-0.36,0.834-0.765,1.065-1.273C132.052,101.498,127.497,97.676,124.54,97.799z"/>
<path fill="#663F31" d="M176.324,88.618c-3.585,0.189-5.906,4.403-5.669,7.291c0.177,2.138,1.539,3.356,3.368,3.514
c2.526-1.065,5.534-1.475,8.13-0.583c0.279-0.142,0.559-0.33,0.834-0.63c2-2.182,1.479-4.111,0.073-6.939
C181.659,88.438,179.089,88.471,176.324,88.618z"/>
<path fill="#663F31" d="M191.028,114.314c-0.396-0.07-0.824-0.126-1.302-0.157c-2.467-0.164-4.287-0.443-7.233,2.466
c-1.401,1.384-1.158,3.801-0.802,5.543c0.03,0.002,0.059-0.001,0.088,0.011c0.034,0.012,0.069,0.032,0.105,0.047
c0.223,0.055,0.434,0.147,0.635,0.277c2.005,0.944,3.996,2.678,4.75,4.782c0.374,0.042,0.753,0.056,1.141,0.027
c3.217-0.236,5.519-2.598,5.789-7.174c0.067-1.162,0.039-2.101-0.099-2.865C192.744,116.639,191.375,115.725,191.028,114.314z"/>
<path fill="#663F31" d="M154.268,181.853c-1.843-1.795-5.599-1.463-7.933-0.557c-4.271,1.655-5.532,9.481,0.4,12.332
c0.313,0.151,0.606,0.251,0.892,0.329c1.354-1.044,2.869-1.581,4.501-2.09c1.635-0.512,3.237-1.018,4.933-1.145
c0.521-0.636,0.946-1.387,1.19-2.302C159.12,185.174,155.793,183.342,154.268,181.853z"/>
<path fill="#663F31" d="M195.918,165.133c-3.971-3.13-7.273-1.728-9.863-0.249c-4.92,2.813-5.54,10.517-2.278,11.321
c0.897-0.042,6.841-0.164,11.774,2.427c1.272,0.102,1.773-0.419,2.095-1.357C199.001,173.331,199.987,168.337,195.918,165.133z"
/>
<path fill="#663F31" d="M95.853,146.874c-2.355-0.666-5.261,3.945-5.589,5.919c-0.546,3.268,1.15,8.056,5.843,7.686
c2.292-0.182,0.539-3.77,0-6.727C95.568,150.791,97.927,147.458,95.853,146.874z"/>
<path fill="#663F31" d="M118.584,178.8c-2.153-1.615-2.935-5.777-4.292-5.282c-2.293,0.833-2.494,2.799-2.958,4.314
c-0.328,1.072-1.187,7.354,6.658,6.042C121.452,183.294,120.735,180.414,118.584,178.8z"/>
<path fill="#663F31" d="M141.313,86.695c-3.605-0.013-5.325,2.705-4.947,4.393c0.385,1.712,0.304,2.444,1.344,2.424
c0.02-0.014,0.035-0.027,0.051-0.041c0.257-0.213,0.527-0.323,0.799-0.386c0.655-0.382,1.335-0.697,2.037-0.945
c0.042-0.021,0.08-0.049,0.122-0.068c1.323-0.584,2.764-0.769,4.174-1.031c0.096-0.018,0.181-0.01,0.271-0.012
c0.372-0.45,0.417-1.002-0.033-1.711C143.97,87.481,142.613,86.699,141.313,86.695z"/>
<path fill="#663F31" d="M190.064,138.718c-3.401,1.545-5.428,2.357-5.647,4.827c-0.003,0.05,0.016,0.081,0.016,0.129
c0.092-0.008,0.162-0.051,0.265-0.044c4.507,0.287,9.358,2.734,11.638,6.769c0.205-0.049,0.413-0.119,0.625-0.237
c2.529-1.416,2.858-4.458,2.139-7.892C198.377,138.837,194.069,136.896,190.064,138.718z"/>
<path fill="#7B513E" d="M191.405,139.12c-2.198,0.298-3.342,2.042-2.735,3.005c0.598,0.993,1.982,1.271,3.292,1.114
c1.295-0.198,2.572-0.83,2.876-1.946C195.157,140.202,193.609,138.825,191.405,139.12z"/>
<path fill="#7B513E" d="M196.306,142.314c0.029,0.371,0.231,0.668,0.404,0.917c0.204,0.224,0.449,0.486,0.803,0.597
c0.354,0.144,0.81-0.678,0.225-1.417C197.147,141.678,196.243,141.942,196.306,142.314z"/>
<path fill="#7B513E" d="M155.21,100.041c-2.578-0.576-4.87,0.368-5.989,1.48c-0.584,0.563-0.892,1.125-1.031,1.641
c-0.093,0.479,0.029,0.842,0.257,1.116c1.112,0.88,3.484,0.267,5.616,0.829c1.058,0.241,2.104,0.682,3.013,1.103
c0.914,0.399,1.729,0.817,2.415,0.571c0.654-0.223,1.054-1.294,0.488-2.82C159.448,102.472,157.786,100.631,155.21,100.041z"/>
<path fill="#7B513E" d="M176.427,89.934c-1.373,0.287-2.416,1.195-2.802,2.055c-0.479,0.96-0.148,1.523,0.269,1.887
c0.434,0.381,1.18,0.229,1.677,0.316c0.581-0.016,1.134-0.063,1.723-0.194c0.589-0.118,1.114-0.301,1.65-0.524
c0.522-0.233,1.09-0.48,1.403-0.97c0.303-0.469,0.201-1.198-0.524-1.833C179.121,90.04,177.798,89.639,176.427,89.934z"/>
<path fill="#7B513E" d="M186.537,116.293c-1.109,0.161-1.992,0.801-2.37,1.477c-0.461,0.733-0.262,1.303,0.074,1.755
c0.863,0.781,1.999,0.976,2.895,0.881c0.479-0.066,0.907-0.259,1.358-0.528c0.44-0.277,0.916-0.624,1.163-1.146
c0.246-0.508,0.142-1.159-0.43-1.701C188.671,116.491,187.642,116.13,186.537,116.293z"/>
<path fill="#7B513E" d="M190.974,165.509c-1.955-0.055-3.674,0.749-4.553,1.682c-0.998,1.014-0.94,1.799-0.615,2.236
c0.91,0.741,2.807,0.111,5.055,0.236c1.138,0.041,2.15,0.164,3.018,0.267c0.859,0.09,1.612,0.167,2.045-0.231
c0.411-0.367,0.356-1.275-0.494-2.265C194.603,166.455,192.929,165.56,190.974,165.509z"/>
<path fill="#7B513E" d="M125.442,120.126c-0.637-0.506-1.744-0.799-2.903-0.562c-1.16,0.235-2.063,0.939-2.451,1.652
c-0.466,0.771-0.277,1.358,0.071,1.8c0.882,0.76,2.136,0.802,3.209,0.618c0.563-0.108,1.063-0.326,1.551-0.615
c0.479-0.298,0.954-0.668,1.158-1.209C126.276,121.283,126.094,120.633,125.442,120.126z"/>
<path fill="#7B513E" d="M127.387,121.521c-0.164,0.502,0.263,1.094,0.812,1.57c0.559,0.458,1.215,0.781,1.683,0.536
c0.46-0.232,0.395-1.254-0.464-1.98C128.557,120.919,127.537,121.027,127.387,121.521z"/>
<path fill="#7B513E" d="M124.631,99.172c-0.749-0.065-1.753,0.271-2.526,1.047c-0.775,0.771-1.718,2.509-1.656,3.258
c-0.441,1.212-0.012,1.763,0.483,1.926c1.067,0.138,3.154-1.775,3.888-2.464c0.379-0.373,0.658-0.794,0.885-1.27
c0.217-0.47,0.396-1,0.276-1.521C125.867,99.638,125.395,99.229,124.631,99.172z"/>
<path fill="#7B513E" d="M191.86,118.769c-0.183,0.32,0.048,0.81,0.236,1.328c0.22,0.508,0.389,1.02,0.741,1.127
c0.341,0.128,0.86-0.659,0.48-1.614C192.938,118.656,192.017,118.441,191.86,118.769z"/>
<path fill="#7B513E" d="M148.348,181.916c-1.062,0.059-2.461,0.736-3.431,2.011c-0.971,1.274-1.25,2.802-1.025,3.84
c0.218,1.059,0.824,1.571,1.377,1.521c0.584-0.047,1.056-0.527,1.522-1.044c0.463-0.532,0.933-1.131,1.434-1.801
c0.944-1.329,2.038-2.434,1.955-3.604C150.012,182.314,149.527,181.811,148.348,181.916z"/>
<path fill="#7B513E" d="M117.319,180.047c-0.331-0.403-0.867-0.757-1.58-1.005c-0.709-0.25-1.443-0.319-2.061-0.214
c-0.321,0.045-0.56,0.167-0.818,0.303c-0.27,0.12-0.494,0.302-0.648,0.542c-0.736,0.922,0.333,2.68,2.166,3.295
c0.93,0.325,1.94,0.333,2.747,0.012c0.844-0.291,1.341-1.098,1.003-1.581C117.799,180.898,117.63,180.448,117.319,180.047z"/>
</g>
<path fill="#9D5B2E" d="M125.958,125.04c-7.221-1.036-10.93,2.393-11.084,2.54c-0.11,0.106-0.115,0.282-0.009,0.395
c0.104,0.114,0.283,0.116,0.395,0.01c0.035-0.034,3.678-3.388,10.619-2.392c4.469,0.638,8.357,3.78,8.396,3.813
c0.053,0.044,0.116,0.063,0.178,0.063c0.082,0,0.162-0.034,0.215-0.103c0.099-0.119,0.083-0.294-0.038-0.394
C134.468,128.84,130.585,125.699,125.958,125.04z"/>
<path fill="#9D5B2E" d="M150.559,109.982c-5.03-0.239-7.962,0.351-8.088,0.375c-0.15,0.031-0.245,0.18-0.215,0.33
c0.03,0.151,0.184,0.248,0.331,0.217c0.029-0.006,2.981-0.605,7.943-0.363c5.975,0.293,10.512,4.675,10.559,4.719
c0.054,0.054,0.125,0.08,0.196,0.08c0.072,0,0.144-0.027,0.201-0.083c0.107-0.111,0.105-0.287-0.006-0.396
C161.29,114.674,156.751,110.285,150.559,109.982z"/>
<path fill="#9D5B2E" d="M178.732,122.466c-0.13,0.079-0.174,0.251-0.097,0.382c0.081,0.135,0.252,0.175,0.383,0.097
c0.151-0.089,3.678-2.102,6.861,2.548c2.03,2.969,1.607,5.021,1.602,5.042c-0.034,0.151,0.062,0.3,0.212,0.334
c0.021,0.005,0.041,0.007,0.061,0.007c0.129,0,0.245-0.086,0.271-0.216c0.023-0.092,0.499-2.293-1.682-5.481
C182.854,120.082,178.775,122.443,178.732,122.466z"/>
<path fill="#9D5B2E" d="M196.962,117.494c-0.008,0-0.012,0-0.017,0c-0.032-0.001-2.692,0.123-4.546-1.883
c-1.836-1.986-1.122-4.393-1.089-4.495c0.045-0.147-0.038-0.303-0.185-0.349c-0.149-0.049-0.302,0.038-0.352,0.183
c-0.034,0.114-0.844,2.813,1.213,5.042c1.775,1.922,4.152,2.065,4.814,2.065c0.1,0,0.162-0.003,0.178-0.003
c0.151-0.01,0.27-0.142,0.261-0.296C197.231,117.609,197.106,117.494,196.962,117.494z"/>
<path fill="#BA7F50" d="M99.142,162.986l-1.811-17.426C97.331,145.56,91.907,152.957,99.142,162.986z"/>
<path fill="#9D5B2E" d="M97.558,145.724c0.092-0.125,0.064-0.3-0.058-0.391c-0.124-0.092-0.302-0.063-0.392,0.06
c-0.058,0.077-5.462,7.678,1.806,17.757c0.055,0.075,0.139,0.115,0.227,0.115c0.059,0,0.113-0.018,0.164-0.052
c0.125-0.09,0.153-0.266,0.063-0.392C92.347,153.087,97.507,145.795,97.558,145.724z"/>
<path fill="#9D5B2E" d="M178.006,98.139c-4.968,0.869-6.622,2.603-6.691,2.675c-0.104,0.114-0.099,0.289,0.013,0.395
c0.057,0.049,0.124,0.076,0.191,0.076c0.075,0,0.147-0.031,0.205-0.091c0.016-0.015,1.626-1.671,6.38-2.503
c3.386-0.598,7.517,2.265,7.557,2.296c0.127,0.09,0.297,0.059,0.392-0.069c0.088-0.124,0.057-0.299-0.068-0.388
C185.81,100.406,181.642,97.499,178.006,98.139z"/>
<path fill="#9D5B2E" d="M189.937,176.521c-6.053-0.982-11.622-0.452-11.677-0.445c-0.153,0.013-0.265,0.15-0.25,0.303
c0.014,0.156,0.142,0.274,0.305,0.251c0.054-0.002,5.562-0.526,11.533,0.442c5.848,0.948,7.353,3.297,7.369,3.321
c0.05,0.086,0.144,0.135,0.239,0.135c0.05,0,0.097-0.013,0.143-0.042c0.13-0.079,0.178-0.249,0.096-0.384
C197.632,179.999,196.078,177.516,189.937,176.521z"/>
<path fill="#9D5B2E" d="M148.114,91.06c-0.148-0.025-3.686-0.578-6.604,0.46c-3.984,1.418-5.72,3.245-5.794,3.323
c-0.105,0.112-0.1,0.289,0.014,0.395c0.055,0.049,0.121,0.075,0.189,0.075c0.078,0,0.15-0.029,0.205-0.09
c0.02-0.015,1.729-1.808,5.575-3.178c2.774-0.985,6.287-0.441,6.324-0.434c0.146,0.021,0.294-0.077,0.321-0.231
C148.369,91.227,148.267,91.083,148.114,91.06z"/>
<path fill="#BA7F50" d="M123.062,182.876l-9.125-11.59C113.937,171.287,116.157,178.934,123.062,182.876z"/>
<path fill="#9D5B2E" d="M114.204,171.209c-0.042-0.147-0.188-0.235-0.348-0.19c-0.145,0.043-0.23,0.198-0.188,0.345
c0.021,0.08,2.333,7.801,9.254,11.755c0.045,0.027,0.091,0.039,0.14,0.039c0.095,0,0.19-0.053,0.243-0.142
c0.075-0.134,0.03-0.305-0.104-0.381C116.479,178.794,114.228,171.285,114.204,171.209z"/>
<path fill="#9D5B2E" d="M161.979,190.885c-0.146-0.052-3.711-1.246-8.173,0.109c-6.749,2.055-8.248,4.954-8.307,5.079
c-0.068,0.137-0.012,0.305,0.125,0.372c0.04,0.02,0.082,0.03,0.123,0.03c0.103,0,0.202-0.058,0.253-0.154
c0.012-0.03,1.486-2.817,7.97-4.789c4.278-1.306,7.792-0.132,7.828-0.119c0.137,0.052,0.302-0.028,0.354-0.172
C162.203,191.092,162.124,190.934,161.979,190.885z"/>
<path fill="#9D5B2E" d="M133.271,106.167c-7.963-2.98-16.128,4.556-16.21,4.629c-0.112,0.106-0.118,0.285-0.014,0.397
c0.058,0.056,0.132,0.089,0.204,0.089s0.137-0.028,0.193-0.077c0.079-0.074,7.992-7.378,15.629-4.514
c0.146,0.051,0.306-0.02,0.36-0.164C133.488,106.384,133.415,106.223,133.271,106.167z"/>
<g id="face">
<g id="mouth">
<path fill="#663F31" d="M157.026,146.921c-11.448,2.033-24.273-0.64-30.038-2.76
c-5.767-2.121-7.699-0.164-8.025,2.42c-1.275,10.057,11.963,15.406,21.598,17.114c9.635,1.707,18.401-1.631,22.385-4.909
C168.062,154.581,168.476,144.89,157.026,146.921z"/>
<path id="teeth_9_" fill="#FFFFFF" d="M127.924,147.18c2.11,0.318,2.647-1.898,2.647-1.898l-4.033-1.275
C126.538,144.007,125.813,146.862,127.924,147.18z"/>
<path id="teeth_8_" fill="#FFFFFF" d="M139.548,150.295c2.577,0.346,2.792-2.921,2.792-2.921l-4.768-0.604
C137.572,146.77,137.632,150.039,139.548,150.295z"/>
<path id="teeth_7_" fill="#FFFFFF" d="M149.657,147.645c0,0,0.244,3.132,2.685,2.949c2.44-0.185,2.149-3.278,2.149-3.278
L149.657,147.645z"/>
<path id="tongue_1_" fill="#F4978D" d="M142.301,154.456c-10.801-1.263-14.249,3.799-14.973,5.16
c0.146,0.028,0.287,0.032,0.437,0.102c4.801,2.17,8.729,3.807,13.963,4.489c6.489,0.845,11.468-0.248,16.215-2.365
C156.73,160.215,152.479,155.644,142.301,154.456z"/>
<path id="teeth_6_" fill="#FFFFFF" d="M137.761,160.003c-1.808-0.458-2.906,2.351-2.906,2.351s1.354,0.572,1.862,0.671
c1.595,0.314,2.245,0.476,2.245,0.476S139.837,160.526,137.761,160.003z"/>
<path id="teeth_5_" fill="#FFFFFF" d="M145.687,161.188c-2.131,0.093-2.284,2.876-2.284,2.876s1.731,0.098,2.326,0.101
c0.594,0.003,2.354-0.071,2.354-0.071S147.819,161.096,145.687,161.188z"/>
</g>
<g id="eyes">
<path id="eye-l-eyes_1_" fill="#9D5B2E" d="M128.528,133.267c-2.528-0.468-4.97,1.207-5.439,3.736
c-0.005,0.03-0.011,0.061-0.015,0.105c-0.048,0.291,0.146,0.565,0.434,0.619c0.004,0,0.009,0,0.015,0.001
c0.293,0.047,0.571-0.154,0.619-0.448c0.002-0.023,0.005-0.045,0.007-0.08c0.364-1.944,2.238-3.232,4.184-2.871
c1.942,0.362,3.231,2.238,2.866,4.192c-0.005,0.022-0.013,0.044-0.014,0.066c-0.063,0.29,0.125,0.571,0.418,0.631
c0.287,0.059,0.578-0.131,0.642-0.424c0.009-0.03,0.016-0.057,0.021-0.086C132.733,136.177,131.06,133.738,128.528,133.267z"/>
<path id="eye-r-yes_1_" fill="#9D5B2E" d="M158.647,136.385c-2.557-0.268-4.86,1.596-5.127,4.155
c-0.004,0.029-0.006,0.059-0.006,0.104c-0.023,0.278,0.171,0.526,0.438,0.576c0.02,0.003,0.037,0.005,0.057,0.007
c0.296,0.026,0.559-0.196,0.581-0.492c0.002-0.025,0.004-0.045,0.004-0.082c0.101-0.954,0.565-1.808,1.31-2.412
c0.745-0.603,1.68-0.88,2.633-0.781c0.954,0.101,1.811,0.568,2.412,1.312c0.604,0.744,0.88,1.678,0.777,2.643
c-0.003,0.021-0.009,0.043-0.012,0.066c-0.038,0.295,0.174,0.56,0.471,0.596c0.294,0.04,0.565-0.178,0.604-0.475
c0.005-0.028,0.01-0.058,0.013-0.086C163.07,138.955,161.21,136.655,158.647,136.385z"/>
</g>
</g>
<g id="face-no">
<path id="mouth-no" fill="#9D5B2E" d="M148.574,160.072c0,0,4.614-2.639,6.545-2.258c0.612,0.259,0.106,1.802-0.168,1.971
c-0.275,0.168-4.292,0.892-5.932,1.711C148.316,161.465,148.295,160.226,148.574,160.072z"/>
<path id="eye-l-no" fill="#9D5B2E" d="M122.292,135.288c0.107-0.01,10.953-1.499,11.162-1.146c0.21,0.353-0.142,3.639-1.223,3.75
c-1.083,0.111-1.042-2.591-1.042-2.591s-7.833,1.069-8.468,1.127C122.127,136.483,122.112,135.306,122.292,135.288z"/>
<path id="eye-r-no" fill="#9D5B2E" d="M151.811,138.005c0.106,0.009,11.04,0.559,11.179,0.944
c0.143,0.386-0.813,3.551-1.896,3.458c-1.084-0.09-0.542-2.74-0.542-2.74s-7.896-0.401-8.529-0.461
C151.426,139.149,151.63,137.99,151.811,138.005z"/>
</g>
</g>
<g id="heart-na">
<path id="thought-1" opacity="0.1" fill="#6D3A1F" d="M90.717,110.511c0,0-4.564,1.845-2.331,4.08
c2.233,2.233,6.798,2.136,8.74,0.193C99.069,112.842,94.212,110.511,90.717,110.511z"/>
<path id="thought-2" opacity="0.1" fill="#6D3A1F" d="M76.799,86.644c0,0-4.688-3.63-10.737-1.815
c-6.048,1.815-4.484,7.356-4.484,7.356s-4.738,2.019,0.554,7.01c5.291,4.989,9.845,4.853,12.258,3.56
c2.41-1.292,5.744,1.679,9.899-1.167C88.442,98.741,85.115,87.854,76.799,86.644z"/>
<path id="thought-heart-na" opacity="0.1" fill="#6D3A1F" d="M98.344,25.603c0.312-2.68,0.347-7.27-1.802-12.313
C93.158,5.348,85.637,1.866,78.253,3.12c-2.466,0.417-4.148,1.179-5.307,2.006C69.481,4.945,63.012,5.16,58.892,8.69
c-1.541,1.321-2.575,2.639-3.269,3.866c-0.479-1.687-1.097-3.419-1.942-4.267l0.056,0.123c0,0-0.056-0.123-0.168-0.335
c-0.62-1.202-4.341-4.29-7.773-5.238c-3.631-1.001-6.546-1.393-10.729-1.052C32.56,1.37,23.288,0.113,17.965,9.767
c-4.382,7.943-2.607,12.557-1.844,13.941c-1.022,1.374-2.087,4.064-2.087,9.223c0,9.333,6.827,12.536,8.498,13.233h0.001
c0.103,1.513,0.843,4.047,3.97,7.173c2.739,2.74,4.986,3.926,6.492,4.435c0.531,1.711,1.587,3.626,3.607,5.387
c2.047,1.787,3.641,2.819,4.832,3.414c1.173,2.774,3.336,6.036,7.288,7.87c7.8,3.622,9.61,2.229,13.094,1.254
c1.717-0.481,3.435-1.979,4.733-3.373c1.452,0.35,3.825,0.571,6.622-0.521c3.855-1.504,6.424-6.428,5.625-10.215
c1.909,0.058,4.356-0.491,7.34-2.548c4.81-3.315,6.893-9.996,5.547-14.871c1.373-1.025,2.801-2.458,4.228-4.455
C99.674,34.45,99.954,29.457,98.344,25.603z"/>
<g id="plus">
<path fill="#F3EFE7" d="M56.215,37.375c-0.246-0.148-0.37-0.304-0.37-0.468v-1.528c0-0.459,0.017-0.887,0.05-1.281l0.049-1.281
c0-0.328-0.008-0.583-0.024-0.764c-0.017-0.18-0.074-0.353-0.172-0.517c-0.099-0.164-0.247-0.263-0.444-0.296
c-0.196-0.032-0.542-0.049-1.034-0.049l-1.084,0.099c-0.493,0.099-0.855,0.148-1.085,0.148c-0.953,0-1.429-0.345-1.429-1.035
c0-0.262,0.032-0.443,0.099-0.542c0.065-0.099,0.213-0.147,0.443-0.147l1.281,0.049l1.331,0.099c1.347,0,2.02-0.131,2.02-0.394
c0-0.558-0.049-1.38-0.147-2.464l-0.099-2.464c0-0.394,0.065-0.673,0.197-0.838c0.131-0.164,0.395-0.246,0.788-0.246
c0.592,0,0.888,0.279,0.888,0.837l-0.197,0.493l0.099,1.921l0.099,1.971c0,0.46,0.105,0.772,0.32,0.937
c0.213,0.165,0.566,0.246,1.06,0.246l1.478-0.099l1.479-0.049c1.018,0,1.527,0.295,1.527,0.887c0,0.526-0.279,0.789-0.837,0.789
c-0.56,0-1.052-0.032-1.479-0.099c-0.428-0.032-0.937-0.049-1.527-0.049h-0.247c-0.756,0-1.24,0.091-1.453,0.271
c-0.215,0.181-0.32,0.633-0.32,1.355c0,0.69,0.065,1.38,0.196,2.07c0.164,0.92,0.247,1.544,0.247,1.873
c0,0.23-0.099,0.419-0.296,0.567c-0.197,0.147-0.443,0.222-0.739,0.222C56.683,37.596,56.461,37.522,56.215,37.375z"/>
</g>
<g id="cookie-thought">
<path id="XMLID_45_" fill="#F3EFE7" d="M38.341,22.591c0.055,0.639-0.5,1.156-1.236,1.156c-0.741,0-1.307-0.566-1.269-1.265
c0.039-0.698,0.593-1.216,1.239-1.156C37.718,21.386,38.285,21.952,38.341,22.591z"/>
<path id="XMLID_43_" fill="#F3EFE7" d="M38.268,26.195c-0.032,0.422-0.39,0.787-0.798,0.814c-0.407,0.028-0.734-0.315-0.729-0.764
c0.008-0.451,0.364-0.815,0.797-0.815S38.298,25.772,38.268,26.195z"/>
<path id="XMLID_41_" fill="#F3EFE7" d="M43.688,26.534c-0.038,0.497-0.457,0.926-0.938,0.958c-0.48,0.032-0.864-0.371-0.858-0.9
c0.01-0.529,0.428-0.958,0.938-0.958C43.34,25.633,43.725,26.036,43.688,26.534z"/>
<path id="XMLID_9_" fill="#F3EFE7" d="M39.086,37.662c-8.363,6.783-20.005-4-12.658-12.804c0.115-0.138,0.248-0.271,0.38-0.404
c1.677-1.678,3.542-2.456,5.371-2.567c0.18-0.011,0.335,0.13,0.338,0.31c0.021,1.081,0.735,1.812,1.764,1.961
c0.154,0.022,0.256,0.177,0.213,0.326c-0.102,0.345-0.152,0.714-0.145,1.094c0.037,1.948,1.648,3.542,3.597,3.561
c0.399,0.004,0.786-0.057,1.146-0.174c0.147-0.046,0.304,0.042,0.331,0.195c0.243,1.3,1.423,1.059,1.967,0.87
c0.156-0.053,0.325,0.035,0.371,0.194C42.866,34.189,39.086,37.662,39.086,37.662z"/>
</g>
<g id="user-thought">
<path id="user-body_1_" fill="#F3EFE7" d="M82.745,31.641c0,0,0.924-0.043,1.176,0c0.254,0.042,3.755,0.486,4.299,4.309v2.212
c0,0-0.043,1.271-1.498,1.518H73.683c0,0-1.45-0.236-1.504-1.539v-2.227c0,0,0.296-3.849,4.612-4.293h0.829
C77.62,31.622,80.645,32.964,82.745,31.641z"/>
<circle id="user-head_1_" fill="#F3EFE7" cx="80.169" cy="25.909" r="4.649"/>
</g>
</g>
<g opacity="0.1">
<path id="thought-heart-yes" fill="#6D3A1F" d="M88.184,5.268c-17.849-6.561-28.806,4.079-31.095,6.62
c-2.292-2.541-13.248-13.181-31.098-6.62c-20.174,7.417-11.27,36.866,1.337,47.952c10.003,8.796,19.351,19.112,26.696,21.831
c1.064,0.394,2.088,0.628,3.064,0.676c0.976-0.047,1.996-0.282,3.063-0.676c7.346-2.719,16.693-13.035,26.696-21.831
C99.454,42.134,108.357,12.685,88.184,5.268z"/>
</g>
<g id="mark">
<g id="q-mark" opacity="0.1">
<path fill="#6D3A1F" d="M112.606,32.499l0.185-0.56c0.405-2.054,1.313-3.565,2.721-4.529c1.406-0.963,2.839-1.5,4.303-1.609
c1.462-0.108,2.866-0.502,4.219-1.179c1.351-0.677,2.178-1.792,2.485-3.347c0.306-1.553,0.102-2.849-0.611-3.883
c-0.716-1.035-1.958-1.728-3.726-2.076c-1.77-0.35-3.126-0.331-4.07,0.053c-0.946,0.385-1.571,0.845-1.875,1.381l-0.385,0.818
c-0.675,1.159-1.363,2.003-2.064,2.535c-0.702,0.532-1.507,0.709-2.414,0.53c-0.909-0.18-2.048-0.703-3.416-1.568
c-2.651-1.666-3.816-3.311-3.495-4.937c0.142-0.717,0.428-1.417,0.861-2.102c0.434-0.684,0.794-1.258,1.085-1.723
c0.289-0.464,0.976-1.234,2.059-2.313c1.081-1.078,2.253-1.977,3.512-2.696c1.261-0.72,2.946-1.281,5.063-1.683
c2.114-0.402,4.367-0.367,6.759,0.105c5.066,1,8.881,3.441,11.442,7.324c2.563,3.883,3.418,7.976,2.569,12.278
c-0.406,2.056-1.152,3.883-2.237,5.482c-1.085,1.599-2.254,2.796-3.503,3.592c-2.5,1.593-4.724,2.545-6.672,2.855l-1.219,0.132
c-0.16,0.814-0.318,1.427-0.476,1.843c-0.157,0.417-0.463,0.84-0.92,1.271c-0.459,0.431-1.127,0.672-2.007,0.723
c-0.878,0.049-2.011-0.063-3.397-0.336c-1.388-0.274-2.476-0.611-3.263-1.017c-0.791-0.403-1.297-0.926-1.517-1.566
c-0.223-0.64-0.323-1.193-0.305-1.662C112.314,34.168,112.418,33.456,112.606,32.499z M109.793,45.242
c0.529-0.665,1.316-1.068,2.362-1.21c1.046-0.141,2.62-0.004,4.726,0.411c2.103,0.415,3.529,1.181,4.277,2.296
c0.748,1.116,0.857,3.013,0.329,5.69c-0.378,1.913-0.897,3.288-1.559,4.126c-0.663,0.837-1.515,1.315-2.556,1.433
c-1.042,0.118-2.59-0.027-4.646-0.433c-2.056-0.406-3.535-1.219-4.436-2.44c-0.653-0.973-0.785-2.439-0.397-4.399l0.226-1.147
c0.218-1.1,0.418-1.93,0.604-2.488C108.909,46.521,109.264,45.908,109.793,45.242z"/>
</g>
</g>
<g id="heart-no">
<path id="heart-no-1" opacity="0.1" fill="#6D3A1F" d="M87.024,25.305c-0.225-0.448-0.449-0.81-0.676-1.102
c1.088-3.667-1.114-11.189-8.326-13.032c-7.997-2.044-10.065,2.081-10.065,2.081c-8.021-1.062-11.174,1.697-12.389,3.688
c-1.909-1.91-4.363-2.6-6.451-2.017c-0.082-0.186-0.174-0.373-0.284-0.561c-1.914-3.242-12.512-6.16-18.149-0.297
c-3.028,3.149-3.308,6.276-2.809,8.604c-1.609,1.416-3.489,3.885-3.568,8.374c-0.142,8.079,5.732,10.461,5.732,10.461
c0.177,6.756,8.003,8.714,8.003,8.714c2.077,5.274,5.154,7.231,7.263,7.956c0.285,3.213,2.975,6.479,8.926,7.368
c6.204,0.925,7.923-3.011,7.923-3.011s3.36,1.395,6.955-0.867c3.595-2.26,4.052-6.773,4.052-6.773s4.647,0.231,7.486-4.862
s1.287-9.493,1.287-9.493l2.022-0.78C90.759,35.426,89.195,29.653,87.024,25.305z M63.131,37.434c0,0-3.315,0.622-4.699,2.903
c-1.332,2.199-1.252,3.048-1.244,3.106c0,0.001,0,0.002,0,0.002s0-0.001,0-0.002c-0.01-0.075-0.71-5.329-3.454-6.908
c-2.764-1.588-3.455-0.898-3.455-0.898s0.622-2.211-0.69-3.179c0,0,9.121,4.077,14.926,1.105
C64.514,33.564,62.855,36.121,63.131,37.434z"/>
<path id="heart-no-2" opacity="0.1" fill="#6D3A1F" d="M91,20.894c-1.278-1.801-2.594-2.972-3.872-3.686
c0.28-2.472-0.378-6.761-7.079-9.833c-5.399-2.478-9.829-0.098-11.353,3.009c-3.298-0.318-6.901,0.236-8.76,3.447
c-1.39,0.212-2.842,0.592-4.048,1.256c-1.259-1.223-2.57-4.312-7.617-4.11c0,0-2.699,0.751-3.208,1.236
c0,0-2.881-5.165-10.799-4.132c-7.146,0.933-8.645,5.807-8.104,8.311c-1.208,0.321-2.464,1.051-3.479,2.543
c-2.921,4.298-1.778,8.535,1.667,10.726c0.156,0.098,0.306,0.186,0.445,0.262c-1.232,1.222-2.283,3.207-1.428,6.217
c1.683,5.902,6.307,6.012,6.307,6.012s-1.738,2.924,1.657,7.682c3.388,4.748,8.261,4.084,8.261,4.084s-2.937,5.501,5.609,8.283
l1.958,0.587c0,0,2.366,5.494,7.721,6.605c5.329,1.107,8.865-2.413,9.714-6.055c0,0,4.418,0.998,6.793-4.482
c0,0,8.166-0.351,10.652-5.391c1.169-2.371,1.019-4.731,0.534-6.565c1.582-0.12,3.454-0.985,5.003-3.74
c2.021-3.595,1.595-6.436,0.916-8.155C91.233,32.081,95.072,26.626,91,20.894z M67.728,36.917
c-1.096,2.538-0.742,3.823-0.742,3.823s-3.881-1.083-6.121-0.347c-2.244,0.737-2.925,2.528-2.925,2.528s-1.247-5.159-5.6-6.259
c-4.371-1.104-5.854-0.01-5.854-0.01s2.784-3.133,1.106-7.111c0,0,2.193,1.931,4.634,1.976c2.435,0.046,5.205-0.413,5.205-0.413
s1.653,1.484,5.107,1.804c3.444,0.319,6.508-2.258,6.508-2.258s2.08,3.181,4.042,3.217C73.089,33.867,68.822,34.384,67.728,36.917z
"/>
<path id="heart-no-3" opacity="0.1" fill="#6D3A1F" d="M89.898,13.271c0.31-1.616-0.257-3.608-2.734-5.854
c-5.285-4.793-15.84-3.813-19.46,0.402c-4.539-0.004-9.154,2.863-10.313,6.528c-0.336-1.159-1.97-5.924-6.284-6.565
c-1.772-0.263-2.934-0.146-3.692,0.11c-1.705-1.399-5.647-5.017-11.054-4.61c-7.159,0.54-9.567,5.899-9.695,7.775
c-1.444,0.113-3.498,0.793-6.138,2.935c-5.699,4.627-3.961,14.735-0.372,16.927c0.1,0.061,0.199,0.116,0.296,0.167
c-0.379,0.492-0.653,1.08-0.757,1.781c-0.562,3.775,1.754,11.325,7.151,11.325c0.068,0,0.136-0.001,0.201-0.003
c0.17,2.674,1.446,6.082,5.937,8.892c1.573,0.987,2.831,1.562,3.836,1.846c-0.173,1.461,0.03,3.608,1.556,6.313
c2.15,3.817,6.103,4.446,8.821,4.175c0.437,1.136,1.188,2.383,2.452,3.619c4.104,4.019,8.805,3.654,8.805,3.654
s3.397-0.161,6.402-3.312c0.825-0.866,1.196-2.308,1.308-3.098c1.491,0.071,3.049-0.077,4.042-0.774
c2.429-1.705,2.792-3.782,2.792-3.782s4.392,0.006,8.031-2.916c3.547-2.851,5.998-8.826,4.504-10.702
c1.086-0.218,2.454-0.877,4.016-2.45c3.602-3.625,4.635-8.587,2.933-11.357c1.218-0.625,2.65-2.051,3.702-5.205
C98.407,22.422,95.621,13.945,89.898,13.271z M79.783,32.873c-0.747,0.017-3.706,0.254-5.809,2.848
c-2.422,2.994-1.068,6.771-1.068,6.771s-4.49-1.212-6.771,1.782c0,0-7.696-1.425-9.977,4.704c0,0-1.568-5.274-6.7-7.555
c-5.13-2.279-6.698-0.996-6.698-0.996s1.854-1.854,0.714-4.99c-1.141-3.135-4.988-5.558-4.988-5.558s2.707-3.422,1.14-6.129
c0,0,1.853,2.707,5.844,2.707c3.989,0,5.272-1.852,5.272-1.852s1.711,2.708,3.849,3.991s4.562,0.571,4.562,0.571
s4.133,1.139,7.554-0.855c3.42-1.997,3.277-3.564,3.277-3.564s3.278,1.426,5.701,0.713c0,0-0.356,3.778,1.568,5.702
C78.659,32.568,79.457,32.832,79.783,32.873c0.114-0.003,0.178-0.001,0.178-0.001S79.903,32.887,79.783,32.873z"/>
<path id="heart-no-4" opacity="0.1" fill="#6D3A1F" d="M57.376,14.801c0,0,1.145-5.582-5.154-7.728
C47.594,5.496,46.14,7.43,46.14,7.43s-1.074-3.649-6.94-4.221c-5.869-0.574-12.737,4.293-13.312,7.442
c-0.572,3.149-0.858,2.146-0.858,2.146s-3.076-0.07-5.725,2.577c-2.647,2.648-3.864,6.011-2.146,9.446
c1.716,3.436,6.011,4.724,7.442,3.292c0,0-0.145,8.158,13.023,3.579c2.694-0.937,3.722-4.437,1.718-7.443
c0,0,1.371,1.555,3.148,0.86c0,0,1.878,2.551,6.091,2.349c4.215-0.203,6.503-4.64,6.503-5.068
C55.084,21.958,60.471,21.287,57.376,14.801z"/>
</g>
</svg>
</div>
<h1>Cookie Policy<span>(evil)</span></h1>
<p>Your private data will be sold to anonymous third parties and further in life they'll contact you offering services you never asked for.</p>
<button id="btn" type="button">Sure, I'll eat you</button>
<a id="deny" href="#">You won't fool me, little monster!</a>
</div>
Raw
script.js
setTimeout(function(){
$("#btn, #deny").css({"pointer-events": "all"});
}, 1000);
gsap.set("#leg-l, #leg-r", {scale: 0, transformOrigin: "top"});
gsap.set("#heart-na", {x: -12});
gsap.set("#mouth-no", {x: -10});
var rotate = gsap.timeline({repeat: -1});
rotate.to("#body", 6, {rotate: 360, transformOrigin: "center", ease: Linear.easeNone});
var agree = gsap.timeline({repeat: -1});
agree.to("#body", 1, {rotate: -12, y: 10, transformOrigin: "bottom", ease: "Elastic.easeOut(1, .90)"});
agree.to("#face", 2, {delay: -1, rotate: -18, transformOrigin: "center", ease: Elastic.easeOut});
agree.to("#body", 1, {delay: -1.8, rotate: 12, y: -10, transformOrigin: "bottom", ease: "Elastic.easeOut(1, .90)"});
agree.to("#body", 1, {delay: -1.8, rotate: 12, y: -10, transformOrigin: "bottom", ease: "Elastic.easeOut(1, .90)"});
agree.to("#leg-l, #leg-r", .5, {delay: -1.8, y: -12, x: 6, rotate: -30, transformOrigin: "top", ease: "Elastic.easeOut(1, .90)"});
agree.to("#face", 2, {delay: -1.8, rotate: 12, transformOrigin: "center", ease: Elastic.easeOut});
agree.to("#body", 1, {delay: -1.6, rotate: 0, y: 0, x: 0, transformOrigin: "bottom", ease: "Elastic.easeOut(1, .50)"});
agree.to("#leg-l, #leg-r", .5, {delay: -1.6, y: 0, x: 0, rotate: 0, transformOrigin: "top", ease: "Elastic.easeOut(1, .90)"});
agree.to("#face", 2, {delay: -1.6, rotate: 0, transformOrigin: "center", ease: Elastic.easeOut});
agree.to("#body", .15, {delay: -1.2, rotate: -12, transformOrigin: "center", y: -4, ease: Power1.easeInOut});
agree.to("#body", .15, {delay: -1.05, rotate: -12, transformOrigin: "center", y: 4, ease: Power1.easeInOut});
agree.to("#body", .15, {rotate: 12, transformOrigin: "center", y: -4, ease: Power1.easeInOut});
agree.to("#body", .15, {rotate: 12, transformOrigin: "center", y: 4, ease: Power1.easeInOut});
agree.pause();
var thought = gsap.timeline();
thought.to("#thought-1", .5, {opacity: .1});
thought.to("#thought-2", .5, {opacity: .1});
thought.to("#thought-heart-na", .5, {opacity: .1});
thought.to("#q-mark", .5, {delay: -.5, opacity: .1});
var deny = gsap.timeline();
deny.to("#face-no", .5, {opacity: 1, ease: Power3.easeOut});
deny.to("#mouth-no", 2, {x: 0, ease: Power3.easeOut});
deny.to("#leg-l", 1, {delay: -2, rotate: -30, ease: Power3.easeOut});
deny.to("#body", 1, {delay: -2, rotate: 12, transformOrigin: "center", ease: Power3.easeOut});
deny.to("#leg-l, #body",1, {delay: -1.5, rotate: 0, ease: Elastic.easeOut});
deny.pause();
var transition = function() {
var wrapper = gsap.timeline();
wrapper.to("#cookie-policy", 1, {scale: .8, ease: Bounce.easeOut});
wrapper.to("#cookie-policy", 1, {delay: -.25, x: -2400, ease: Power3.easeIn});
wrapper.to("#cookie-policy", 0, {x: 2400});
wrapper.to("#cookie-policy", 1, {delay: 1, x: 0, ease: Power3.easeOut});
wrapper.to("#cookie-policy", 1, {scale: 1, ease: Bounce.easeOut});
}
$("#btn").click(function(){
$("#btn, #deny").css({"pointer-events": "none"});
transition();
rotate.restart();
rotate.pause();
agree.play();
gsap.to("#leg-l, #leg-r", 1, {opacity: 1, scale: 1, transformOrigin: "top", ease: Elastic.easeOut});
gsap.to("#eyes, #mouth", .5, {opacity: 1, ease: Power3.easeOut});
gsap.to("#thought-1, #thought-2, #user-thought, #cookie-thought, #plus, #q-mark", 0, {opacity: 0, ease: Power3.easeOut});
gsap.to("#thought-heart-na", 3, {morphSVG: {shape: "#thought-heart-yes"}, scale: 1.3, x: 10, y: 10, fill: "red", ease: Power3.easeOut});
setTimeout(function(){
agree.restart();
agree.pause();
rotate.restart();
rotate.play();
thought.restart();
gsap.to("#user-thought, #plus, #cookie-thought", 0, {opacity: 1});
gsap.to("#eyes, #mouth", 0, {opacity: 0});
gsap.to("#leg-l, #leg-r", {scale: 0, transformOrigin: "top"});
}, 3000);
setTimeout(function(){
$("#btn, #deny").css({"pointer-events": "all"});
}, 4000);
gsap.to("#thought-heart-na", 0, {delay: 3, morphSVG: {shape: "#thought-heart-na"}, scale: 1, x: 0, y: 0, fill: "#6D3A1F", ease: Power3.easeOut});
});
$("#deny").click(function(){
$("#btn, #deny").css({"pointer-events": "none"});
transition();
deny.play();
rotate.restart();
rotate.pause();
gsap.to("#leg-l, #leg-r", 1, {opacity: 1, scale: 1, transformOrigin: "top", ease: Power3.easeOut});
gsap.to("#thought-heart-na", .1, {morphSVG:{shape:"#heart-no-1"}});
gsap.to("#thought-heart-na", .1, {delay: .05, morphSVG:{shape:"#heart-no-2"}});
gsap.to("#thought-heart-na", .1, {delay: .10, morphSVG:{shape:"#heart-no-3"}});
gsap.to("#thought-heart-na", .5, {opacity: 0});
gsap.to("#thought-1, #thought-2, #user-thought, #cookie-thought, #plus, #q-mark", 0, {opacity: 0, ease: Power3.easeOut});
setTimeout(function(){
deny.restart();
deny.pause();
rotate.play();
thought.restart();
gsap.to("#user-thought, #plus, #cookie-thought", 0, {opacity: 1});
gsap.to("#face-no", 0, {opacity: 0});
gsap.to("#leg-l, #leg-r", 0, {scale: 0, transformOrigin: "top"});
gsap.to("#thought-heart-na", .5, {morphSVG:{shape:"#thought-heart-na"}});
}, 3000);
setTimeout(function(){
$("#btn, #deny").css({"pointer-events": "all"});
}, 4000);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/CSSRulePlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EasePack.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/PixiPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/ScrollToPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js"></script>
Raw
style.css
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: "Poppins", sans-serif;
background: #e3d0b6;
}
#cookie-policy {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 460px;
height: 600px;
background: #f3efe6;
border-radius: 12px;
scale: .8;
}
#cookie-wrapper {
height: 240px;
width: 240px;
margin: 30px 0;
position: relative;
left: -40px;
}
h1 {
color: #6c3a1f;
text-align: center;
font-size: 36px;
margin: 0;
}
p {
color: #a28561;
font-size: 14px;
margin-top: 0;
padding: 0 60px;
text-align: center;
}
button {
color: white;
background: #dd794a;
margin-top: 12px;
cursor: pointer;
font-size: 24px;
font-family: "Poppins", sans-serif;
border-radius: 9px;
border: none;
width: 72%;
padding: 12px 0;
transition: 150ms ease-out;
pointer-events: none;
}
button:hover {
background: #d66029;
}
a {
margin-top: 18px;
font-size: 14px;
color: #a28561;
text-decoration: none;
pointer-events: none;
}
a:hover {
color: #846b4d;
}
span {
font-family: "Amatic SC", cursive;
font-weight: 400;
font-size: 20px;
position: relative;
top: -18px;
left: 3px;
color: #a28561;
}
#heart-no, #thought-heart-yes, #mouth, #face-no, #thought-1, #thought-2, #thought-heart-na, #q-mark, #eyes, #leg-l, #leg-r {
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment