Skeuomorphic button lab
Left: current exported SVG (<img>). Right: new componentized buttons —
separated socket/cap layers, single-hue color model, and an icon light that turns on while
held. In Interactive mode, press and hold a button on either side.
State
Current exported SVG
'/%3e%3ccircle%20id='Gap'%20cx='30.5001'%20cy='30.5'%20r='26.077'%20fill='%23212121'%20stroke='%232F2F2F'%20stroke-width='0.663043'/%3e%3ccircle%20id='SlopeDown'%20cx='30.5001'%20cy='30.5'%20r='25.3331'%20fill='url(%23paint1_linear_0_1)'%20stroke='%23E72A2A'%20stroke-width='0.663043'/%3e%3ccircle%20id='Peak'%20cx='30.4999'%20cy='30.4999'%20r='23.8049'%20fill='url(%23paint2_linear_0_1)'/%3e%3ccircle%20id='Divot'%20cx='30.5001'%20cy='30.4999'%20r='23.4329'%20fill='url(%23paint3_radial_0_1)'/%3e%3cg%20id='Group%2017'%3e%3cpath%20id='Arrow%201%20(Stroke)'%20d='M24.0713%2038.0713C23.6809%2038.4617%2023.0478%2038.4615%2022.6572%2038.0713L16.293%2031.707C15.9024%2031.3165%2015.9024%2030.6835%2016.293%2030.2929L22.6572%2023.9287C23.0478%2023.5385%2023.6809%2023.5383%2024.0713%2023.9287C24.4617%2024.3191%2024.4615%2024.9522%2024.0713%2025.3428L19.4141%2030L46%2030V32L19.4141%2032L24.0713%2036.6572C24.4615%2037.0478%2024.4617%2037.6808%2024.0713%2038.0713Z'%20fill='%23F9CBCB'/%3e%3cg%20id='Arrow%201%20(Stroke)_2'%20filter='url(%23filter0_f_0_1)'%3e%3cpath%20d='M24.0713%2038.0713C23.6809%2038.4617%2023.0478%2038.4615%2022.6572%2038.0713L16.293%2031.707C15.9024%2031.3165%2015.9024%2030.6835%2016.293%2030.2929L22.6572%2023.9287C23.0478%2023.5385%2023.6809%2023.5383%2024.0713%2023.9287C24.4617%2024.3191%2024.4615%2024.9522%2024.0713%2025.3428L19.4141%2030L46%2030V32L19.4141%2032L24.0713%2036.6572C24.4615%2037.0478%2024.4617%2037.6808%2024.0713%2038.0713Z'%20fill='%23F9CBCB'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_0_1'%20x='12'%20y='19.636'%20width='38'%20height='22.728'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='2'%20result='effect1_foregroundBlur_0_1'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='30.5'%20y1='0'%20x2='30.5'%20y2='61'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%238D8D8D'/%3e%3cstop%20offset='1'%20stop-color='%23D7D7D7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_0_1'%20x1='30.5001'%20y1='42.3452'%20x2='30.5001'%20y2='6.80953'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E51919'/%3e%3cstop%20offset='0.744037'%20stop-color='%23EA4141'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_0_1'%20x1='30.4999'%20y1='41.4868'%20x2='30.4999'%20y2='8.52621'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F49E9E'/%3e%3cstop%20offset='0.427885'%20stop-color='%23EB4A4A'/%3e%3cstop%20offset='1'%20stop-color='%23F49E9E'/%3e%3c/linearGradient%3e%3cradialGradient%20id='paint3_radial_0_1'%20cx='0'%20cy='0'%20r='1'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(30.5001%2046.7227)%20rotate(-90)%20scale(39.6557)'%3e%3cstop%20stop-color='%23F28989'/%3e%3cstop%20offset='1'%20stop-color='%23CF1717'/%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e)
'%20stroke='url(%23paint1_linear_0_1)'/%3e%3ccircle%20id='Gap'%20cx='82'%20cy='82'%20r='70.5'%20fill='%23212121'%20stroke='%232F2F2F'/%3e%3ccircle%20id='SlopeDown'%20cx='82'%20cy='82'%20r='68.5'%20fill='url(%23paint2_linear_0_1)'%20stroke='%23898989'/%3e%3ccircle%20id='Peak'%20cx='82'%20cy='82'%20r='64'%20fill='url(%23paint3_linear_0_1)'/%3e%3ccircle%20id='Divot'%20cx='82'%20cy='82'%20r='63'%20fill='url(%23paint4_radial_0_1)'/%3e%3c/g%3e%3cg%20id='Subtract'%20filter='url(%23filter0_f_0_1)'%3e%3cmask%20id='path-6-inside-1_0_1'%20fill='white'%3e%3cpath%20d='M104%2075V110H89V93H75V110H60V75L82%2053L104%2075Z'/%3e%3c/mask%3e%3cpath%20d='M104%2075H106V74.1716L105.414%2073.5858L104%2075ZM104%20110V112H106V110H104ZM89%20110H87V112H89V110ZM89%2093H91V91H89V93ZM75%2093V91H73V93H75ZM75%20110V112H77V110H75ZM60%20110H58V112H60V110ZM60%2075L58.5858%2073.5858L58%2074.1716V75H60ZM82%2053L83.4142%2051.5858L82%2050.1716L80.5858%2051.5858L82%2053ZM104%2075H102V110H104H106V75H104ZM104%20110V108H89V110V112H104V110ZM89%20110H91V93H89H87V110H89ZM89%2093V91H75V93V95H89V93ZM75%2093H73V110H75H77V93H75ZM75%20110V108H60V110V112H75V110ZM60%20110H62V75H60H58V110H60ZM60%2075L61.4142%2076.4142L83.4142%2054.4142L82%2053L80.5858%2051.5858L58.5858%2073.5858L60%2075ZM82%2053L80.5858%2054.4142L102.586%2076.4142L104%2075L105.414%2073.5858L83.4142%2051.5858L82%2053Z'%20fill='%2364FFBC'%20mask='url(%23path-6-inside-1_0_1)'/%3e%3c/g%3e%3cg%20id='Subtract_2'%3e%3cmask%20id='path-8-inside-2_0_1'%20fill='white'%3e%3cpath%20d='M104%2075V110H89V93H75V110H60V75L82%2053L104%2075Z'/%3e%3c/mask%3e%3cpath%20d='M104%2075H106V74.1716L105.414%2073.5858L104%2075ZM104%20110V112H106V110H104ZM89%20110H87V112H89V110ZM89%2093H91V91H89V93ZM75%2093V91H73V93H75ZM75%20110V112H77V110H75ZM60%20110H58V112H60V110ZM60%2075L58.5858%2073.5858L58%2074.1716V75H60ZM82%2053L83.4142%2051.5858L82%2050.1716L80.5858%2051.5858L82%2053ZM104%2075H102V110H104H106V75H104ZM104%20110V108H89V110V112H104V110ZM89%20110H91V93H89H87V110H89ZM89%2093V91H75V93V95H89V93ZM75%2093H73V110H75H77V93H75ZM75%20110V108H60V110V112H75V110ZM60%20110H62V75H60H58V110H60ZM60%2075L61.4142%2076.4142L83.4142%2054.4142L82%2053L80.5858%2051.5858L58.5858%2073.5858L60%2075ZM82%2053L80.5858%2054.4142L102.586%2076.4142L104%2075L105.414%2073.5858L83.4142%2051.5858L82%2053Z'%20fill='%2364FFBC'%20mask='url(%23path-8-inside-2_0_1)'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_0_1'%20x='56'%20y='49'%20width='52'%20height='65'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='2'%20result='effect1_foregroundBlur_0_1'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='82'%20y1='0'%20x2='82'%20y2='164'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%238B8E8D'/%3e%3cstop%20offset='1'%20stop-color='%23D7D7D7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_0_1'%20x1='82'%20y1='0'%20x2='82'%20y2='164'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%238F8F8F'/%3e%3cstop%20offset='1'%20stop-color='%23D4D4D4'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_0_1'%20x1='82'%20y1='113.846'%20x2='82'%20y2='18.3077'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%237F7F7F'/%3e%3cstop%20offset='0.744037'%20stop-color='%23969696'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_0_1'%20x1='82'%20y1='111.538'%20x2='82'%20y2='22.9231'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23C9C9C9'/%3e%3cstop%20offset='0.427885'%20stop-color='%239B9B9B'/%3e%3cstop%20offset='1'%20stop-color='%23C9C9C9'/%3e%3c/linearGradient%3e%3cradialGradient%20id='paint4_radial_0_1'%20cx='0'%20cy='0'%20r='1'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(82%20125.615)%20rotate(-90)%20scale(106.615)'%3e%3cstop%20stop-color='%23D9D9D9'/%3e%3cstop%20offset='1'%20stop-color='%23737373'/%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3ccircle%20id='Gap'%20cx='45.9999'%20cy='46'%20r='39.3293'%20fill='%23212121'%20stroke='%232F2F2F'/%3e%3ccircle%20id='SlopeDown'%20cx='46'%20cy='46'%20r='38.2073'%20fill='url(%23paint1_linear_0_1)'%20stroke='%231298FF'/%3e%3ccircle%20id='Peak'%20cx='46.0001'%20cy='46'%20r='35.9024'%20fill='url(%23paint2_linear_0_1)'/%3e%3ccircle%20id='Divot'%20cx='45.9999'%20cy='46'%20r='35.3415'%20fill='url(%23paint3_radial_0_1)'/%3e%3c/g%3e%3cpath%20id='Union'%20d='M61.625%2030C64.6132%2030%2066.9998%2032.4679%2067%2035.4678V56.5322C66.9998%2059.5321%2064.6132%2062%2061.625%2062H30.375C27.3868%2062%2025.0002%2059.5321%2025%2056.5322V35.4678C25.0002%2032.4679%2027.3868%2030%2030.375%2030H61.625ZM45.5%2051.4141L27.5918%2033.5059C27.2196%2034.0615%2027.0001%2034.7357%2027%2035.4678V56.5322C27.0002%2058.4674%2028.5309%2060%2030.375%2060H61.625C63.4691%2060%2064.9998%2058.4674%2065%2056.5322V35.4678C64.9999%2034.4744%2064.5962%2033.5874%2063.9541%2032.959L45.5%2051.4141ZM30.375%2032C29.9445%2032%2029.5312%2032.0837%2029.1504%2032.2363L45.5%2048.5859L62.0566%2032.0283C61.9151%2032.0097%2061.771%2032%2061.625%2032H30.375Z'%20fill='%233F6480'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='46'%20y1='0'%20x2='46'%20y2='92'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%238B8E8D'/%3e%3cstop%20offset='1'%20stop-color='%23D7D7D7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_0_1'%20x1='46'%20y1='63.865'%20x2='46'%20y2='10.2702'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%230090FE'/%3e%3cstop%20offset='0.744037'%20stop-color='%232CA4FF'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_0_1'%20x1='46.0001'%20y1='62.5703'%20x2='46.0001'%20y2='12.8593'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2394D0FF'/%3e%3cstop%20offset='0.427885'%20stop-color='%2336A8FF'/%3e%3cstop%20offset='1'%20stop-color='%2393D0FF'/%3e%3c/linearGradient%3e%3cradialGradient%20id='paint3_radial_0_1'%20cx='0'%20cy='0'%20r='1'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(45.9999%2070.4672)%20rotate(-90)%20scale(59.8086)'%3e%3cstop%20stop-color='%23B3DEFF'/%3e%3cstop%20offset='1'%20stop-color='%230082E6'/%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3ccircle%20id='Gap'%20cx='45.9999'%20cy='46'%20r='39.3293'%20fill='%23222121'%20stroke='%232F2F2F'/%3e%3ccircle%20id='SlopeDown'%20cx='46'%20cy='46'%20r='38.2073'%20fill='url(%23paint1_linear_0_1)'%20stroke='%23FFE312'/%3e%3ccircle%20id='Peak'%20cx='46.0001'%20cy='46'%20r='35.9024'%20fill='url(%23paint2_linear_0_1)'/%3e%3ccircle%20id='Divot'%20cx='45.9999'%20cy='46'%20r='35.3415'%20fill='url(%23paint3_radial_0_1)'/%3e%3c/g%3e%3cg%20id='Group%208'%3e%3ccircle%20id='SlopeUp_2'%20cx='46'%20cy='46'%20r='46'%20fill='url(%23paint4_linear_0_1)'/%3e%3ccircle%20id='Gap_2'%20cx='45.9999'%20cy='46'%20r='39.3293'%20fill='%23222121'%20stroke='%232F2F2F'/%3e%3ccircle%20id='SlopeDown_2'%20cx='46'%20cy='46'%20r='38.2073'%20fill='url(%23paint5_linear_0_1)'%20stroke='%23FFE312'/%3e%3ccircle%20id='Peak_2'%20cx='46.0001'%20cy='46'%20r='35.9024'%20fill='url(%23paint6_linear_0_1)'/%3e%3ccircle%20id='Divot_2'%20cx='45.9999'%20cy='46'%20r='35.3415'%20fill='url(%23paint7_radial_0_1)'/%3e%3c/g%3e%3cg%20id='Group%207'%3e%3cg%20id='Vector'%20filter='url(%23filter0_f_0_1)'%3e%3cpath%20d='M38.6596%2035.375H53.3404M38.6596%2040.375H53.3404M38.6596%2055.375H53.3404M38.6596%2050.375H53.3404M38.6596%2045.375H53.3404M35.4681%2066H56.5319C58.9996%2066%2061%2064.0412%2061%2061.625V30.375C61%2027.9588%2058.9996%2026%2056.5319%2026H35.4681C33.0004%2026%2031%2027.9588%2031%2030.375V61.625C31%2064.0412%2033.0004%2066%2035.4681%2066Z'%20stroke='%23FDF7C7'%20stroke-width='2'%20stroke-linecap='round'/%3e%3c/g%3e%3cpath%20id='Vector_2'%20d='M38.6596%2035.375H53.3404M38.6596%2040.375H53.3404M38.6596%2055.375H53.3404M38.6596%2050.375H53.3404M38.6596%2045.375H53.3404M35.4681%2066H56.5319C58.9996%2066%2061%2064.0412%2061%2061.625V30.375C61%2027.9588%2058.9996%2026%2056.5319%2026H35.4681C33.0004%2026%2031%2027.9588%2031%2030.375V61.625C31%2064.0412%2033.0004%2066%2035.4681%2066Z'%20stroke='%23FDF7C7'%20stroke-width='2'%20stroke-linecap='round'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_0_1'%20x='26'%20y='21'%20width='40'%20height='50'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='2'%20result='effect1_foregroundBlur_0_1'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='46'%20y1='0'%20x2='46'%20y2='92'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%238A8F8D'/%3e%3cstop%20offset='1'%20stop-color='%23D7D7D7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_0_1'%20x1='46'%20y1='63.865'%20x2='46'%20y2='10.2702'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FEE000'/%3e%3cstop%20offset='0.744037'%20stop-color='%23FFE62C'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_0_1'%20x1='46.0001'%20y1='62.5703'%20x2='46.0001'%20y2='12.8593'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFF294'/%3e%3cstop%20offset='0.427885'%20stop-color='%23FFE836'/%3e%3cstop%20offset='1'%20stop-color='%23FFF293'/%3e%3c/linearGradient%3e%3cradialGradient%20id='paint3_radial_0_1'%20cx='0'%20cy='0'%20r='1'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(45.9999%2070.4672)%20rotate(-90)%20scale(59.8086)'%3e%3cstop%20stop-color='%23FFF6B3'/%3e%3cstop%20offset='1'%20stop-color='%23E6CB00'/%3e%3c/radialGradient%3e%3clinearGradient%20id='paint4_linear_0_1'%20x1='46'%20y1='0'%20x2='46'%20y2='92'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%238A8F8D'/%3e%3cstop%20offset='1'%20stop-color='%23D7D7D7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint5_linear_0_1'%20x1='46'%20y1='63.865'%20x2='46'%20y2='10.2702'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FEE000'/%3e%3cstop%20offset='0.744037'%20stop-color='%23FFE62C'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint6_linear_0_1'%20x1='46.0001'%20y1='62.5703'%20x2='46.0001'%20y2='12.8593'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFF294'/%3e%3cstop%20offset='0.427885'%20stop-color='%23FFE836'/%3e%3cstop%20offset='1'%20stop-color='%23FFF293'/%3e%3c/linearGradient%3e%3cradialGradient%20id='paint7_radial_0_1'%20cx='0'%20cy='0'%20r='1'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(45.9999%2070.4672)%20rotate(-90)%20scale(59.8086)'%3e%3cstop%20stop-color='%23FFF6B3'/%3e%3cstop%20offset='1'%20stop-color='%23E6CB00'/%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e)
