<div class="hidden">
<svg version="1.1" id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#FFD347;" cx="255.997" cy="255.997" r="144.824" />
<path style="fill:#FFD347;" d="M256,56.849c-4.273,0-7.737-3.463-7.737-7.737V7.737C248.263,3.463,251.727,0,256,0
s7.737,3.463,7.737,7.737v41.376C263.737,53.386,260.273,56.849,256,56.849z" />
<path style="fill:#FFD347;" d="M152.563,84.568c-2.674,0-5.274-1.387-6.707-3.869l-20.687-35.832
c-2.136-3.7-0.869-8.432,2.832-10.569c3.701-2.134,8.432-0.87,10.569,2.832l20.687,35.832c2.136,3.7,0.869,8.432-2.832,10.569
C155.206,84.234,153.876,84.568,152.563,84.568z" />
<path style="fill:#FFD347;" d="M76.823,160.294c-1.312,0-2.643-0.334-3.861-1.038L37.13,138.569
c-3.7-2.136-4.968-6.868-2.832-10.569c2.136-3.701,6.868-4.967,10.569-2.832l35.832,20.687c3.7,2.136,4.968,6.868,2.832,10.569
C82.097,158.907,79.497,160.294,76.823,160.294z" />
<path style="fill:#FFD347;" d="M49.112,263.737H7.737C3.464,263.737,0,260.274,0,256s3.464-7.737,7.737-7.737h41.376
c4.273,0,7.737,3.463,7.737,7.737S53.385,263.737,49.112,263.737z" />
<path style="fill:#FFD347;" d="M41.005,387.869c-2.674,0-5.274-1.387-6.707-3.869c-2.136-3.7-0.869-8.432,2.832-10.569
l35.832-20.687c3.7-2.134,8.432-0.87,10.569,2.832c2.136,3.7,0.869,8.432-2.832,10.569l-35.832,20.687
C43.648,387.535,42.317,387.869,41.005,387.869z" />
<path style="fill:#FFD347;" d="M131.862,478.74c-1.312,0-2.643-0.334-3.861-1.038c-3.7-2.136-4.968-6.868-2.832-10.569
l20.687-35.832c2.136-3.701,6.868-4.967,10.569-2.832c3.7,2.136,4.968,6.868,2.832,10.569l-20.687,35.832
C137.136,477.352,134.536,478.74,131.862,478.74z" />
<path style="fill:#FFD347;" d="M256,512c-4.273,0-7.737-3.463-7.737-7.737v-41.376c0-4.274,3.464-7.737,7.737-7.737
s7.737,3.463,7.737,7.737v41.376C263.737,508.537,260.273,512,256,512z" />
<path style="fill:#FFD347;" d="M380.138,478.74c-2.674,0-5.274-1.387-6.707-3.869l-20.687-35.832
c-2.136-3.7-0.869-8.432,2.832-10.569c3.7-2.134,8.432-0.87,10.569,2.832l20.687,35.832c2.136,3.7,0.869,8.432-2.832,10.569
C382.781,478.406,381.451,478.74,380.138,478.74z" />
<path style="fill:#FFD347;" d="M470.995,387.869c-1.312,0-2.643-0.334-3.861-1.038l-35.832-20.687
c-3.7-2.136-4.968-6.868-2.832-10.569c2.136-3.701,6.868-4.967,10.569-2.832l35.832,20.687c3.7,2.136,4.968,6.868,2.832,10.569
C476.269,386.481,473.669,387.869,470.995,387.869z" />
<path style="fill:#FFD347;" d="M504.263,263.737h-41.376c-4.273,0-7.737-3.463-7.737-7.737s3.464-7.737,7.737-7.737h41.376
c4.273,0,7.737,3.463,7.737,7.737S508.536,263.737,504.263,263.737z" />
<path style="fill:#FFD347;" d="M435.177,160.294c-2.674,0-5.274-1.387-6.707-3.869c-2.136-3.7-0.869-8.432,2.832-10.569
l35.832-20.687c3.7-2.134,8.432-0.87,10.569,2.832c2.136,3.7,0.869,8.432-2.832,10.569l-35.832,20.687
C437.82,159.96,436.489,160.294,435.177,160.294z" />
<path style="fill:#FFD347;" d="M359.437,84.568c-1.312,0-2.643-0.334-3.861-1.038c-3.7-2.136-4.968-6.868-2.832-10.569
l20.687-35.832c2.136-3.701,6.868-4.967,10.569-2.832c3.7,2.136,4.968,6.868,2.832,10.569l-20.687,35.832
C364.711,83.181,362.11,84.568,359.437,84.568z" />
</svg>
<svg version="1.1" id="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="m469.5 256c0 48.07-15.886 92.43-42.696 128.115-38.952 51.848-95.996 76.502-165.838 76.502-117.913 0-208.534-86.704-208.534-204.617 0-68.407 22.24-129.3 72.28-168.374 36.212-28.277 81.782-45.126 131.288-45.126 117.913 0 213.5 95.587 213.5 213.5z" fill="#e3e0e4" />
<path d="m433.97 373.97c-38.24 57.58-103.67 95.53-177.97 95.53-117.91 0-213.5-95.59-213.5-213.5 0-74.3 37.95-139.73 95.53-177.97-22.45 33.79-35.53 74.35-35.53 117.97 0 117.91 95.59 213.5 213.5 213.5 43.62 0 84.18-13.08 117.97-35.53z" fill="#d4cfd5" />
<path d="m430.674 11.078 7.746 15.493c.194.387.507.701.894.894l15.493 7.746c1.474.737 1.474 2.841 0 3.578l-15.493 7.746c-.387.194-.701.507-.894.894l-7.746 15.493c-.737 1.474-2.841 1.474-3.578 0l-7.746-15.492c-.194-.387-.507-.701-.894-.894l-15.493-7.746c-1.474-.737-1.474-2.841 0-3.578l15.493-7.746c.387-.194.701-.507.894-.894l7.746-15.493c.737-1.475 2.841-1.475 3.578-.001z" fill="#5d91b9" />
<path d="m68.211 500.922-7.746-15.493c-.194-.387-.507-.701-.894-.894l-15.493-7.746c-1.474-.737-1.474-2.841 0-3.578l15.493-7.746c.387-.194.701-.507.894-.894l7.746-15.493c.737-1.474 2.841-1.474 3.578 0l7.746 15.493c.194.387.507.701.894.894l15.493 7.746c1.474.737 1.474 2.841 0 3.578l-15.493 7.746c-.387.194-.701.507-.894.894l-7.746 15.493c-.737 1.474-2.841 1.474-3.578 0z" fill="#5d91b9" />
<path d="m194 224c0 5.247-1.063 10.245-2.986 14.791-5.769 13.639-19.104 17.709-34.844 17.709-20.987 0-30.745-10.013-30.745-31 0-15.68 2.071-30.641 15.626-36.447 4.589-1.965 9.642-3.053 14.949-3.053 20.987 0 38 17.013 38 38z" fill="#d4cfd5" />
<path d="m288.5 383.5c0 8.686-2.914 16.691-7.818 23.091-6.945 9.064-17.881 8.238-30.182 8.238-20.987 0-38-10.343-38-31.33s17.013-38 38-38 38 17.014 38 38.001z" fill="#d4cfd5" />
<path d="m280.68 406.59c-6.94 9.07-17.88 14.91-30.18 14.91-20.99 0-38-17.01-38-38 0-.24 0-.48.01-.72 20.83 11.57 43.8 19.76 68.17 23.81z" fill="#c5bec6" />
<path d="m378.5 172.5c0 4.425-1.25 8.558-3.415 12.066-4.051 6.562-10.658 9.328-18.936 9.328-12.703 0-21.362-8.481-21.362-21.184 0-9.192 3.105-17.335 10.899-21.017 2.977-1.406 6.303-2.193 9.814-2.193 12.703 0 23 10.297 23 23z" fill="#d4cfd5" />
<path d="m395.5 348.5c0 3.035-.588 5.933-1.656 8.586-3.402 8.45-11.677 10.085-21.344 10.085-12.703 0-16.351-5.758-16.351-18.46 0-11.115 1.235-20.598 11.716-22.743 1.497-.306 3.047-.467 4.635-.467 12.703-.001 23 10.296 23 22.999z" fill="#d4cfd5" />
<path d="m190.95 238.95c-5.8 13.55-19.27 23.05-34.95 23.05-20.99 0-38-17.01-38-38 0-15.68 9.5-29.15 23.05-34.95-1.96 4.59-3.05 9.64-3.05 14.95 0 20.99 17.01 38 38 38 5.31 0 10.36-1.09 14.95-3.05z" fill="#c5bec6" />
<path d="m376.83 181.08c-3.39 8.45-11.66 14.42-21.33 14.42-12.7 0-23-10.3-23-23 0-11.22 8.04-20.57 18.67-22.58-1.08 2.65-1.67 5.55-1.67 8.58 0 12.7 10.3 23 23 23 1.48 0 2.93-.14 4.33-.42z" fill="#c5bec6" />
<path d="m393.83 357.08c-3.39 8.45-11.66 14.42-21.33 14.42-12.7 0-23-10.3-23-23 0-11.22 8.04-20.57 18.67-22.58-1.08 2.65-1.67 5.55-1.67 8.58 0 12.7 10.3 23 23 23 1.48 0 2.93-.14 4.33-.42z" fill="#c5bec6" />
<circle cx="264.5" cy="110" fill="#d4cfd5" r="15.5" />
<circle cx="254" cy="243" fill="#d4cfd5" r="17.5" />
<circle cx="94" cy="298" fill="#c5bec6" r="14.5" />
<circle cx="400" cy="271" fill="#d4cfd5" r="14.5" />
<circle cx="163.5" cy="149.5" fill="#d4cfd5" r="7.33" />
<circle cx="152.5" cy="351.5" fill="#c5bec6" r="7.33" />
<g fill="#d4cfd5">
<circle cx="345.5" cy="399.5" r="7.33" />
<circle cx="429.5" cy="218.5" r="7.33" />
<circle cx="325.5" cy="107.5" r="7.33" />
</g>
</g>
<g>
<path d="m441.706 136.144c-22.484-34.769-54.117-62.469-91.477-80.104-3.745-1.768-8.216-.166-9.983 3.581-1.769 3.746-.165 8.216 3.581 9.984 71.787 33.887 118.173 107.051 118.173 186.395 0 19.146-2.624 38.103-7.798 56.344-1.131 3.985 1.184 8.132 5.168 9.262.685.194 1.373.287 2.051.287 3.27 0 6.275-2.154 7.211-5.455 5.553-19.573 8.368-39.907 8.368-60.438 0-42.707-12.204-84.152-35.294-119.856z" />
<path d="m452.248 340.549c-3.738-1.773-8.215-.178-9.989 3.565-33.94 71.613-107.051 117.886-186.259 117.886-113.589 0-206-92.411-206-206s92.411-206 206-206c18.854 0 37.529 2.544 55.509 7.563 3.994 1.116 8.127-1.218 9.24-5.207 1.114-3.99-1.218-8.127-5.207-9.24-19.293-5.386-39.326-8.116-59.542-8.116-59.031 0-114.529 22.988-156.271 64.729s-64.729 97.24-64.729 156.271 22.988 114.529 64.729 156.271 97.24 64.729 156.271 64.729c42.646 0 84.043-12.172 119.714-35.202 34.734-22.425 62.433-53.982 80.1-91.26 1.774-3.743.177-8.215-3.566-9.989z" />
<path d="m504.5 376.5h-5v-5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v5h-5c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h5v5c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-5h5c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z" />
<path d="m40 118c0-4.142-3.357-7.5-7.5-7.5h-5v-5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v5h-5c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h5v5c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-5h5c4.143 0 7.5-3.358 7.5-7.5z" />
<path d="m201.5 224c0-25.089-20.411-45.5-45.5-45.5-10.938 0-21.51 3.938-29.77 11.09-3.132 2.711-3.472 7.448-.761 10.579 2.712 3.133 7.448 3.47 10.579.761 5.534-4.791 12.619-7.43 19.951-7.43 16.817 0 30.5 13.682 30.5 30.5s-13.683 30.5-30.5 30.5c-15.699 0-28.742-11.755-30.339-27.344-.422-4.12-4.092-7.127-8.226-6.697-4.12.422-7.118 4.104-6.696 8.225 2.384 23.269 21.842 40.816 45.262 40.816 25.089 0 45.5-20.411 45.5-45.5z" />
<path d="m250.5 414c-1.62 0-3.244-.127-4.828-.379-4.092-.653-7.935 2.141-8.583 6.231-.649 4.091 2.141 7.934 6.231 8.583 2.359.375 4.774.564 7.18.564 25.089 0 45.5-20.411 45.5-45.5s-20.411-45.499-45.5-45.499-45.5 20.411-45.5 45.5c0 7.008 1.553 13.733 4.615 19.988 1.822 3.719 6.313 5.258 10.034 3.438 3.721-1.821 5.26-6.314 3.438-10.034-2.049-4.184-3.088-8.689-3.088-13.392 0-16.818 13.683-30.5 30.5-30.5s30.5 13.682 30.5 30.5-13.682 30.5-30.499 30.5z" />
<path d="m355.5 142c-16.817 0-30.5 13.682-30.5 30.5s13.683 30.5 30.5 30.5 30.5-13.682 30.5-30.5-13.683-30.5-30.5-30.5zm0 46c-8.547 0-15.5-6.953-15.5-15.5s6.953-15.5 15.5-15.5 15.5 6.953 15.5 15.5-6.953 15.5-15.5 15.5z" />
<path d="m403 348.5c0-16.818-13.683-30.5-30.5-30.5s-30.5 13.682-30.5 30.5 13.683 30.5 30.5 30.5 30.5-13.682 30.5-30.5zm-46 0c0-8.547 6.953-15.5 15.5-15.5s15.5 6.953 15.5 15.5-6.953 15.5-15.5 15.5-15.5-6.953-15.5-15.5z" />
<path d="m287.5 110c0-12.682-10.317-23-23-23s-23 10.318-23 23 10.317 23 23 23 23-10.318 23-23zm-31 0c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8-8-3.589-8-8z" />
<path d="m229 243c0 13.785 11.215 25 25 25s25-11.215 25-25-11.215-25-25-25-25 11.215-25 25zm25-10c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10z" />
<path d="m94 276c-12.131 0-22 9.869-22 22s9.869 22 22 22 22-9.869 22-22-9.869-22-22-22zm0 29c-3.859 0-7-3.14-7-7s3.141-7 7-7 7 3.14 7 7-3.141 7-7 7z" />
<path d="m422 271c0-12.131-9.869-22-22-22s-22 9.869-22 22 9.869 22 22 22 22-9.869 22-22zm-22 7c-3.859 0-7-3.14-7-7s3.141-7 7-7 7 3.14 7 7-3.141 7-7 7z" />
<circle cx="163.5" cy="149.504" r="7.496" />
<circle cx="325.5" cy="107.5" r="7.496" />
<circle cx="429.5" cy="218.503" r="7.496" />
<circle cx="345.5" cy="399.5" r="7.496" />
<circle cx="152.5" cy="351.5" r="7.496" />
</g>
</g>
</svg>
</div>
<h1 class="challenge-title">Switch Dark</h1>
<h2 class="challenge-subtitle">#28ComponentsOfFebruaryDay4</h2>
<p class="challenge-part-of">Part of <a href="https://codepen.io/collection/DQRePJ" target="_blank">28 Components of February</a> collection.</p>
<div class="container">
<button class="btn btn-switch" role="checkbox" aria-checked="false">
<span class="sr-only">Switch</span>
<span class="tick">
<svg class="icon sun">
<use xlink:href="#sun" />
</svg>
<svg class="icon moon">
<use xlink:href="#moon" />
</svg>
</span>
</button>
</div>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 801.90879 212.81068">
<path class="letter letter-s" d="M84.34338,101.49515A33.29437,33.29437,0,0,0,71.60244,90.145,93.68539,93.68539,0,0,0,50.56631,82.57a103.54316,103.54316,0,0,1-12.24419-3.70056c-2.75677-1.09279-4.64434-2.21045-5.63785-3.37783a6.37588,6.37588,0,0,1-1.515-4.32146,6.91671,6.91671,0,0,1,3.45225-6.10959c2.30974-1.51512,5.56327-2.26017,9.76058-2.26017a47.08562,47.08562,0,0,1,14.05718,2.30974,76.56409,76.56409,0,0,1,13.337,5.464,7.93816,7.93816,0,0,0,1.34125.24845c1.36595,0,2.558-.81963,3.52668-2.434l7.873-13.21284a4.73462,4.73462,0,0,0,.8445-2.558c0-1.44054-.89407-2.65748-2.65749-3.62613A79.01559,79.01559,0,0,0,65.17,41.59044,70.73539,70.73539,0,0,0,44.38214,38.4362q-11.8841,0-20.4898,4.29675a32.04745,32.04745,0,0,0-13.11355,11.3997,28.266,28.266,0,0,0-4.47047,15.3487c0,7.02867,1.41568,12.81553,4.2966,17.33572A30.79638,30.79638,0,0,0,23.023,97.74488a104.56264,104.56264,0,0,0,21.235,7.3764q10.05844,2.57055,14.67808,5.29011c3.0548,1.813,4.59463,4.17245,4.59463,7.07823,0,3.00523-1.49011,5.1411-4.47048,6.43248-3.00507,1.29152-7.40111,1.93729-13.23754,1.93729q-14.0449,0-31.1446-8.84166a5.95935,5.95935,0,0,0-2.68234-.72019,3.94661,3.94661,0,0,0-3.40254,2.16073L.84434,132.16771A4.37842,4.37842,0,0,0,0,134.7259c0,1.366.79477,2.50847,2.409,3.37768a110.90286,110.90286,0,0,0,19.64546,8.44434,75.5915,75.5915,0,0,0,23.76819,3.82471q19.8936,0,31.41761-8.12146c7.67442-5.43912,11.524-13.26241,11.524-23.5446C88.76428,111.85178,87.29889,106.08978,84.34338,101.49515Z" />
<path class="letter letter-c" d="M185.89833,117.01773a3.11153,3.11153,0,0,0-2.65748-1.34109,4.74291,4.74291,0,0,0-2.1856.6209,34.01759,34.01759,0,0,1-22.4518,8.36976,28.08445,28.08445,0,0,1-14.90167-4.14774,30.59928,30.59928,0,0,1-10.80366-11.07682,30.583,30.583,0,0,1-.04972-30.15109,29.3511,29.3511,0,0,1,10.72923-10.90309A28.66773,28.66773,0,0,1,158.50416,64.39q11.99574,0,22.6754,8.59335a3.79994,3.79994,0,0,0,2.18544.74506,3.14506,3.14506,0,0,0,2.65748-1.58955l9.71086-14.77753a4.43569,4.43569,0,0,0,.84464-2.43389,3.49507,3.49507,0,0,0-1.34124-2.55819,57.4927,57.4927,0,0,0-37.10518-13.58529A56.19963,56.19963,0,0,0,109.50239,66.501a55.52079,55.52079,0,0,0,.04972,55.90614,56.4539,56.4539,0,0,0,20.51466,20.31593,54.95733,54.95733,0,0,0,28.18894,7.52542,53.92275,53.92275,0,0,0,19.695-3.651,57.63162,57.63162,0,0,0,17.0377-10.18275,3.43813,3.43813,0,0,0,1.58954-2.78163,3.3049,3.3049,0,0,0-.84464-2.1856Z" />
<path class="letter letter-r" d="M302.92613,48.37065a31.82331,31.82331,0,0,0-11.69771-7.277,42.79329,42.79329,0,0,0-14.728-2.53333A37.48575,37.48575,0,0,0,258.37,43.22955a40.447,40.447,0,0,0-14.25591,12.66652l-2.18529-11.8966c-.32318-1.44039-1.46555-2.16073-3.40284-2.16073H223.12765a3.61216,3.61216,0,0,0-2.60791.89421,3.42219,3.42219,0,0,0-.89376,2.48361v98.351c0,2.35946,1.1175,3.52668,3.37737,3.52668h19.422c2.25987,0,3.37768-1.16722,3.37768-3.52668V87.66142A24.617,24.617,0,0,1,249.37961,74.697a25.98291,25.98291,0,0,1,9.7107-9.413A26.94127,26.94127,0,0,1,272.477,61.83179a30.42634,30.42634,0,0,1,8.74237,1.34124,23.33961,23.33961,0,0,1,7.87316,3.99858l.8692.7202a2.21254,2.21254,0,0,0,1.689.6209,2.77147,2.77147,0,0,0,2.65733-1.5894L303.423,52.866a4.01436,4.01436,0,0,0,.72-2.18559A2.66674,2.66674,0,0,0,302.92613,48.37065Z" />
<path class="letter letter-p" d="M425.34349,65.95467a49.8223,49.8223,0,0,0-18.00619-19.993,47.38951,47.38951,0,0,0-25.95393-7.277,45.36306,45.36306,0,0,0-21.28443,5.0168,44.62606,44.62606,0,0,0-16.0692,14.25591l-2.18529-14.05718c-.22374-1.31639-1.16723-1.962-2.78194-1.962H323.06819a3.16363,3.16363,0,0,0-2.38417.96849,3.69315,3.69315,0,0,0-.89406,2.55819V195.59927a3.58675,3.58675,0,0,0,.89406,2.53318,3.09477,3.09477,0,0,0,2.38417.9935h19.52146a3.62279,3.62279,0,0,0,2.60762-.91892,3.53322,3.53322,0,0,0,.89406-2.60776l-.22344-62.21447a44.59084,44.59084,0,0,0,15.62172,12.4925,45.80562,45.80562,0,0,0,20.01806,4.37118,47.41908,47.41908,0,0,0,25.82963-7.277,50.05535,50.05535,0,0,0,18.00619-20.01791,61.88709,61.88709,0,0,0,6.48219-28.48711A61.9902,61.9902,0,0,0,425.34349,65.95467Zm-22.97342,43.662a29.36167,29.36167,0,0,1-10.80365,10.90294,28.66348,28.66348,0,0,1-14.90168,4.02344,30.38909,30.38909,0,0,1-15.39857-4.02344,29.66308,29.66308,0,0,1-11.10168-10.85338,28.96016,28.96016,0,0,1-4.07316-15.07554,30.2666,30.2666,0,0,1,30.44911-30.449,28.8657,28.8657,0,0,1,14.97626,4.073,29.8282,29.8282,0,0,1,10.85337,11.02724,30.37143,30.37143,0,0,1,3.99858,15.34871A29.58846,29.58846,0,0,1,402.37007,109.61662Z" />
<path class="letter letter-t" d="M482.64029,85.78243v-18.735h7.43647a1.8078,1.8078,0,0,0,1.65582-1.08225L501.656,43.31854a.985.985,0,0,0-.90221-1.38036H482.64029V3.26831a3.80328,3.80328,0,0,0-.64576-2.30974A2.2704,2.2704,0,0,0,480.107.11408a5.97933,5.97933,0,0,0-1.34125.2483l-19.76946,7.749a3.77035,3.77035,0,0,0-2.78133,3.87443V41.93818h-11.8966c-2.161,0-3.25368,1.09279-3.25368,3.27838V63.76908c0,2.18559,1.09265,3.27838,3.25368,3.27838h12.0206v77.57779a2.79643,2.79643,0,0,0,5.33751,1.16746L482.26024,87.52A4.162,4.162,0,0,0,482.64029,85.78243Z" />
<path class="letter letter-t" d="M511.54905,64.355a17.15221,17.15221,0,0,0-.9184,5.53729v74.04789a3.29874,3.29874,0,0,0,.84465,2.43389,3.36385,3.36385,0,0,0,2.43389.84434h19.8689c2.11071,0,3.15424-1.09279,3.15424-3.27823V67.04746h25.109a3.27854,3.27854,0,0,0,3.27854-3.27854V45.21672a3.27854,3.27854,0,0,0-3.27854-3.27854h-25.109V2.01a2.00728,2.00728,0,0,0-3.83284-.83458Z" />
<path class="letter letter-a" d="M664.81351,57.83321a38.83426,38.83426,0,0,0-16.839-14.18133q-10.87839-4.99216-25.30817-4.96723a89.43069,89.43069,0,0,0-20.41522,2.409A58.85833,58.85833,0,0,0,584.717,47.89876q-3.50214,1.93728-3.50229,4.84307a4.791,4.791,0,0,0,.472,2.18559L587.49834,66.203c.4969,1.21694,1.58985,1.81314,3.27853,1.81314a7.96388,7.96388,0,0,0,3.02994-.72035,48.72534,48.72534,0,0,1,13.41157-4.9175,70.1686,70.1686,0,0,1,15.34885-1.76342q9.57412,0,15.746,5.63785,6.18432,5.66271,6.18417,15.22455v5.09138l-35.88838.12415q-17.32283.11187-26.798,7.64957-9.4627,7.52541-9.46241,22.30279a31.33132,31.33132,0,0,0,18.6271,29.60477,46.95661,46.95661,0,0,0,20.06717,4.12273q12.96485,0,22.1788-4.32146a38.283,38.283,0,0,0,14.80253-11.69787l1.813,10.6795a2.81759,2.81759,0,0,0,1.04292,1.44054,2.68619,2.68619,0,0,0,1.76327.6209h14.77768a3.236,3.236,0,0,0,2.48361-.96864,3.704,3.704,0,0,0,.91892-2.6822V79.54C670.82365,71.21991,668.81178,63.96781,664.81351,57.83321Zm-20.31609,49.22521a19.49911,19.49911,0,0,1-3.502,11.30041,24.15929,24.15929,0,0,1-9.537,7.99731,29.47777,29.47777,0,0,1-13.01411,2.90578q-8.38219,0-14.08219-3.94886-5.7-3.91186-5.68757-10.10832a9.65451,9.65451,0,0,1,3.502-7.94759c2.35961-1.91243,5.66271-2.85621,9.95931-2.85621h32.36154Z" />
<path class="letter letter-g" d="M796.99129,156.60652a30.66641,30.66641,0,0,0-13.88362-11.02724c-5.98528-2.5582-13.039-3.82471-21.21014-3.82471H730.35577a16.86663,16.86663,0,0,1-8.91608-2.11116c-2.285-1.41568-3.45226-3.25353-3.45226-5.53841a9.36489,9.36489,0,0,1,1.391-5.09138,8.94733,8.94733,0,0,1,3.82486-3.27838,46.58653,46.58653,0,0,0,19.04911,4.02344,48.41889,48.41889,0,0,0,23.76834-5.83658,42.64057,42.64057,0,0,0,16.54064-16.11862,44.2303,44.2303,0,0,0,5.88615-23.172,37.83732,37.83732,0,0,0-6.53191-21.086h10.90309A4.77158,4.77158,0,0,0,796.39524,62.13a4.56111,4.56111,0,0,0,1.39067-3.32811v-12.12a4.60906,4.60906,0,0,0-1.31609-3.52669,5.30908,5.30908,0,0,0-3.65114-1.21694H760.20884a75.49474,75.49474,0,0,0-9.661-2.48362,46.61718,46.61718,0,0,0-8.04719-.89421,45.91363,45.91363,0,0,0-23.346,5.93587,42.03946,42.03946,0,0,0-16.1932,16.36707,47.807,47.807,0,0,0-5.83612,23.64389,46.77982,46.77982,0,0,0,2.55789,15.52258,43.139,43.139,0,0,0,7.27712,13.11354,22.58607,22.58607,0,0,0-9.16469,9.21426,27.58641,27.58641,0,0,0-3.328,13.46114A26.75637,26.75637,0,0,0,699.0129,151.391a29.06867,29.06867,0,0,0,12.74064,10.18276,46.0238,46.0238,0,0,0,18.60223,3.5764h31.54176c5.58813,0,9.71131.81964,12.41806,2.43389,2.70736,1.61441,4.07346,4.32147,4.07346,8.12147q0,6.55677-8.24576,10.0586-8.233,3.53919-22.55109,3.52668a130.46779,130.46779,0,0,1-20.4898-1.68884,96.91274,96.91274,0,0,1-18.08077-4.49533,6.09976,6.09976,0,0,0-1.46525-.2483,3.71036,3.71036,0,0,0-2.161.67047,3.8755,3.8755,0,0,0-1.46494,1.88757L698.218,199.59785a5.37158,5.37158,0,0,0-.34774,1.68883,4.07971,4.07971,0,0,0,.67062,2.26018,5.00781,5.00781,0,0,0,1.86271,1.63911,100.64184,100.64184,0,0,0,21.90533,5.63785,167.06428,167.06428,0,0,0,25.28331,1.98686q16.35463,0,28.68554-4.6692,12.29406-4.65678,18.97514-13.46114,6.66819-8.79216,6.65591-21.03627A29.51429,29.51429,0,0,0,796.99129,156.60652ZM724.4202,73.52965A20.9996,20.9996,0,0,1,731.995,65.7808,20.29682,20.29682,0,0,1,742.625,62.92458a21.2486,21.2486,0,0,1,18.60224,10.60507,21.42,21.42,0,0,1,2.85621,10.97753,20.45468,20.45468,0,0,1-10.60507,18.13049,22.088,22.088,0,0,1-10.97768,2.73191A20.711,20.711,0,0,1,731.871,102.588a20.32526,20.32526,0,0,1-7.50056-7.575A20.92082,20.92082,0,0,1,721.63827,84.383,21.59825,21.59825,0,0,1,724.4202,73.52965Z" />
</svg>
</div>@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,700;1,400&display=swap");
$purple: #9b5de5;
$magenta: #c65ccd;
$pink: #f15bb5;
$yellow: #fee440;
$blue: #00bbf9;
$aqua: #00d8e7;
$green: #00f5d4;
$default: #d1d5da;
$defaultBg: #2f363d;
$dark: #c9d1d9;
$darkBg: #0d1117;
* {
box-sizing: border-box;
}
@mixin turnOn($color, $name) {
@keyframes #{$name}TurnOn {
from {
fill: $dark;
}
to {
fill: $color;
}
}
}
@include turnOn($purple, "purple");
@include turnOn($magenta, "magenta");
@include turnOn($pink, "pink");
@include turnOn($yellow, "yellow");
@include turnOn($blue, "blue");
@include turnOn($aqua, "aqua");
@keyframes flickerTurnOn {
0% {
fill: $dark;
}
2% {
fill: $green;
}
8% {
fill: $dark;
}
9% {
fill: $green;
}
12% {
fill: $dark;
}
20% {
fill: $green;
}
25% {
fill: $dark;
}
30% {
fill: $green;
}
70% {
fill: $dark;
}
72% {
fill: $green;
}
77% {
fill: $dark;
}
100% {
fill: $green;
}
}
.hidden {
width: 0;
height: 0;
visibility: hidden;
display: none;
overflow: hidden;
}
html {
font-size: 16px;
}
body {
display: flex;
padding: 0;
margin: 0;
align-items: center;
flex-direction: column;
min-height: 100vh;
font-family: "Source Sans Pro", sans-serif;
position: relative;
&.dark {
background-color: $darkBg;
.challenge-title {
color: $dark;
}
.challenge-subtitle {
color: darken($dark, 50%);
}
.challenge-part-of {
color: darken($dark, 50%);
a, a:visited {
color: darken($dark, 50%);
&:hover, &:active {
color: lighten(darken($dark, 50%), 10%);
}
}
}
.letter {
fill: $dark;
}
.letter-s {
animation: purpleTurnOn 0.1s linear forwards 0.2s;
}
.letter-c {
animation: aquaTurnOn 0.1s linear forwards 0.6s;
}
.letter-r {
animation: pinkTurnOn 0.1s linear forwards 0.4s;
}
.letter-p {
animation: yellowTurnOn 0.1s linear forwards 1s;
}
.letter-t {
animation: flickerTurnOn 2s linear 1.4s infinite alternate;
}
.letter-a {
animation: magentaTurnOn 0.1s linear forwards 0.8s;
}
.letter-g {
animation: blueTurnOn 0.1s linear forwards 1.2s;
}
}
}
.letter {
fill: $default;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background-color: #eeeef9;
opacity: 0.3;
background-image: repeating-radial-gradient(
circle at 0 0,
transparent 0,
#eeeef9 20px
),
repeating-linear-gradient(#aa90d355, #aa90d3);
}
.challenge-title {
text-align: center;
padding: 0;
margin: 1rem 0 0;
color: $defaultBg;
font-size: 2rem;
font-weight: bold;
}
.challenge-subtitle {
text-align: center;
margin: 0;
font-size: 1.125rem;
font-weight: 400;
color: $default;
}
.challenge-part-of {
text-align: center;
margin: 1rem 0 0;
font-size: 0.875rem;
color: $default;
position: fixed;
bottom: 1rem;
right: 1rem;
a,
a:visited {
color: $default;
text-decoration-style: wavy;
&:hover,
&:active {
color: lighten($default, 10%);
}
}
}
.sr-only {
visibility: hidden;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
padding: 1rem;
margin: 1rem;
}
.btn {
background-color: transparent;
border: 4px solid $default;
border-radius: 12.5px;
cursor: pointer;
&:hover {
.tick {
background-color: lighten($defaultBg, 5%);
}
}
&:active {
.tick {
background-color: darken($defaultBg, 5%);
}
}
&:focus {
outline: 1px dotted darken($defaultBg, 20%);
}
&.btn-switch {
position: relative;
width: 50px;
&.on {
.tick {
.sun {
display: none;
}
.moon {
display: block;
}
}
}
&.on {
background-color: darken($purple, 40%);
border-color: darken($purple, 30%);
.tick {
background-color: $purple;
transform: translate(100%, -50%);
}
}
.tick {
background-color: $defaultBg;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: -4px;
transform: translateY(-50%);
transition: transform 0.15s ease-in-out;
.icon {
flex: 0 0 80%;
height: 100%;
}
.sun {
display: block;
}
.moon {
display: none;
}
}
}
}
const buttonSwitch = document.querySelector('.btn-switch');
const body = document.querySelector('body');
buttonSwitch.addEventListener('click', function(e){
this.classList.toggle('on');
body.classList.toggle('dark')
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.