a quick cat themed pen to have a play with base-select
A Pen by Stan Williams on CodePen.
Created
December 18, 2025 21:10
-
-
Save stanwmusic/78520d3f092f389242228076e77dab89 to your computer and use it in GitHub Desktop.
A cute cat select with auto-tail assist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="mouse-detector"> | |
| <div class="cat"> | |
| <div class="sleep-symbol"> | |
| <span>Z</span> | |
| <span>z</span> | |
| <span>z</span> | |
| </div> | |
| <div class="thecat"> | |
| <svg width="45.952225mm" height="35.678726mm" viewBox="0 0 45.952225 35.678726" version="1.1" id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> | |
| <defs id="defs1" /> | |
| <g id="layer1" style="display:inline" transform="translate(-121.80376,-101.90461)"> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 144.95859,104.74193 c 6.01466,-2.1201 14.02915,-0.85215 17.62787,2.77812 3.59872,3.63027 2.91927,7.6226 -0.0661,11.80703 -2.98542,4.18443 -9.54667,3.58363 -15.1474,3.43959 -5.60073,-0.14404 -10.30411,-0.0586 -11.67474,-3.9026 7.85671,-2.22341 3.24576,-12.00205 9.26042,-14.12214 z" id="path1" /> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 156.30732,121.30486 c 0,0 -3.82398,2.52741 -4.14054,3.7997 -0.31656,1.2723 0.31438,2.18109 0.95701,2.55128 0.64264,0.3702 1.59106,-0.085 2.13559,-0.75306 0.54452,-0.6681 1.5629,-2.25488 2.47945,-3.20579 0.91654,-0.95091 2.96407,-2.74361 2.96407,-2.74361 l 0.73711,-3.60348 z" id="path2" /> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 136.93356,123.08347 c 0,0 -3.20149,3.2804 -3.24123,4.59088 -0.0397,1.31049 0.60411,1.83341 1.3106,2.05901 0.7065,0.22559 1.60304,-0.55255 1.99363,-1.32084 0.39056,-0.76832 1.14875,-2.30337 2.04139,-3.29463 0.89264,-0.99126 3.37363,-3.37561 3.37363,-3.37561 l -1.30007,-3.61169 z" id="path3" /> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 130.12859,121.60522 c -2.15849,1.92962 -3.38576,3.23532 -3.61836,4.5256 -0.23257,1.2903 0.0956,1.80324 0.76105,2.13059 0.66549,0.32733 1.66701,-0.31006 2.16665,-1.01233 0.49961,-0.70231 1.04598,-1.14963 2.83575,-3.05671 1.78977,-1.90708 5.91823,-3.27102 5.91823,-3.27102 l -0.75313,-3.99546 c 0,0 -5.15171,2.7497 -7.31019,4.67933 z" id="path4" /> | |
| <path id="path5" style="display:inline;fill:#000000;stroke:none;stroke-width:0.292536;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.988235" d="m 147.59927,113.85404 c 0.68896,4.40837 -4.04042,7.93759 -10.51533,8.9455 -6.47491,1.00791 -12.24344,-0.88717 -12.9324,-5.29555 -0.68895,-4.40838 3.44199,-9.94186 9.9169,-10.94977 6.47491,-1.0079 12.84186,2.89144 13.53083,7.29982 z" /> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 126.36446,111.82609 c 0,0 -2.37067,-6.28072 -0.86724,-7.10855 1.50342,-0.82783 5.87139,3.72617 5.87139,3.72617 z" id="path6" /> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 143.50182,108.85407 c 0,0 -0.0544,-6.71302 -1.75519,-6.94283 -1.70081,-0.22982 -4.13211,5.59314 -4.13211,5.59314 z" id="path7" /> | |
| <g id="g25" style="display:inline"> | |
| <path style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 125.27102,116.06007 -2.97783,-1.05373" id="path8" /> | |
| <path style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 124.91643,116.80991 -2.84808,0.0754" id="path9" /> | |
| <path style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 124.97798,118.00308 -2.53111,0.5156" id="path10" /> | |
| </g> | |
| <g id="g13" transform="rotate(-23.188815,49.755584,71.047761)" style="display:inline;fill:none;stroke:#000000"> | |
| <path style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 121.77448,146.87682 3.00963,-0.95912" id="path11" /> | |
| <path style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 122.10521,147.63749 2.84427,0.16537" id="path12" /> | |
| <path style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 122.00599,148.82812 2.51354,0.59531" id="path13" /> | |
| </g> | |
| <ellipse style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.56967;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="path14" cx="142.61723" cy="108.6707" rx="3.0261719" ry="3.0757811" transform="rotate(1.8105864)" /> | |
| <ellipse style="display:inline;fill:#000000;stroke:none;stroke-width:0.597086;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse15" cx="112.57543" cy="138.29808" rx="1.0380507" ry="1.3097118" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <ellipse style="display:inline;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.184905;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse16" cx="112.70263" cy="137.817" rx="0.32146212" ry="0.40558979" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <ellipse style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.56967;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse17" cx="135.40735" cy="110.12592" rx="3.0261719" ry="3.0757811" transform="rotate(1.8105864)" /> | |
| <ellipse style="display:inline;fill:#000000;stroke:none;stroke-width:0.597086;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse18" cx="105.22613" cy="138.07497" rx="1.0380507" ry="1.3097118" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <ellipse style="display:inline;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.184905;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse19" cx="105.35332" cy="137.59389" rx="0.32146212" ry="0.40558979" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <path style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 163.77708,109.27292 c 4.36563,2.71198 4.26447,17.63497 3.70417,21.03437 -0.5603,3.3994 -1.86906,4.06275 -4.53099,4.49791 -5.87463,0.96037 -8.39724,-5.87134 -5.7547,-5.72161 2.64254,0.14973 3.15958,3.46446 5.95314,2.05052 2.79356,-1.41394 -1.42214,-13.46068 -1.42214,-13.46068 z" id="tail" /> | |
| <path style="display:inline;fill:#000000;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 159.74981,121.34445 c 0,0 -2.98896,3.47517 -2.94624,4.78555 0.0427,1.31039 0.89775,2.01247 1.61702,2.1932 0.71928,0.18075 1.50745,-0.51603 1.84897,-1.30735 0.34149,-0.79135 0.88811,-2.59584 1.51032,-3.76081 0.62219,-1.16497 2.10268,-3.44845 2.10268,-3.44845 l -0.27441,-3.66785 z" id="path20" /> | |
| <g id="lefteyelid" style="display:inline"> | |
| <ellipse style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="path21" cx="131.94429" cy="114.29948" rx="3.1571214" ry="3.2155864" /> | |
| <path style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 129.32504,114.80228 c 2.54908,-1.14592 4.60706,-0.65481 4.60706,-0.65481" id="path22" /> | |
| </g> | |
| <g id="righteyelid" style="display:inline"> | |
| <ellipse style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse22" cx="139.07704" cy="113.0834" rx="3.1571214" ry="3.2155864" /> | |
| <path style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" d="m 136.48089,113.70683 c 2.48528,-1.2784 4.56624,-0.89621 4.56624,-0.89621" id="path23" /> | |
| </g> | |
| <g id="eyesdown"> | |
| <ellipse style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="path26" cx="139.12122" cy="113.61373" rx="1.8686198" ry="2.0422525" /> | |
| <ellipse style="fill:#000000;stroke:none;stroke-width:0.597086;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse25" cx="112.24622" cy="139.77037" rx="1.0380507" ry="1.3097118" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <ellipse style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.184905;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse26" cx="112.37342" cy="139.28929" rx="0.32146212" ry="0.40558979" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <ellipse style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse27" cx="131.994" cy="114.92011" rx="1.8686198" ry="2.0422525" /> | |
| <ellipse style="fill:#000000;stroke:none;stroke-width:0.597086;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse28" cx="105.00267" cy="139.64998" rx="1.0380507" ry="1.3097118" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| <ellipse style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.184905;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" id="ellipse29" cx="105.12987" cy="139.1689" rx="0.32146212" ry="0.40558979" transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)" /> | |
| </g> | |
| <path | |
| id="longtail" | |
| style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.988235" | |
| d="m 164.24062,110.09354 -2.10788,6.5381 c 0,0 0.84017,12.88397 0.35269,20.95169 h 4.78291 c 0.83489,-8.63528 0.13334,-24.78453 -3.02772,-27.48979 z" /> | |
| </g> | |
| </svg> | |
| </div> | |
| <select class="side-select"> | |
| <button> | |
| <selectedcontent></selectedcontent> | |
| </button> | |
| <option value="" hidden> | |
| <span>How much <strong>meow</strong> do you need?</span> | |
| </option> | |
| <option value="little"> | |
| <span>🐾 A little</span> | |
| <svg xml:space="preserve"width="49.987" height="48" viewBox="0 0 13.226 12.7"><g fill="#000" fill-opacity="1" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".988" display="inline" transform="translate(-114.596 -144.523)"><path id="endpiece" stroke-width=".529" d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z" display="inline"/><path id="tailpiece" stroke-width=".753" d="M123.041 144.523h4.781v12.7h-4.781z"/></g></svg> | |
| </option> | |
| <option value="morethanalittle"> | |
| <span>🐾 A bit more than a little</span> | |
| <svg xml:space="preserve"width="49.987" height="48" viewBox="0 0 13.226 12.7"><g fill="#000" fill-opacity="1" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".988" display="inline" transform="translate(-114.596 -144.523)"><path id="endpiece" stroke-width=".529" d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z" display="inline"/><path id="tailpiece" stroke-width=".753" d="M123.041 144.523h4.781v12.7h-4.781z"/></g></svg> | |
| </option> | |
| <option value="good"> | |
| <span>🐾 A good amount</span> | |
| <svg xml:space="preserve"width="49.987" height="48" viewBox="0 0 13.226 12.7"><g fill="#000" fill-opacity="1" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".988" display="inline" transform="translate(-114.596 -144.523)"><path id="endpiece" stroke-width=".529" d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z" display="inline"/><path id="tailpiece" stroke-width=".753" d="M123.041 144.523h4.781v12.7h-4.781z"/></g></svg> | |
| </option> | |
| <option value="large"> | |
| <span>🐾 A large amount</span> | |
| <svg xml:space="preserve"width="49.987" height="48" viewBox="0 0 13.226 12.7"><g fill="#000" fill-opacity="1" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".988" display="inline" transform="translate(-114.596 -144.523)"><path id="endpiece" stroke-width=".529" d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z" display="inline"/><path id="tailpiece" stroke-width=".753" d="M123.041 144.523h4.781v12.7h-4.781z"/></g></svg> | |
| </option> | |
| <option value="max"> | |
| <span>⭐ Maximum meow! ⭐</span> | |
| <svg xml:space="preserve"width="49.987" height="48" viewBox="0 0 13.226 12.7"><g fill="#000" fill-opacity="1" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".988" display="inline" transform="translate(-114.596 -144.523)"><path id="endpiece" stroke-width=".529" d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z" display="inline"/><path id="tailpiece" stroke-width=".753" d="M123.041 144.523h4.781v12.7h-4.781z"/></g></svg> | |
| </option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="instructions"> | |
| ⚠️ Approach sleeping cat slowly with mouse! | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sour-gummy-100 { | |
| font-family: "Sour Gummy", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: <weight>; | |
| font-style: normal; | |
| font-variation-settings: "wdth" 100; | |
| } | |
| .cat { | |
| select, | |
| ::picker(select) { | |
| appearance: base-select; | |
| font-size: 18px; | |
| } | |
| select { | |
| min-width: 400px; | |
| padding: 16px; | |
| border-radius: 8px; | |
| min-height: 58px; | |
| background-color: white; | |
| cursor: pointer; | |
| &:hover { | |
| background-color: yellow; | |
| } | |
| } | |
| ::picker(select) { | |
| border-radius: 0px 0px 8px 8px; | |
| border-top: none; | |
| } | |
| ::picker-icon, | |
| ::checkmark { | |
| display: none; | |
| } | |
| [hidden] { | |
| display: none; | |
| } | |
| option { | |
| padding: 0px; | |
| padding-left: 20px; | |
| padding-right: 10px; | |
| &:hover { | |
| background: yellow; | |
| } | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .sleep-symbol { | |
| margin-left: 260px; | |
| font-weight: 600; | |
| margin-bottom: -40px; | |
| span { | |
| position: relative; | |
| display: inline-block; | |
| opacity: 1; | |
| transform: scale(1); | |
| animation: sleep 4s ease-in-out infinite; | |
| } | |
| span:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| span:nth-child(2) { | |
| animation-delay: 1s; | |
| margin-left: -10px; | |
| } | |
| span:nth-child(3) { | |
| animation-delay: 2s; | |
| margin-left: -10px; | |
| } | |
| } | |
| .thecat { | |
| z-index: 2; | |
| margin-left: 220px; | |
| margin-bottom: -62px; | |
| position: relative; | |
| pointer-events: none; | |
| } | |
| } | |
| #tail { | |
| visibility: visible; | |
| } | |
| #longtail { | |
| visibility: hidden; | |
| } | |
| option { | |
| svg { | |
| margin-right: -3px; | |
| } | |
| } | |
| /* activate cat when mouse approaches! */ | |
| .mouse-detector { | |
| padding: 20px 30px 30px 30px; | |
| &:hover { | |
| #lefteyelid { | |
| visibility: hidden; | |
| } | |
| .sleep-symbol { | |
| visibility: hidden; | |
| } | |
| } | |
| } | |
| .cat { | |
| padding: 30px; | |
| &:hover { | |
| #righteyelid { | |
| visibility: hidden; | |
| } | |
| } | |
| } | |
| .thecat { | |
| #eyesdown { | |
| visibility: hidden; | |
| } | |
| } | |
| .cat:has(.side-select:hover) { | |
| #eyesdown { | |
| visibility: visible; | |
| } | |
| } | |
| select:open { | |
| border-radius: 8px 8px 0px 0px; | |
| } | |
| .cat:has(option:hover) { | |
| #righteyelid, #lefteyelid, .sleep-symbol { | |
| visibility: hidden; | |
| } | |
| #eyesdown { | |
| visibility: visible; | |
| } | |
| } | |
| /* auto-cat tail assist */ | |
| selectedcontent { | |
| svg { | |
| display: none; | |
| visibility: hidden; | |
| } | |
| } | |
| .cat:has(option:hover) { | |
| #tail { | |
| visibility: hidden; | |
| } | |
| #longtail{ | |
| visibility: visible; | |
| } | |
| } | |
| option:has(~ option:hover) { | |
| #tailpiece { | |
| visibility: visible; | |
| } | |
| } | |
| option { | |
| min-height: 48px; | |
| &:hover { | |
| #endpiece { | |
| visibility: visible; | |
| } | |
| } | |
| #tailpiece { | |
| visibility: hidden; | |
| } | |
| #endpiece { | |
| visibility: hidden; | |
| } | |
| } | |
| .instructions { | |
| color: #444; | |
| } | |
| body { | |
| margin: 0; | |
| width: 100%; | |
| padding: 0; | |
| display: flex; | |
| height: 100vh; | |
| align-items: center; | |
| flex-direction: column; | |
| font-family: "Sour Gummy"; | |
| background-color: #ccc; | |
| } | |
| @keyframes sleep { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| transform: translate(-5px, -35px) scale(1.2); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(-60px) scale(1.5); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment