Toggles

Focinho na bolinha

por @ravox·css

1
#f6efe4
1<label class="t"><input type="checkbox" aria-label="Brincar de bolinha"><span class="trilho"><span class="braco e"><span><span><svg width="172" height="64" viewBox="0 0 172 64" aria-hidden="true">2  <path d="M0 18 H100 V48 H0Z" fill="#c98a4e"/>3  <path d="M0 39 H100 V48 H0Z" fill="#a8703b"/>4  <path d="M0 22 q12 -3 24 0 t24 0 t24 0 t24 0" stroke="#dca56e" stroke-width="1.6" fill="none"/>5  <ellipse cx="124" cy="30" rx="29" ry="23" fill="#c98a4e"/>6  <path d="M98 38 Q108 54 128 53 Q146 52 150 40 Q128 48 98 38Z" fill="#a8703b"/>7  <path d="M122 12 Q134 4 146 14 Q142 26 128 26 Q118 22 122 12Z" fill="#c98a4f"/>8  <path d="M132 26 Q150 17 163 23 Q172 28 169 36 Q162 45 140 44 Z" fill="#e3b27d"/>9  <path d="M140 44 Q160 45 169 36 Q170 41 164 44 Q152 48 140 44Z" fill="#c99260"/>10  <ellipse cx="164.5" cy="27.5" rx="6.2" ry="5" fill="#2a1a12"/>11  <ellipse cx="163" cy="25.6" rx="2.2" ry="1.2" fill="#fff" opacity=".7"/>12  <path d="M152 39 q6 4 13 -1" stroke="#2a1a12" stroke-width="1.8" fill="none" stroke-linecap="round"/>13  <circle cx="135" cy="21" r="3.8" fill="#2a1a12"/>14  <circle cx="136.3" cy="19.8" r="1.3" fill="#fff"/>15  <path d="M130 14.5 q5 -3.5 10 0" stroke="#7a4a24" stroke-width="1.8" fill="none" stroke-linecap="round"/>16  <ellipse cx="146" cy="36" rx="4" ry="2.4" fill="#ea8a6c" opacity=".55"/>17  <path d="M104 8 C90 8 86 32 95 46 C104 44 113 28 112 12 Z" fill="#8a5427"/>18  <path d="M103 13 C95 15 93 32 97 41 C103 38 108 26 107 15 Z" fill="#9f6533"/>19  <rect x="86" y="18" width="9" height="30" rx="3" fill="#d23d3d"/>20  <path d="M86 21 h9" stroke="#ef6b62" stroke-width="1.6"/>21  <circle cx="90.5" cy="52" r="4.5" fill="#f2c14e"/>22  <circle cx="89.5" cy="51" r="1.4" fill="#fff3c8"/>23</svg></span></span></span><span class="braco d"><span><span><svg width="172" height="64" viewBox="0 0 172 64" aria-hidden="true">24  <path d="M0 18 H100 V48 H0Z" fill="#f1ebe2"/>25  <path d="M0 39 H100 V48 H0Z" fill="#d6ccbd"/>26  <path d="M0 22 q12 -3 24 0 t24 0 t24 0 t24 0" stroke="#fbf7f1" stroke-width="1.6" fill="none"/>27  <ellipse cx="124" cy="30" rx="29" ry="23" fill="#f1ebe2"/>28  <path d="M98 38 Q108 54 128 53 Q146 52 150 40 Q128 48 98 38Z" fill="#d6ccbd"/>29  <path d="M122 12 Q134 4 146 14 Q142 26 128 26 Q118 22 122 12Z" fill="#2b2b2b"/>30  <path d="M132 26 Q150 17 163 23 Q172 28 169 36 Q162 45 140 44 Z" fill="#fbf7f1"/>31  <path d="M140 44 Q160 45 169 36 Q170 41 164 44 Q152 48 140 44Z" fill="#e2d9cb"/>32  <ellipse cx="164.5" cy="27.5" rx="6.2" ry="5" fill="#2a1a12"/>33  <ellipse cx="163" cy="25.6" rx="2.2" ry="1.2" fill="#fff" opacity=".7"/>34  <path d="M152 39 q6 4 13 -1" stroke="#2a1a12" stroke-width="1.8" fill="none" stroke-linecap="round"/>35  <circle cx="135" cy="21" r="3.8" fill="#2a1a12"/>36  <circle cx="136.3" cy="19.8" r="1.3" fill="#fff"/>37  <path d="M130 14.5 q5 -3.5 10 0" stroke="#7a4a24" stroke-width="1.8" fill="none" stroke-linecap="round"/>38  <ellipse cx="146" cy="36" rx="4" ry="2.4" fill="#ea8a6c" opacity=".55"/>39  <path d="M104 8 C90 8 86 32 95 46 C104 44 113 28 112 12 Z" fill="#2b2b2b"/>40  <path d="M103 13 C95 15 93 32 97 41 C103 38 108 26 107 15 Z" fill="#454545"/>41  <rect x="86" y="18" width="9" height="30" rx="3" fill="#2f7de0"/>42  <path d="M86 21 h9" stroke="#6aa6f2" stroke-width="1.6"/>43  <circle cx="90.5" cy="52" r="4.5" fill="#f2c14e"/>44  <circle cx="89.5" cy="51" r="1.4" fill="#fff3c8"/>45</svg></span></span></span><span class="bola"><svg width="42" height="42" viewBox="0 0 42 42" aria-hidden="true">46  <ellipse cx="22" cy="38.5" rx="13" ry="2.6" fill="#5a3a1c" opacity=".3"/>47  <circle cx="20" cy="20" r="18" fill="#d3e547"/>48  <path d="M34 9 A18 18 0 0 1 9 34 A16 16 0 0 0 34 9Z" fill="#aabd2c"/>49  <circle cx="16" cy="16" r="9" fill="#e4f07c" opacity=".7"/>50  <path d="M6 8 C16 14 16 26 6 32 M34 8 C24 14 24 26 34 32" fill="none" stroke="#fbfdf0" stroke-width="2.8" stroke-linecap="round"/>51  <path d="M7 9.5 C15.5 15 15.5 25 7 30.5" fill="none" stroke="#c8d6a0" stroke-width="1" stroke-linecap="round"/>52  <ellipse cx="12" cy="10" rx="3.5" ry="1.8" fill="#fff" opacity=".6" transform="rotate(-35 12 10)"/>53</svg></span></span><span class="leg" aria-hidden="true"><b class="off">joga pra mim?</b><b class="on">de novo! de novo!</b></span></label>
#cachorro#bolinha#taco de madeira#claro#divertido

Mais toggles

Ver todos