Speed dials with rotating pointers. Rotation controlled through CSS.
A Pen by Oliver Schafeld on CodePen.
Created
August 15, 2017 13:23
-
-
Save schafeld/139f8c004e708b2329885e2e05d92abc to your computer and use it in GitHub Desktop.
Speed Dials -- SVG pointer rotation controlled by CSS (4)
This file contains 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
| <svg xmlns="http://www.w3.org/2000/svg" | |
| width="236" | |
| height="244" | |
| viewBox="0 0 236 244" | |
| class="gauge first rotate-five-percent"> | |
| <g fill="none" fill-rule="evenodd"> | |
| <g fill-rule="nonzero"> | |
| <path fill="#FFF" d="M183.7 98.67c-.02-.11-.055-.217-.1-.32-.024-.048-.05-.095-.08-.14-3.18-7.603-7.767-14.538-13.52-20.44-.05-.13-.15-.235-.28-.29-12.24-12.43-28.956-19.427-46.4-19.42h-.64c-8.573.073-17.046 1.844-24.93 5.21l-.2.06c-.088.04-.17.085-.25.14-7.613 3.333-14.523 8.084-20.36 14-.134.056-.238.165-.29.3-5.66 5.782-10.2 12.563-13.39 20l-.05.09c-.05.102-.086.21-.11.32-3.322 7.968-5.022 16.518-5 25.15-.078 17.31 6.766 33.933 19.01 46.17.29.273.672.43 1.07.44.4-.003.78-.165 1.06-.45l9-9.15c.397-.378.556-.942.415-1.472-.14-.53-.56-.94-1.09-1.07-.533-.132-1.095.038-1.465.442l-7.88 8c-4.874-5.102-8.844-10.996-11.74-17.43l10.1-4.81c.748-.356 1.066-1.252.71-2-.356-.748-1.252-1.066-2-.71l-10 4.8c-2.668-6.787-4.12-13.99-4.29-21.28l11.31-.25c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5l-11.31.25c.172-7.252 1.617-14.418 4.27-21.17l10 5c.48.35 1.12.386 1.636.09.515-.298.805-.87.74-1.462-.063-.59-.47-1.088-1.036-1.268l-10.15-5.11c2.823-6.28 6.665-12.052 11.37-17.08l7.84 7.92c.588.554 1.51.542 2.084-.027.574-.568.594-1.49.046-2.083l-7.87-8c5.082-4.934 10.966-8.968 17.4-11.93l4.58 10.54c.33.76 1.216 1.106 1.975.775.76-.33 1.106-1.216.775-1.975l-4.57-10.53c6.75-2.715 13.927-4.218 21.2-4.44v11.79c0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5V61.08c7.435.11 14.79 1.56 21.71 4.28L140.85 76c-.232.484-.19 1.055.115 1.498.303.444.82.69 1.355.65.535-.04 1.008-.364 1.24-.848l5.18-10.8c6.595 2.972 12.625 7.066 17.82 12.1l-8.54 8c-.48.332-.725.912-.626 1.488.098.575.522 1.04 1.085 1.194.56.153 1.16-.035 1.54-.482l8.61-8c4.81 5.127 8.73 11.03 11.58 17.46l-10.45 4.72c-.53.197-.89.668-.96 1.222-.07.554.18 1.1.64 1.416.46.317 1.05.352 1.55.092l10.4-4.71c2.56 6.657 3.95 13.708 4.12 20.84h-11.85c-.83 0-1.5.672-1.5 1.5s.67 1.5 1.5 1.5h11.85c-.16 7.353-1.62 14.62-4.32 21.46l-10.87-5.46c-.48-.24-1.05-.21-1.5.085-.45.294-.71.805-.68 1.34.03.536.343 1.014.822 1.255l11 5.55c-2.995 6.59-7.117 12.608-12.18 17.78l-8.51-8.51c-.59-.55-1.513-.534-2.084.037-.57.57-.588 1.492-.037 2.083l9.57 9.57c.584.578 1.526.578 2.11 0 19.004-18.554 24.86-46.776 14.81-71.36h.05z"> | |
| </path> | |
| <path d="M85.12 161.48c-13.857-13.555-19.386-33.497-14.486-52.253 4.9-18.755 19.476-33.444 38.193-38.49 18.717-5.044 38.7.33 52.363 14.083 2.533 2.535 3.52 6.228 2.593 9.69-.93 3.46-3.634 6.163-7.095 7.09-3.462.926-7.155-.065-9.688-2.6-8.623-8.557-21.155-11.863-32.877-8.674-11.72 3.19-20.85 12.39-23.95 24.135-3.098 11.75.304 24.26 8.927 32.81 2.893 2.85 3.78 7.16 2.245 10.92-1.535 3.757-5.187 6.21-9.245 6.218-2.6-.052-5.113-1.083-6.98-2.92z"> | |
| </path> | |
| <g id="translation-speed-dial-pointer" transform="translate(122,122)"> | |
| <g class="rotation-speed-dial-pointer" > | |
| <g id="origin-speed-dial-pointer" transform="translate(-122,-122)"> | |
| <path id="speed-dial-pointer" fill="#FFF" d="M122.15 132.28c-1.98-.033-3.87-.832-5.27-2.23-1.606-1.376-2.557-3.366-2.62-5.48.067-2.255.99-4.4 2.58-6l.18-.16L146.13 95c2.35-1.86 4.24-2.19 5.64-1 .085.074.166.155.24.24.6.68 1.69 2.58-1 5.61l-22.51 29.32-.1.12c-1.518 1.703-3.62 2.774-5.89 3l-.36-.01zm-1.88-10.05c-.583.632-.935 1.443-1 2.3.046.736.41 1.415 1 1.86.487.564 1.195.89 1.94.89.92-.14 1.764-.59 2.39-1.28l14.7-19.13-19.03 15.36z"> | |
| </path> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| <!-- ********************************************************* --> | |
| <svg xmlns="http://www.w3.org/2000/svg" | |
| width="236" | |
| height="244" | |
| viewBox="0 0 236 244" | |
| class="gauge second rotate-one-third"> | |
| <g fill="none" fill-rule="evenodd"> | |
| <g fill-rule="nonzero"> | |
| <path fill="#FFF" d="M183.7 98.67c-.02-.11-.055-.217-.1-.32-.024-.048-.05-.095-.08-.14-3.18-7.603-7.767-14.538-13.52-20.44-.05-.13-.15-.235-.28-.29-12.24-12.43-28.956-19.427-46.4-19.42h-.64c-8.573.073-17.046 1.844-24.93 5.21l-.2.06c-.088.04-.17.085-.25.14-7.613 3.333-14.523 8.084-20.36 14-.134.056-.238.165-.29.3-5.66 5.782-10.2 12.563-13.39 20l-.05.09c-.05.102-.086.21-.11.32-3.322 7.968-5.022 16.518-5 25.15-.078 17.31 6.766 33.933 19.01 46.17.29.273.672.43 1.07.44.4-.003.78-.165 1.06-.45l9-9.15c.397-.378.556-.942.415-1.472-.14-.53-.56-.94-1.09-1.07-.533-.132-1.095.038-1.465.442l-7.88 8c-4.874-5.102-8.844-10.996-11.74-17.43l10.1-4.81c.748-.356 1.066-1.252.71-2-.356-.748-1.252-1.066-2-.71l-10 4.8c-2.668-6.787-4.12-13.99-4.29-21.28l11.31-.25c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5l-11.31.25c.172-7.252 1.617-14.418 4.27-21.17l10 5c.48.35 1.12.386 1.636.09.515-.298.805-.87.74-1.462-.063-.59-.47-1.088-1.036-1.268l-10.15-5.11c2.823-6.28 6.665-12.052 11.37-17.08l7.84 7.92c.588.554 1.51.542 2.084-.027.574-.568.594-1.49.046-2.083l-7.87-8c5.082-4.934 10.966-8.968 17.4-11.93l4.58 10.54c.33.76 1.216 1.106 1.975.775.76-.33 1.106-1.216.775-1.975l-4.57-10.53c6.75-2.715 13.927-4.218 21.2-4.44v11.79c0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5V61.08c7.435.11 14.79 1.56 21.71 4.28L140.85 76c-.232.484-.19 1.055.115 1.498.303.444.82.69 1.355.65.535-.04 1.008-.364 1.24-.848l5.18-10.8c6.595 2.972 12.625 7.066 17.82 12.1l-8.54 8c-.48.332-.725.912-.626 1.488.098.575.522 1.04 1.085 1.194.56.153 1.16-.035 1.54-.482l8.61-8c4.81 5.127 8.73 11.03 11.58 17.46l-10.45 4.72c-.53.197-.89.668-.96 1.222-.07.554.18 1.1.64 1.416.46.317 1.05.352 1.55.092l10.4-4.71c2.56 6.657 3.95 13.708 4.12 20.84h-11.85c-.83 0-1.5.672-1.5 1.5s.67 1.5 1.5 1.5h11.85c-.16 7.353-1.62 14.62-4.32 21.46l-10.87-5.46c-.48-.24-1.05-.21-1.5.085-.45.294-.71.805-.68 1.34.03.536.343 1.014.822 1.255l11 5.55c-2.995 6.59-7.117 12.608-12.18 17.78l-8.51-8.51c-.59-.55-1.513-.534-2.084.037-.57.57-.588 1.492-.037 2.083l9.57 9.57c.584.578 1.526.578 2.11 0 19.004-18.554 24.86-46.776 14.81-71.36h.05z"> | |
| </path> | |
| <path d="M85.12 161.48c-13.857-13.555-19.386-33.497-14.486-52.253 4.9-18.755 19.476-33.444 38.193-38.49 18.717-5.044 38.7.33 52.363 14.083 2.533 2.535 3.52 6.228 2.593 9.69-.93 3.46-3.634 6.163-7.095 7.09-3.462.926-7.155-.065-9.688-2.6-8.623-8.557-21.155-11.863-32.877-8.674-11.72 3.19-20.85 12.39-23.95 24.135-3.098 11.75.304 24.26 8.927 32.81 2.893 2.85 3.78 7.16 2.245 10.92-1.535 3.757-5.187 6.21-9.245 6.218-2.6-.052-5.113-1.083-6.98-2.92z"> | |
| </path> | |
| <g id="translation-speed-dial-pointer" transform="translate(122,122)"> | |
| <g class="rotation-speed-dial-pointer" > | |
| <g id="origin-speed-dial-pointer" transform="translate(-122,-122)"> | |
| <path id="speed-dial-pointer" fill="#FFF" d="M122.15 132.28c-1.98-.033-3.87-.832-5.27-2.23-1.606-1.376-2.557-3.366-2.62-5.48.067-2.255.99-4.4 2.58-6l.18-.16L146.13 95c2.35-1.86 4.24-2.19 5.64-1 .085.074.166.155.24.24.6.68 1.69 2.58-1 5.61l-22.51 29.32-.1.12c-1.518 1.703-3.62 2.774-5.89 3l-.36-.01zm-1.88-10.05c-.583.632-.935 1.443-1 2.3.046.736.41 1.415 1 1.86.487.564 1.195.89 1.94.89.92-.14 1.764-.59 2.39-1.28l14.7-19.13-19.03 15.36z"> | |
| </path> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| <!-- ********************************************************* --> | |
| <svg xmlns="http://www.w3.org/2000/svg" | |
| width="236" | |
| height="244" | |
| viewBox="0 0 236 244" | |
| class="gauge third rotate-three-thirds"> | |
| <g fill="none" fill-rule="evenodd"> | |
| <g fill-rule="nonzero"> | |
| <path fill="#FFF" d="M183.7 98.67c-.02-.11-.055-.217-.1-.32-.024-.048-.05-.095-.08-.14-3.18-7.603-7.767-14.538-13.52-20.44-.05-.13-.15-.235-.28-.29-12.24-12.43-28.956-19.427-46.4-19.42h-.64c-8.573.073-17.046 1.844-24.93 5.21l-.2.06c-.088.04-.17.085-.25.14-7.613 3.333-14.523 8.084-20.36 14-.134.056-.238.165-.29.3-5.66 5.782-10.2 12.563-13.39 20l-.05.09c-.05.102-.086.21-.11.32-3.322 7.968-5.022 16.518-5 25.15-.078 17.31 6.766 33.933 19.01 46.17.29.273.672.43 1.07.44.4-.003.78-.165 1.06-.45l9-9.15c.397-.378.556-.942.415-1.472-.14-.53-.56-.94-1.09-1.07-.533-.132-1.095.038-1.465.442l-7.88 8c-4.874-5.102-8.844-10.996-11.74-17.43l10.1-4.81c.748-.356 1.066-1.252.71-2-.356-.748-1.252-1.066-2-.71l-10 4.8c-2.668-6.787-4.12-13.99-4.29-21.28l11.31-.25c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5l-11.31.25c.172-7.252 1.617-14.418 4.27-21.17l10 5c.48.35 1.12.386 1.636.09.515-.298.805-.87.74-1.462-.063-.59-.47-1.088-1.036-1.268l-10.15-5.11c2.823-6.28 6.665-12.052 11.37-17.08l7.84 7.92c.588.554 1.51.542 2.084-.027.574-.568.594-1.49.046-2.083l-7.87-8c5.082-4.934 10.966-8.968 17.4-11.93l4.58 10.54c.33.76 1.216 1.106 1.975.775.76-.33 1.106-1.216.775-1.975l-4.57-10.53c6.75-2.715 13.927-4.218 21.2-4.44v11.79c0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5V61.08c7.435.11 14.79 1.56 21.71 4.28L140.85 76c-.232.484-.19 1.055.115 1.498.303.444.82.69 1.355.65.535-.04 1.008-.364 1.24-.848l5.18-10.8c6.595 2.972 12.625 7.066 17.82 12.1l-8.54 8c-.48.332-.725.912-.626 1.488.098.575.522 1.04 1.085 1.194.56.153 1.16-.035 1.54-.482l8.61-8c4.81 5.127 8.73 11.03 11.58 17.46l-10.45 4.72c-.53.197-.89.668-.96 1.222-.07.554.18 1.1.64 1.416.46.317 1.05.352 1.55.092l10.4-4.71c2.56 6.657 3.95 13.708 4.12 20.84h-11.85c-.83 0-1.5.672-1.5 1.5s.67 1.5 1.5 1.5h11.85c-.16 7.353-1.62 14.62-4.32 21.46l-10.87-5.46c-.48-.24-1.05-.21-1.5.085-.45.294-.71.805-.68 1.34.03.536.343 1.014.822 1.255l11 5.55c-2.995 6.59-7.117 12.608-12.18 17.78l-8.51-8.51c-.59-.55-1.513-.534-2.084.037-.57.57-.588 1.492-.037 2.083l9.57 9.57c.584.578 1.526.578 2.11 0 19.004-18.554 24.86-46.776 14.81-71.36h.05z"> | |
| </path> | |
| <path d="M85.12 161.48c-13.857-13.555-19.386-33.497-14.486-52.253 4.9-18.755 19.476-33.444 38.193-38.49 18.717-5.044 38.7.33 52.363 14.083 2.533 2.535 3.52 6.228 2.593 9.69-.93 3.46-3.634 6.163-7.095 7.09-3.462.926-7.155-.065-9.688-2.6-8.623-8.557-21.155-11.863-32.877-8.674-11.72 3.19-20.85 12.39-23.95 24.135-3.098 11.75.304 24.26 8.927 32.81 2.893 2.85 3.78 7.16 2.245 10.92-1.535 3.757-5.187 6.21-9.245 6.218-2.6-.052-5.113-1.083-6.98-2.92z"> | |
| </path> | |
| <g id="translation-speed-dial-pointer" transform="translate(122,122)"> | |
| <g class="rotation-speed-dial-pointer" > | |
| <g id="origin-speed-dial-pointer" transform="translate(-122,-122)"> | |
| <path id="speed-dial-pointer" fill="#FFF" d="M122.15 132.28c-1.98-.033-3.87-.832-5.27-2.23-1.606-1.376-2.557-3.366-2.62-5.48.067-2.255.99-4.4 2.58-6l.18-.16L146.13 95c2.35-1.86 4.24-2.19 5.64-1 .085.074.166.155.24.24.6.68 1.69 2.58-1 5.61l-22.51 29.32-.1.12c-1.518 1.703-3.62 2.774-5.89 3l-.36-.01zm-1.88-10.05c-.583.632-.935 1.443-1 2.3.046.736.41 1.415 1 1.86.487.564 1.195.89 1.94.89.92-.14 1.764-.59 2.39-1.28l14.7-19.13-19.03 15.36z"> | |
| </path> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> |
This file contains 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
| body { | |
| background-color: #002c77; | |
| } | |
| /* 5 percent resembles 20/400 */ | |
| svg.gauge.rotate-five-percent .rotation-speed-dial-pointer { | |
| animation: 1s rotateFivePercent ease-in; | |
| transform: rotate(-170deg); | |
| } | |
| /* one third (ca. 30%) resembles 120/400 */ | |
| svg.gauge.rotate-one-third .rotation-speed-dial-pointer { | |
| animation: 1s rotateOneThird ease-in; | |
| transform: rotate(-90deg); | |
| } | |
| svg.gauge.rotate-two-thirds .rotation-speed-dial-pointer { | |
| animation: 2s rotateTwoThirds cubic-bezier(0.8, 0.4, 0.8, 1.35); | |
| transform: rotate(0deg); | |
| } | |
| /* Three thirds resembles full speed (400/400) */ | |
| svg.gauge.rotate-three-thirds .rotation-speed-dial-pointer { | |
| animation: 3s rotateThreeThirds cubic-bezier(0.8, 0.4, 0.8, 1.35); | |
| transform: rotate(90deg); | |
| } | |
| @keyframes rotateFivePercent { | |
| 0% {transform: rotate(-180deg)} | |
| 100% {transform: rotate(-170deg)} | |
| } | |
| @keyframes rotateOneThird { | |
| 0% {transform: rotate(-180deg)} | |
| 100% {transform: rotate(-90deg)} | |
| } | |
| @keyframes rotateTwoThirds { | |
| 0% {transform: rotate(-180deg)} | |
| 100% {transform: rotate(0deg)} | |
| } | |
| @keyframes rotateThreeThirds { | |
| 0% {transform: rotate(-180deg)} | |
| 100% {transform: rotate(90deg)} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Animated speed dials. See: https://codepen.io/schafeld/pen/PKOqYo?editors=1100