Skip to content

Instantly share code, notes, and snippets.

@w3tweaks

w3tweaks/friendly-donut-toggle.markdown

Created October 11, 2020 16:38
Show Gist options
  • Save w3tweaks/533c6c1dd4c42d5b2a3b499522aa5c74 to your computer and use it in GitHub Desktop.
Save w3tweaks/533c6c1dd4c42d5b2a3b499522aa5c74 to your computer and use it in GitHub Desktop.
Download ZIP
Friendly Donut Toggle
Raw
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
height="390.549px" viewBox="0 0 500 374.549" enable-background="new 0 0 500 374.549" xml:space="preserve">
<g id="donut">
<g id="donut-arm-l">
<path fill="#D5925B" d="M97.285,197.375c0,0-0.465-0.04-1.337-0.116c-1.151-0.095-2.367-0.309-3.943-0.585
c-1.525-0.355-3.411-0.696-5.426-1.372c-2.063-0.577-4.285-1.441-6.682-2.432c-1.214-0.463-2.38-1.139-3.635-1.739
c-1.246-0.617-2.532-1.255-3.758-2.069c-1.244-0.779-2.522-1.58-3.828-2.398c-1.217-0.934-2.459-1.887-3.723-2.855
c-1.292-0.938-2.494-2.004-3.645-3.152c-1.17-1.124-2.355-2.261-3.549-3.406c-2.068-2.537-4.417-4.954-6.234-7.692
c-1.772-2.757-3.829-5.374-5.178-8.259c-1.415-2.844-3.102-5.538-4.078-8.359c-1.082-2.782-2.239-5.442-3.104-8.013
c-0.749-2.593-1.458-5.044-2.111-7.308c-0.718-2.25-1.145-4.342-1.47-6.201c-0.356-1.854-0.667-3.471-0.923-4.802
c-0.507-2.659-0.796-4.178-0.796-4.178c-0.744-3.906,1.819-7.677,5.727-8.421c3.757-0.716,7.389,1.629,8.322,5.284l0.16,0.631
c0,0,0.342,1.351,0.939,3.712c0.297,1.18,0.656,2.611,1.069,4.254c0.38,1.653,0.861,3.496,1.61,5.408
c0.678,1.938,1.412,4.036,2.189,6.256c0.87,2.165,1.991,4.331,3.021,6.632c0.941,2.365,2.483,4.417,3.75,6.69
c1.213,2.327,2.998,4.225,4.492,6.342c1.536,2.09,3.469,3.765,5.118,5.648c0.945,0.8,1.884,1.594,2.81,2.377
c0.897,0.818,1.828,1.56,2.822,2.172c0.958,0.657,1.9,1.304,2.822,1.938c0.976,0.529,1.931,1.047,2.859,1.552
c0.904,0.551,1.854,0.935,2.762,1.317c0.915,0.363,1.758,0.826,2.629,1.083c1.721,0.584,3.289,1.111,4.705,1.405
c1.404,0.402,2.623,0.509,3.605,0.7c0.967,0.103,1.746,0.195,1.973,0.182c0.219,0.026,0.832,0.025,0.768,0.027
c5.453,0.203,9.709,4.788,9.507,10.242C107.323,193.322,102.739,197.578,97.285,197.375z"/>
<path opacity="0.3" fill="#212121" d="M107.527,187.869c-0.203,5.453-4.788,9.709-10.242,9.506c0,0-0.465-0.04-1.337-0.116
c-1.151-0.095-2.367-0.309-3.943-0.585c-1.524-0.355-3.411-0.696-5.426-1.372c-2.063-0.577-4.285-1.441-6.682-2.432
c-1.214-0.463-2.38-1.139-3.635-1.739c-1.246-0.617-2.532-1.255-3.758-2.069c-1.244-0.779-2.522-1.58-3.828-2.398
c-1.217-0.934-2.459-1.887-3.723-2.855c-0.988-0.718-1.914-1.528-2.814-2.376c0.137-7.007,0.588-15.083,1.768-23.862
c0.424,0.545,0.842,1.093,1.24,1.656c1.536,2.09,3.469,3.765,5.118,5.648c0.945,0.8,1.884,1.594,2.81,2.377
c0.897,0.818,1.828,1.56,2.822,2.172c0.958,0.657,1.9,1.304,2.822,1.938c0.977,0.529,1.931,1.047,2.859,1.552
c0.904,0.551,1.854,0.935,2.762,1.317c0.915,0.363,1.758,0.826,2.629,1.083c1.721,0.584,3.289,1.111,4.705,1.405
c1.404,0.402,2.623,0.509,3.605,0.7c0.967,0.103,1.746,0.195,1.973,0.182c0.22,0.026,0.832,0.025,0.768,0.027
C103.473,177.83,107.73,182.415,107.527,187.869z"/>
</g>
<g id="donut-arm-r">
<path fill="#D5925B" d="M390.049,150.939c0,0,0.465,0.041,1.338,0.117c1.15,0.095,2.367,0.309,3.941,0.584
c1.525,0.356,3.412,0.697,5.426,1.373c2.063,0.576,4.287,1.441,6.684,2.432c1.213,0.463,2.379,1.139,3.633,1.738
c1.246,0.617,2.533,1.256,3.76,2.07c1.244,0.779,2.521,1.58,3.828,2.398c1.215,0.934,2.459,1.887,3.723,2.855
c1.291,0.938,2.494,2.004,3.645,3.152c1.17,1.123,2.354,2.26,3.547,3.406c2.068,2.536,4.418,4.954,6.234,7.692
c1.773,2.757,3.83,5.374,5.178,8.259c1.416,2.844,3.104,5.538,4.08,8.358c1.08,2.783,2.238,5.443,3.104,8.014
c0.75,2.593,1.457,5.044,2.111,7.307c0.717,2.251,1.145,4.343,1.469,6.202c0.357,1.854,0.668,3.471,0.924,4.802
c0.506,2.658,0.795,4.178,0.795,4.178c0.744,3.906-1.818,7.677-5.725,8.421c-3.758,0.716-7.389-1.629-8.324-5.284l-0.158-0.631
c0,0-0.342-1.35-0.939-3.712c-0.297-1.18-0.658-2.611-1.07-4.254c-0.379-1.653-0.861-3.496-1.609-5.409
c-0.678-1.937-1.414-4.035-2.189-6.255c-0.871-2.165-1.992-4.331-3.023-6.632c-0.939-2.365-2.482-4.418-3.75-6.69
c-1.213-2.327-2.996-4.225-4.49-6.343c-1.537-2.089-3.469-3.764-5.119-5.648c-0.945-0.799-1.883-1.593-2.811-2.376
c-0.896-0.818-1.828-1.56-2.82-2.172c-0.959-0.657-1.9-1.304-2.822-1.938c-0.977-0.529-1.932-1.048-2.861-1.552
c-0.904-0.551-1.852-0.936-2.762-1.317c-0.914-0.363-1.756-0.826-2.627-1.084c-1.723-0.583-3.289-1.111-4.705-1.404
c-1.404-0.402-2.623-0.51-3.605-0.701c-0.967-0.102-1.748-0.194-1.973-0.182c-0.221-0.025-0.832-0.025-0.77-0.026
c-5.453-0.203-9.709-4.788-9.506-10.242C380.01,154.993,384.596,150.736,390.049,150.939z"/>
<path opacity="0.3" fill="#212121" d="M420.624,163.16c1.518,10.489,2.203,19.874,2.684,27.43c-0.383-0.494-0.76-0.99-1.119-1.501
c-1.537-2.089-3.469-3.764-5.119-5.648c-0.945-0.799-1.883-1.593-2.811-2.376c-0.896-0.818-1.828-1.56-2.82-2.172
c-0.959-0.657-1.9-1.304-2.822-1.938c-0.977-0.529-1.932-1.048-2.861-1.552c-0.904-0.551-1.852-0.936-2.762-1.317
c-0.914-0.363-1.756-0.826-2.627-1.083c-1.721-0.584-3.289-1.112-4.705-1.405c-1.404-0.402-2.623-0.51-3.605-0.7
c-0.967-0.103-1.748-0.195-1.973-0.183c-0.221-0.025-0.832-0.025-0.77-0.026c-5.453-0.203-9.709-4.788-9.506-10.242
c0.203-5.453,4.789-9.71,10.242-9.507c0,0,0.465,0.041,1.338,0.117c1.15,0.094,2.367,0.309,3.941,0.584
c1.525,0.356,3.412,0.697,5.426,1.373c2.063,0.576,4.287,1.441,6.684,2.432c1.213,0.462,2.379,1.139,3.633,1.738
c1.246,0.617,2.533,1.256,3.76,2.07c1.244,0.779,2.521,1.58,3.828,2.398C419.301,162.144,419.967,162.656,420.624,163.16z"/>
</g>
<g id="donut-body">
<path fill="#D5925B" d="M416.233,209.916c-1.231-33.244-2.995-80.845-37.399-123.367c-26.852-33.186-60.81-47.489-79.2-53.35
c-12.598-4.015-70.469-20.825-129.25,10.45c-6.935,3.689-38.557,21.176-62.15,58.85c-27.739,44.294-26.635,88.159-25.857,108.182
c0.95,24.43,2.693,70.22,35.989,109.499c46.211,54.514,116.562,54.397,135.534,54.367c16.765-0.028,54.234-0.576,92.653-24.504
c11.724-7.302,44.683-28.475,61.258-70.447C417.873,254.116,417.088,232.983,416.233,209.916z M251.218,266.985
c-33.62,0-60.875-24.693-60.875-55.155c0-30.461,27.255-55.155,60.875-55.155c33.621,0,60.876,24.694,60.876,55.155
C312.094,242.292,284.839,266.985,251.218,266.985z"/>
<path fill="#DA9B68" d="M407.81,279.596c-2.131,5.396-4.536,10.443-7.129,15.167c0.777-1.743,1.538-3.511,2.257-5.332
c10.063-25.48,9.278-46.613,8.423-69.682c-1.231-33.243-2.995-80.845-37.399-123.366c-26.852-33.186-60.81-47.489-79.2-53.35
c-12.598-4.015-70.468-20.824-129.25,10.45c-6.935,3.689-38.557,21.176-62.149,58.85c-2.031,3.243-3.891,6.482-5.623,9.711
c2.936-6.457,6.393-12.996,10.494-19.546c23.594-37.674,55.216-55.161,62.15-58.85c58.781-31.274,116.652-14.465,129.25-10.45
c18.391,5.861,52.349,20.164,79.2,53.35c34.404,42.521,36.168,90.123,37.399,123.367
C417.088,232.983,417.873,254.116,407.81,279.596z"/>
<path fill="#C18153" d="M388.187,313.603c-15.805,20.044-33.647,31.466-41.635,36.44c-38.419,23.928-75.889,24.476-92.653,24.504
c-18.973,0.03-89.323,0.146-135.534-54.367c-33.296-39.279-35.04-85.069-35.989-109.499c-0.778-20.023-1.881-63.888,25.857-108.182
c6.138-9.8,12.818-18.223,19.467-25.404c-3.885,4.858-7.699,10.165-11.324,15.952c-27.739,44.294-26.635,88.159-25.857,108.182
c0.949,24.431,2.693,70.221,35.99,109.499c46.21,54.514,116.561,54.398,135.533,54.367c16.765-0.027,54.234-0.576,92.653-24.503
C361.331,336.459,374.767,327.878,388.187,313.603z"/>
<path fill="#C18153" d="M312.094,211.83c0,8.04-1.899,14.78-3.963,19.436c-10.34-11.811-17.317-22.161-21.816-29.518
c-4.594-7.511-5.832-10.639-10.337-14.06c-10.388-7.886-23.889-6.503-31.523-5.722c-6.474,0.663-15.001,1.536-23.413,7.552
c-6.517,4.66-9.75,10.11-13.342,16.313c-3.562,6.151-8.518,16.522-10.717,30.959c-4.213-7.502-6.64-15.967-6.64-24.961
c0-30.461,27.255-55.155,60.875-55.155C284.839,156.674,312.094,181.368,312.094,211.83z"/>
</g>
<g id="donut-cream">
<path fill="#FDD35D" d="M399.603,153.717c0.488-3.76,0.592-6.991-1.127-10.759c-1.451-3.182-4.027-6.729-7.143-8.455
c-0.377-0.209-0.723-0.33-1.072-0.466c-0.709-1.235-1.457-2.442-2.195-3.656c-0.289-5.712-0.426-11.142-5.799-15.733
c-2.01-1.717-4.221-2.354-6.348-2.285c-3.313-4.549-6.703-9.062-10.096-13.607c-9.369-12.561-18.24-26.222-30.037-36.695
c-1.561-1.384-3.158-2.725-4.828-3.988c-9.287-7.021-20.574-11.626-32.109-11.859c-8.955-8.784-24.303-12.421-36.092-14.113
c-14.76-2.119-29.016-0.329-43.643,1.736c-13.334,1.883-22.451,7.979-34.132,14.637c-0.661,0.376-1.226,0.801-1.751,1.243
c-1.982,1.163-3.68,2.957-4.707,5.547c-1.053,2.654-1.916,5.122-2.535,7.527c-1.188-0.974-2.529-1.743-3.994-2.26
c-3.582-1.265-7.814-1.129-11.871,0.651c-11.313,4.965-20.783,13.016-27.39,23.207c-2.131,3.287-3.974,6.789-5.472,10.492
c-3.346,8.275-2.701,15.538-4.144,24.086c-1.765,10.468-7.386,18.771-14.956,25.887c-5.114,4.807-5.155,10.744-2.549,15.43
c-7.85,12.931-11.889,27.868-11.64,43.061c-0.565,1.563-1.041,3.158-1.328,4.832c-1.114,6.506-0.417,13.037,1.163,19.41
c1.125,4.535,4.246,6.498,7.584,6.586c3.88,7.328,8.887,13.84,13.719,21.357c0.403,0.627,0.718,1.26,1.032,1.891
c-0.739,5.938-2.632,11.672-2.864,17.74c-0.115,3.014,1.306,5.352,3.412,6.93c-0.458,5.121-0.208,10.283,2.706,15.432
c5.164,9.123,14.761,12.385,24.505,13.506c0.916,1.355,1.791,2.758,3.012,3.877c3.575,3.271,10.835,3.963,14.408,6.975
c-0.029,3.1-0.052,6.127,0.388,7.807c3.244,12.414,14.353,18.527,26.576,17.629c6.448-0.475,11.059-3.59,16.725,0.125
c6.1,4,9.047,10.424,16.795,12.555c4.512,1.24,9.625,1.107,14.064-0.617c2.615,0.006,5.527-0.438,9.345-1.695
c4.161-1.369,6.997-2.586,9.882-2.822c3.273,1.162,6.43,2.098,9.559,2.766c0.066,0.039,0.119,0.059,0.186,0.098
c3.342,1.945,5.873,4.16,9.875,4.537c5.053,0.475,6.797-2.09,11.148-3.176c6.604-1.648,13.162,0.52,19.602-1.893
c7.758-2.908,8.816-8.461,11.805-14.02c4.807-2.477,9.723-4.67,14.986-5.975c14.883-3.689,28.215-4.215,35.697-19.662
c1.957-4.041,2.441-8.611,3.422-12.955c1.605-0.016,3.189-0.268,4.762-0.93c2.541-1.07,4.391-2.801,5.643-5.275
c0.973-1.92,0.994-3.676,1.016-5.518c1.508-2.551,3.141-5.033,4.541-7.674c0.291-0.547,0.582-1.09,0.875-1.631
c1.814-1.873,3.451-3.867,4.973-5.936c2.76-1.686,4.031-4.105,4.268-6.602c5.24-9.344,8.346-19.91,10.264-30.482
C413.011,211.353,410.261,181.306,399.603,153.717z M309.162,227.22c-0.287,1.572-0.668,3.041-1.105,4.447
c-0.074,0.563-0.193,1.441-0.35,2.514c-1.469,10.063-2.244,15.131-4.367,16.895c-2.994,2.488-5.779,0.16-9.609,3.039
c-2.52,1.896-3.633,4.648-4.174,6.533c-4.039-1.088-10.303-2.156-17.229-0.383c-11.654,2.98-11.68,10.539-19.527,11.869
c-15.305,2.592-26.322-24.285-45.943-22.59c-2.098,0.182-3.494,0.619-5.488-0.127c-8.399-3.15-9.554-20.672-9.166-35.313
c-0.008-0.107-0.01-0.217-0.018-0.326l0,0c-0.029-0.818-0.084-2.004-0.191-3.426c-1.053-14.086-4.591-16.814-2.876-22.066
c2.038-6.243,9.732-10.641,13.677-9.261c1.209,0.423,1.465,1.179,3.297,1.862c3.454,1.291,6.871,0.31,7.915-0.134
c6.812-2.892,7.631-13.524,14.597-16.284c5.49-2.176,12.607,0.164,18.916-1.109c6.016-1.214,9.057-0.974,14.738,0.244
c2.318,0.498,4.275,1.605,6.811,1.58c0.639-0.006,3.156-0.377,4.748-0.891c0.371,0.582,0.818,1.251,1.135,1.907
c2.145,4.421,5.703,8.28,10.535,9.784c1.908,0.595,5.547-0.263,6.914,0.578c1.143,0.701,0.75,2.068,2.238,4.531
c3.514,5.813,10.271,9.303,13.295,15.118C312.707,205.39,310.908,217.693,309.162,227.22z"/>
<path fill="#FDC238" d="M310.951,212.9c0.215-5.855-0.438-11.727-3.018-16.688c-3.023-5.814-9.781-9.305-13.295-15.118
c-1.488-2.463-1.096-3.83-2.238-4.531c-1.367-0.841-5.006,0.017-6.914-0.578c-4.832-1.504-8.391-5.363-10.535-9.784
c-0.316-0.656-0.764-1.325-1.135-1.907c-1.592,0.514-4.109,0.885-4.748,0.891c-2.535,0.025-4.492-1.082-6.811-1.58
c-5.682-1.218-8.723-1.458-14.738-0.244c-6.309,1.273-13.426-1.066-18.916,1.109c-6.966,2.76-7.785,13.393-14.597,16.284
c-1.044,0.443-4.461,1.425-7.915,0.134c-1.832-0.684-2.088-1.439-3.297-1.862c-3.03-1.06-8.266,1.296-11.457,5.274
c-0.972-3.777-1.653-5.927-0.695-8.86c2.038-6.243,9.732-10.641,13.677-9.261c1.21,0.422,1.466,1.178,3.298,1.863
c3.453,1.291,6.871,0.309,7.914-0.135c6.811-2.892,7.631-13.523,14.596-16.285c5.491-2.176,12.608,0.165,18.916-1.108
c6.018-1.214,9.057-0.974,14.738,0.244c2.318,0.497,4.277,1.604,6.811,1.58c0.641-0.007,3.156-0.378,4.75-0.892
c0.371,0.583,0.816,1.252,1.135,1.908c2.145,4.421,5.703,8.28,10.535,9.785c1.908,0.594,5.545-0.264,6.912,0.576
c1.143,0.702,0.75,2.068,2.24,4.531c3.514,5.813,10.271,9.303,13.295,15.119C313.988,192.078,312.597,203.601,310.951,212.9z"/>
<path fill="#FDC238" d="M409.855,223.957c-0.428,5.541-1.139,11.074-2.137,16.576c-1.918,10.572-5.023,21.139-10.264,30.482
c-0.236,2.496-1.508,4.916-4.268,6.602c-1.521,2.068-3.158,4.063-4.973,5.936c-0.293,0.541-0.584,1.084-0.875,1.631
c-1.4,2.641-3.033,5.123-4.541,7.674c-0.021,1.842-0.043,3.598-1.016,5.518c-1.252,2.475-3.102,4.205-5.643,5.275
c-1.572,0.662-3.156,0.914-4.762,0.93c-0.98,4.344-1.465,8.914-3.422,12.955c-7.482,15.447-20.814,15.973-35.697,19.662
c-5.264,1.305-10.18,3.498-14.986,5.975c-2.988,5.559-4.047,11.111-11.805,14.02c-6.439,2.412-12.998,0.244-19.602,1.893
c-4.352,1.086-6.096,3.65-11.148,3.176c-4.002-0.377-6.533-2.592-9.875-4.537c-0.066-0.039-0.119-0.059-0.186-0.098
c-3.129-0.668-6.285-1.604-9.559-2.766c-2.885,0.236-5.721,1.453-9.882,2.822c-3.817,1.258-6.729,1.701-9.345,1.695
c-4.439,1.725-9.553,1.857-14.064,0.617c-7.748-2.131-10.695-8.555-16.795-12.555c-5.666-3.715-10.276-0.6-16.725-0.125
c-12.224,0.898-23.332-5.215-26.576-17.629c-0.439-1.68-0.417-4.707-0.388-7.807c-3.573-3.012-10.833-3.703-14.408-6.975
c-1.221-1.119-2.096-2.521-3.012-3.877c-9.744-1.121-19.341-4.383-24.505-13.506c-2.914-5.148-3.164-10.311-2.706-15.432
c-2.106-1.578-3.527-3.916-3.412-6.93c0.143-3.75,0.921-7.373,1.669-10.994c0.399,2.129,1.617,3.84,3.268,5.076
c-0.458,5.121-0.208,10.283,2.705,15.432c5.164,9.123,14.762,12.385,24.506,13.506c0.916,1.355,1.791,2.76,3.012,3.877
c3.575,3.273,10.835,3.963,14.408,6.977c-0.029,3.098-0.052,6.127,0.387,7.807c3.246,12.412,14.354,18.527,26.576,17.627
c6.449-0.473,11.06-3.588,16.725,0.125c6.1,4,9.049,10.426,16.795,12.555c4.512,1.24,9.626,1.109,14.064-0.617
c2.617,0.006,5.529-0.438,9.346-1.693c4.16-1.371,6.998-2.588,9.881-2.822c3.275,1.162,6.43,2.096,9.559,2.766
c0.066,0.037,0.119,0.057,0.188,0.098c3.342,1.943,5.871,4.16,9.875,4.535c5.053,0.475,6.795-2.088,11.148-3.176
c6.604-1.648,13.16,0.521,19.6-1.893c7.76-2.906,8.816-8.461,11.807-14.02c4.807-2.477,9.721-4.67,14.984-5.975
c14.885-3.688,28.217-4.215,35.697-19.662c1.957-4.041,2.443-8.611,3.422-12.953c1.605-0.018,3.189-0.27,4.762-0.932
c2.541-1.07,4.393-2.801,5.645-5.273c0.971-1.922,0.994-3.678,1.016-5.52c1.508-2.549,3.139-5.031,4.541-7.672
c0.291-0.547,0.58-1.092,0.875-1.633c1.814-1.871,3.449-3.865,4.973-5.936c2.76-1.686,4.031-4.105,4.266-6.602
c5.242-9.344,8.348-19.908,10.266-30.482C409.468,226.445,409.658,225.201,409.855,223.957z"/>
<path fill="#FDDC79" d="M161.879,82.692c-3.381,1.252-5.702,6.334-7.376,9.19c-2.371,4.042-4.56,8.081-7.477,11.767
c-4.793,6.055-13.229-2.493-8.485-8.486c6.622-8.366,9.165-19.972,20.147-24.043C165.953,68.428,169.058,80.031,161.879,82.692z"/>
<path fill="#FDDC79" d="M270.603,54.435c-3.854-5.116-9.656-3.193-15.221-3.077c-6.983,0.146-14.016-0.31-20.997-0.503
c-6.362-0.176-11.722-0.436-17.462,2.655c-5.342,2.876-10.242,6.231-16.044,8.183c-7.349,2.471-10.472-9.123-3.19-11.571
c6.859-2.307,12.473-7.259,19.287-9.759c7.141-2.619,15.232-1.586,22.673-1.41c4.63,0.109,9.255,0.432,13.886,0.422
c3.832-0.008,7.689-0.667,11.51-0.438c7.023,0.422,11.811,3.985,15.92,9.442C285.617,54.553,275.193,60.527,270.603,54.435z"/>
<path fill="#FDDC79" d="M331.027,76.149c-2.105,2.104-6.473,2.542-8.484,0c-1.27-1.603-3.066-3.969-4.283-4.859
c-0.408-0.299,0.078-0.083-0.668-0.359c-0.59-0.218-1.199-0.362-1.789-0.588c-1.643-0.629-2.988-1.465-4.26-2.694
c-2.34-2.259-2.268-6.218,0-8.485c2.248-2.249,5.912-2.234,8.258-0.18c-0.133-0.076-0.119,0.003,0.141,0.112
c0.027,0.025,0.059,0.042,0.086,0.067c-0.025-0.024-0.045-0.04-0.068-0.06c0.061,0.024,0.131,0.05,0.217,0.076
c0.514,0.154,1.021,0.317,1.523,0.507c1.563,0.59,2.742,1.293,4.031,2.309c2.064,1.626,3.674,3.619,5.297,5.668
C333.044,70.213,333.539,73.638,331.027,76.149z"/>
<path fill="#FDDC79" d="M352.527,103.149c-2.396,2.395-6.053,2.137-8.484,0c-2.686-2.359-4.689-5.387-6.686-8.322
c-1.609-2.367-3.055-4.51-5.602-5.74c-2.93-1.416-3.689-5.58-2.152-8.209c1.727-2.951,5.293-3.562,8.209-2.152
c6.977,3.37,9.193,11.088,14.715,15.938C354.972,96.812,354.707,100.968,352.527,103.149z"/>
</g>
<g id="donut-topping">
<circle fill="#FE627A" cx="150.119" cy="148.253" r="7.383"/>
<circle fill="#FE627A" cx="168.662" cy="192.679" r="7.382"/>
<circle fill="#FE627A" cx="327.417" cy="185.297" r="7.383"/>
<circle fill="#FE627A" cx="362.391" cy="232.738" r="7.382"/>
<circle fill="#FE627A" cx="342.182" cy="286.021" r="7.382"/>
<circle fill="#FE627A" cx="303.265" cy="279.505" r="7.383"/>
<circle fill="#FE627A" cx="263.708" cy="326.605" r="7.383"/>
<circle fill="#FE627A" cx="132.928" cy="213.988" r="7.382"/>
<circle fill="#FE627A" cx="176.044" cy="248.191" r="7.382"/>
<circle fill="#FE627A" cx="189.131" cy="305.5" r="7.383"/>
<circle fill="#FE627A" cx="229.644" cy="293.405" r="7.383"/>
<circle fill="#FE627A" cx="327.417" cy="128.727" r="7.383"/>
<circle fill="#FE627A" cx="369.773" cy="165.781" r="7.383"/>
</g>
<g id="donut-face">
<path id="donut-eye-l" fill="#605448" d="M209.368,91.753c-1.234,0-2.296-0.928-2.433-2.182
c-0.446-4.066,0.718-8.063,3.278-11.254c2.559-3.191,6.209-5.193,10.275-5.64c8.387-0.918,15.971,5.159,16.893,13.554
c0.148,1.344-0.823,2.555-2.168,2.703c-1.354,0.153-2.557-0.825-2.703-2.168c-0.627-5.709-5.776-9.843-11.488-9.217
c-2.765,0.303-5.247,1.664-6.986,3.834c-1.742,2.17-2.533,4.887-2.23,7.651c0.148,1.347-0.822,2.556-2.167,2.704
C209.547,91.75,209.457,91.753,209.368,91.753z"/>
<path id="donut-eye-r" fill="#605448" d="M254.108,86.847c-1.234,0-2.296-0.93-2.434-2.184c-0.445-4.066,0.717-8.063,3.277-11.254
c2.559-3.189,6.209-5.193,10.275-5.639c4.059-0.447,8.063,0.717,11.254,3.277s5.193,6.209,5.639,10.275
c0.148,1.346-0.822,2.556-2.168,2.703c-1.355,0.155-2.557-0.824-2.703-2.169c-0.305-2.765-1.664-5.245-3.834-6.987
c-2.17-1.738-4.885-2.534-7.652-2.229c-2.766,0.303-5.248,1.666-6.986,3.835c-1.742,2.17-2.533,4.888-2.23,7.652
c0.148,1.345-0.822,2.556-2.168,2.703C254.288,86.842,254.196,86.847,254.108,86.847z"/>
<g>
<path id="donut-mouth" fill="#605448" d="M213.686,107.593c10.262,7.568,25.249,10.382,39.223,7.201
c15.186-3.455,22.922-12.565,24.561-14.592c1.135,2.009,4.412,8.57,0.469,15.832c-0.246,0.451-2.021,3.644-5.625,6.458
c-11.525,9.003-39.592,12.455-52.311,1.642C213.651,118.734,213.306,111.626,213.686,107.593z"/>
<path id="donut-tongue" fill="#E77D7D" d="M227.137,128.208c4.772-4.675,12.232-5.273,20.496-6.23
c8.791-1.02,16.656-1.865,22.453,2.052C259.633,130.529,240.264,133.287,227.137,128.208z"/>
</g>
</g>
<g id="donut-rolling-face">
<path id="donut-rolling-mouth" fill="#605448" d="M252.862,126.796c-4.807,0-8.703-3.896-8.703-8.703s3.896-8.703,8.703-8.703
s8.703,3.896,8.703,8.703S257.668,126.796,252.862,126.796z"/>
<path id="donut-rolling-eye-l" fill="#605448" d="M221.399,96.754c-3.675,0.001-7.329-1.408-10.092-4.144
c-5.943-5.943-5.943-15.507-0.065-21.387c2.346-2.346,5.466-3.638,8.783-3.638s6.438,1.292,8.783,3.638
c1.946,1.944,3.018,4.531,3.018,7.282c0,2.75-1.072,5.336-3.018,7.282c-1.623,1.624-3.782,2.519-6.079,2.519
s-4.457-0.894-6.081-2.519c-2.821-2.823-2.821-7.416,0-10.239c0.704-0.703,1.844-0.703,2.549,0c0.703,0.704,0.703,1.845,0,2.549
c-1.418,1.417-1.417,3.724,0,5.142c1.886,1.887,5.178,1.887,7.063,0c1.266-1.265,1.962-2.946,1.962-4.734
c0-1.789-0.697-3.47-1.962-4.733c-1.665-1.667-3.879-2.583-6.235-2.583c-2.356,0-4.57,0.916-6.235,2.582
c-4.474,4.474-4.474,11.752,0,16.226c3.691,3.653,9.384,4.183,13.599,1.315c0.819-0.559,1.942-0.347,2.503,0.475
c0.56,0.822,0.348,1.943-0.476,2.503C226.986,95.946,224.187,96.754,221.399,96.754L221.399,96.754z"/>
<path id="donut-rolling-eye-r" fill="#605448" d="M268.736,92.422c2.783,0,5.571-0.81,7.994-2.459
c0.822-0.56,1.036-1.681,0.477-2.503c-0.561-0.822-1.684-1.034-2.504-0.475c-4.213,2.867-9.912,2.337-13.545-1.262
c-4.527-4.526-4.527-11.804-0.054-16.278c3.438-3.439,9.034-3.438,12.473,0c2.609,2.61,2.609,6.857,0,9.468
c-1.948,1.947-5.119,1.947-7.066,0c-1.416-1.417-1.418-3.725,0-5.142c0.703-0.704,0.703-1.845,0-2.549
c-0.704-0.705-1.845-0.702-2.547,0c-2.822,2.823-2.822,7.416,0,10.239c3.354,3.352,8.81,3.351,12.161,0
c4.014-4.016,4.014-10.55,0-14.564c-4.843-4.843-12.727-4.843-17.568,0c-5.878,5.88-5.878,15.444,0,21.323
C261.364,90.996,265.045,92.422,268.736,92.422L268.736,92.422z"/>
</g>
</g>
</svg>
<a href="#"><div id="btnOn"></div></a>
<a href="#"><div id="btnOff"></div></a>
Raw
script.js
gsap.set("#svg", {x: -100, y: -2});
var tlDonut = gsap.timeline({repeat: -1, delay: .5});
tlDonut.to("#donut", 4, {transformOrigin: "center", rotate: 10, ease: Elastic.easeOut});
tlDonut.to("#donut-face", 4, {delay: -4, transformOrigin: "center", rotate: 15, ease: Elastic.easeOut});
tlDonut.to("#donut-eye-r", 2, {delay: -4, transformOrigin: "center", rotate: 15, ease: Power3.easeInOut});
tlDonut.to("#donut-eye-l", 2, {delay: -4, transformOrigin: "center", rotate: 15, ease: Power3.easeInOut});
tlDonut.to("#donut-arm-r", 4, {delay: -2, transformOrigin: "left", rotate: -15, ease: "elastic.out(1, 0.3)"});
tlDonut.to("#donut", 4, {transformOrigin: "center", rotate: -10, ease: Elastic.easeOut});
tlDonut.to("#donut-face", 8, {delay: -4, transformOrigin: "center", rotate: -10, ease: Elastic.easeOut});
tlDonut.to("#donut-eye-r", 2, {delay: -4, transformOrigin: "center", rotate: -15, ease: Power3.easeInOut});
tlDonut.to("#donut-eye-l", 2, {delay: -4, transformOrigin: "center", rotate: -15, ease: Power3.easeInOut});
tlDonut.to("#donut-arm-r", 4, {delay: -2, transformOrigin: "left", rotate: 15, x: 5, ease: "elastic.out(1, 0.3)"});
tlDonut.to("#donut", 4, {delay: -4, transformOrigin: "center", rotate: 0, ease: Elastic.easeOut});
tlDonut.to("#donut-face", 4, {delay: -4, transformOrigin: "center", rotate: 0, ease: Elastic.easeOut});
tlDonut.to("#donut-eye-r", 2, {delay: -4, transformOrigin: "center", rotate: 0, ease: Power3.easeInOut});
tlDonut.to("#donut-eye-l", 2, {delay: -4, transformOrigin: "center", rotate: 0, ease: Power3.easeInOut});
tlDonut.to("#donut-arm-r", 4, {delay: -2, transformOrigin: "left", rotate: 0, x: 0, ease: "elastic.out(1, 0.3)"});
var tlLaugh = gsap.timeline({repeat: -1});
tlLaugh.to("#donut-mouth", .15, {y: -4, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: -4, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: 4, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: 4, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: -3, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: -3, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: 3, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: 3, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: -2, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: -2, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: 2, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: 2, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: -1, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: -1, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: 1, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: 1, ease: Power1.easeInOut});
tlLaugh.to("#donut-mouth", .15, {y: 0, ease: Power1.easeInOut});
tlLaugh.to("#donut-tongue", .15, {delay: -.2, y: 0, ease: Power1.easeInOut});
tlLaugh.to({}, 1, {});
var tlHello = gsap.timeline({repeat: -1, delay: .5});
tlHello.to("#donut-arm-l", 4, {transformOrigin: "right", rotate: 30, x: 10, ease: "elastic.out(1, 0.3)"});
tlHello.to("#donut-arm-l", 4, {delay: -3.5, transformOrigin: "right", rotate: 20, x: 0, ease: "elastic.out(1, 0.3)"});
tlHello.to("#donut-arm-l", 4, {delay: -3.5, transformOrigin: "right", rotate: 30, x: 10, ease: "elastic.out(1, 0.3)"});
tlHello.to("#donut-arm-l", 4, {delay: -1, rotate: 0, x: 0, ease: "elastic.out(1, 0.3)"});
$("#btnOn").click(function(){
$("#btnOn, #btnOff").css({
"pointer-events": "none"
});
setTimeout(function(){
$("#btnOn, #btnOff").css({
"pointer-events": "all"
});
}, 2500);
$(this).fadeToggle();
$("#btnOff").show();
gsap.to("#svg", 2, {rotate: 360, x: 100, ease: Power3.easeInOut});
gsap.to("#donut-arm-l", .5, {x: 20, scale: 0, ease: Power1.easeInOut});
gsap.to("#donut-arm-r", .5, {x: -20, scale: 0, ease: Power1.easeInOut});
gsap.to("#donut-eye-l", .5, {delay: .25, morphSVG: {
shape: "#donut-rolling-eye-l",
ease: Power1.easeInOut
}});
gsap.to("#donut-eye-r", .5, {delay: .25, morphSVG: {
shape: "#donut-rolling-eye-r",
ease: Power1.easeInOut
}});
gsap.to("#donut-mouth", .5, {delay:.25, morphSVG: {
shape: "#donut-rolling-mouth",
ease: Power1.easeInOut
}});
gsap.to("#donut-tongue", .5, {opacity: 0});
setTimeout(function(){
gsap.to("#donut-eye-l", .5, {morphSVG: {
shape: "#donut-eye-l",
ease: Power1.easeInOut
}});
gsap.to("#donut-eye-r", .5, {morphSVG: {
shape: "#donut-eye-r",
ease: Power1.easeInOut
}});
gsap.to("#donut-mouth", .5, {morphSVG: {
shape: "#donut-mouth",
shapeIndex: 2,
ease: Power1.easeInOut
}});
gsap.to("#donut-tongue", .5, {opacity: 1});
gsap.to("#donut-arm-l", 1, {x: 0, scale: 1, ease: Power1.easeInOut});
gsap.to("#donut-arm-r", 1, {x: 0, scale: 1, ease: Power1.easeInOut});
}, 1800);
});
$("#btnOff").click(function(){
$(this).fadeToggle();
$("#btnOn").fadeToggle();
$("#btnOn, #btnOff").css({
"pointer-events": "none"
});
setTimeout(function(){
$("#btnOn, #btnOff").css({
"pointer-events": "all"
});
}, 2500);
gsap.to("#svg", 2, {rotate: 0, x: -100, ease: Power3.easeInOut});
gsap.to("#donut-arm-l", .5, {x: 20, scale: 0, ease: Power1.easeInOut});
gsap.to("#donut-arm-r", .5, {x: -20, scale: 0, ease: Power1.easeInOut});
gsap.to("#donut-eye-l", .5, {delay:.25, morphSVG: {
shape: "#donut-rolling-eye-l",
ease: Power1.easeInOut
}});
gsap.to("#donut-eye-r", .5, {delay:.25, morphSVG: {
shape: "#donut-rolling-eye-r",
ease: Power1.easeInOut
}});
gsap.to("#donut-mouth", .5, {delay:.25,morphSVG: {
shape: "#donut-rolling-mouth",
ease: Power1.easeInOut
}});
gsap.to("#donut-tongue", .5, {opacity: 0});
setTimeout(function(){
gsap.to("#donut-eye-l", .5, {morphSVG: {
shape: "#donut-eye-l",
ease: Power1.easeInOut
}});
gsap.to("#donut-eye-r", .5, {morphSVG: {
shape: "#donut-eye-r",
ease: Power1.easeInOut
}});
gsap.to("#donut-mouth", .5, {morphSVG: {
shape: "#donut-mouth",
shapeIndex: 2,
ease: Power1.easeInOut
}});
gsap.to("#donut-tongue", .5, {opacity: 1});
gsap.to("#donut-arm-l", 1, {x: 0, scale: 1, ease: Power1.easeInOut});
gsap.to("#donut-arm-r", 1, {x: 0, scale: 1, ease: Power1.easeInOut});
}, 1800);
});
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
:root {
--bg: hsla(44, 98%, 15%, 1);
--accent: #5a5f73;
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
}
svg {
transform: scale(.3);
position: absolute;
pointer-events: none;
z-index: 3;
}
#donut-rolling-face {
opacity: 0;
}
a {
position: absolute;
outline: none;
}
#btnOn {
width: 270px;
height: 90px;
background: hsla(44, 98%, 10%, 1);
border: 3px solid hsla(44, 98%, 68%, 1);
border-radius: 50px;
cursor: pointer;
position: relative;
z-index: 2;
}
#btnOff {
width: 270px;
height: 90px;
background: hsla(44, 98%, 25%, 1);
border: 3px solid hsla(44, 98%, 68%, 1);
border-radius: 50px;
cursor: pointer;
position: relative;
z-index: 1
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment