Skip to content

Instantly share code, notes, and snippets.

@adamcrampton
Created January 11, 2019 02:05
Show Gist options
  • Save adamcrampton/613af3ccb68a6a32775376e8323e1016 to your computer and use it in GitHub Desktop.
Save adamcrampton/613af3ccb68a6a32775376e8323e1016 to your computer and use it in GitHub Desktop.
SVG Animated Gesture Icons - see https://codepen.io/gracelle/pen/rLXrJb
<style>
/* BASE RULES */
html, body {
width: 100%;
height: 100%;
background-color: #ccccff;
}
div {
text-align: center;
}
svg {
display: inline-block;
width: 250px;
margin: 3% auto;
padding: 0px 100px;
}
/* SVG RULES */
.hand,
.hand-double,
.hand-flick,
.hand-hold,
.hand-rock,
.hand-tap,
.hand-x,
.hand-y {
fill: #fff;
stroke: #000;
stroke-width: 3px;
stroke-linecap: round;
stroke-linejoin: round;
}
.arrow-down,
.arrow-head,
.arrow-left,
.arrow-right,
.arrow-up,
.arrow-up-1,
.arrow-up-2,
.arrow-up-3,
.hold-1,
.hold-2,
.line-horizontal,
.line-rotate,
.line-vertical,
.notes,
.tap-1,
.tap-2 {
fill: transparent;
stroke: #000;
stroke-width: 3px;
stroke-linecap: round;
stroke-linejoin: round;
}
.arrow-up-2,
.hold-1,
.tap-1 {
opacity: .5;
}
.arrow-up-1,
.hold-2,
.tap-2 {
opacity: .25;
}
.arrow-up-3,
.swipe-horizontal,
.swipe-rotate,
.swipe-vertical {
opacity: .75;
}
.hold-1,
.hold-2,
.notes {
opacity: 0;
}
/* ANIMATION KEYFRAMES */
@keyframes tap-double {
0% {
transform: rotateX(0deg);
}
10% {
transform: rotateX(12.5deg);
}
25% {
transform: rotateX(25deg);
}
35% {
transform: rotateX(10deg);
}
50% {
transform: rotateX(25deg);
}
}
@keyframes tap {
0% {
transform: rotateX(0deg);
}
10% {
transform: rotateX(12.5deg);
}
25% {
transform: rotateX(25deg);
}
}
@keyframes tap-circle {
0% {
transform: scale(0);
opacity: 0;
}
75% {
transform: scale(1.05);
opacity: .6;
}
80% {
transform: scale(1);
opacity: .5;
}
}
@keyframes hold {
0% {
transform: rotateX(0deg);
}
10% {
transform: rotateX(12.5deg);
}
30% {
transform: rotateX(25deg);
}
80% {
transform: rotateX(25deg);
}
}
@keyframes fade {
0% {
opacity: 0;
}
30% {
opacity: .75
}
80% {
opacity: .75;
}
}
@keyframes swipe-x {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(50px) rotateZ(10deg);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(-50px) rotateZ(-10deg);
}
}
@keyframes swipe-y {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(50px) rotateZ(-10deg);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-50px) rotateZ(10deg);
}
}
@keyframes flick-fade {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
}
@keyframes flick {
0% {
transform: rotateZ(0deg);
}
10% {
transform: translateY(-12px) rotateZ(50deg);
}
25% {
transform: rotateZ(5deg);
}
}
@keyframes spin {
0% {
transform: rotateZ(0deg);
}
10% {
transform: translateY(-10deg) rotateZ(-20deg);
}
50% {
transform: rotateZ(45deg);
}
}
@keyframes rock-on {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.1);
}
}
@keyframes note {
0% {
transform: scale(0) rotateZ(0deg);
opacity: 0;
}
20% {
transform: scale(1.1) rotateZ(10deg);
}
40% {
transform: scale(0.9) rotateZ(-10deg);
}
50% {
opacity: .75;
}
60% {
transform: scale(1.1) rotateZ(10deg);
}
80% {
transform: scale(0.9) rotateZ(-10deg);
}
}
/* SVG ANIMATION */
.wrapper * {
transform-origin: 50% 50%;
perspective: 100px;
}
.hand {
transform-origin: 25% 50%;
}
.hand-tap {
animation: tap 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.hand-double {
animation: tap-double 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.tap-1,
.tap-2 {
animation: tap-circle 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.hand-hold {
animation: hold 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.hold-1, .hold-2 {
animation: fade 1.25s ease-in backwards;
animation-iteration-count:infinite;
}
.tap-2 {
animation-delay: 0.2s;
}
.hand-x {
animation: swipe-x 1.25s ease-in-out backwards;
animation-iteration-count:infinite;
}
.hand-y {
animation: swipe-y 1.25s ease-in-out backwards;
animation-iteration-count:infinite;
}
.hand-flick {
animation: flick 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.arrows {
opacity: 0;
animation: flick-fade 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.hand,
.swipe-rotate {
animation: spin 1.25s ease-in-out backwards;
animation-iteration-count:infinite;
}
.hand-rock {
animation: rock-on 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
.notes {
animation: note 1.25s ease-out backwards;
animation-iteration-count:infinite;
}
</style>
<div class="wrapper">
<!-- Single-Finger Tap Icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle class="tap-1" cx="89.43" cy="64.48" r="19.46"/>
<path class="hand-tap" d="M139.93,102.68,98.81,95.75V65.2A9.25,9.25,0,0,0,89.56,56h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,111.77c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,102.68Z"/>
</svg>
<!-- Single-Finger Double-Tap Icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle class="tap-2" cx="89.43" cy="69.55" r="29.61"/>
<circle class="tap-1" cx="89.43" cy="69.55" r="19.46"/>
<path class="hand-double" d="M139.93,107.76l-41.12-6.93V70.28A9.25,9.25,0,0,0,89.56,61h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,116.85c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,107.76Z"/>
</svg>
<!-- Single-Finger Press + Hold Icon -->
<svg id="Press-hold_1" data-name="Press hold 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hold-2" d="M56,72.25a33.5,33.5,0,0,1,67,0"/>
<path class="hold-1" d="M67,72.25a22.5,22.5,0,0,1,45,0"/>
<path class="hand-hold" d="M139.93,109,98.81,102V71.48a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,118c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,109Z"/>
</svg>
<!-- Single-Finger Swipe Left & Right Icon -->
<svg id="Swipe-horizontal_1" data-name="Swipe horizontal 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-x" d="M139.93,113.56l-41.12-6.93V76.08a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,122.65c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,113.56Z"/>
<g class="swipe-horizontal">
<path class="line-horizontal" d="M70.85,42c19.69-12.46,37,0,37,0"/>
<polyline class="arrow-left" points="76.6 46.01 68.37 43.43 68.38 43.41 70.96 35.18"/>
<polyline class="arrow-right" points="100.21 44.66 108.43 42.08 108.43 42.06 105.85 33.84"/>
</g>
</svg>
<!-- Single-Finger Swipe Up & Down Icon -->
<svg id="Swipe-vertical_1" data-name="Swipe vertical 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-y" d="M131.09,69.21l-34,24.17-21.6-21.6a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L103,125.43l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48l30.14-30.14A9.25,9.25,0,0,0,162.72,101L143.43,72.11A9.28,9.28,0,0,0,131.09,69.21Z"/>
<g class="swipe-vertical">
<path class="line-vertical" d="M43.94,94.27c-12.46-19.69,0-37,0-37"/>
<polyline class="arrow-down" points="47.93 88.53 45.35 96.75 45.33 96.75 37.11 94.17"/>
<polyline class="arrow-up" points="46.59 64.92 44.01 56.69 43.98 56.7 35.76 59.28"/>
</g>
</svg>
<!-- Single-Finger Flick Icon -->
<svg id="Flick_1" data-name="Flick 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-flick" d="M132.11,67.61l-34,24.17-21.6-21.6a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L104,123.82l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48l30.14-30.14a9.25,9.25,0,0,0,1.16-11.67L144.45,70.51A9.28,9.28,0,0,0,132.11,67.61Z"/>
<g class="arrows">
<polyline class="arrow-up-3" points="34.7 64.95 40.73 58.79 40.75 58.8 46.91 64.83"/>
<polyline class="arrow-up-2" points="34.7 74.99 40.73 68.83 40.75 68.85 46.91 74.88"/>
<polyline class="arrow-up-1" points="34.7 85.04 40.73 78.88 40.75 78.89 46.91 84.92"/>
</g>
</svg>
<!-- Single-Finger Rotate Icon -->
<svg id="Rotate_1" data-name="Rotate 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<g class="swipe-rotate">
<path class="line-rotate" d="M57.8,96.7c-5.4,5.4-14.2,5.4-19.6,0s-5.4-14.2,0-19.6s14.2-5.4,19.6,0"/>
<polyline class="arrow-head" points="58.9,70.1 59,78.7 59,78.7 50.4,78.8 "/>
</g>
<path class="hand" d="M159.1,91.8l-41.1-6.9l0-22.9c0-3.3-2.7-6.1-6.1-6.1H99.4h-18c-4.9,0-9.2,3.7-9.5,8.6c-0.3,5.4,3.9,9.9,9.2,9.9h18.3v37.2l-9.3-10.8c-3.6-3.6-8.4-3.9-13.1,0c0,0-7.2,5.8-3.8,9.3l34,34h42.6c4.4,0,8.2-3.1,9.1-7.4l6.8-34.1C166.7,97.8,163.8,93,159.1,91.8z"/>
</svg>
<!-- Double-Finger Double-Tap Icon -->
<svg id="Double-tap_2" data-name="Double tap 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="tap-2" d="M140.09,65.79A31.39,31.39,0,0,0,86.09,44a31.4,31.4,0,1,0,25.82,53A31.4,31.4,0,0,0,140.09,65.79Z"/>
<path class="tap-1" d="M109.35,46.58A19.43,19.43,0,0,0,92.72,56a19.46,19.46,0,1,0,12.56,29.09,19.46,19.46,0,1,0,4.07-38.48Z"/>
<path class="hand-double" d="M139.93,113.3l-22.6-3.81V68.17a9.25,9.25,0,0,0-18.5,0v41.2h0V75.83a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,122.39c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,113.3Z"/>
</svg>
<!-- Double-Finger Swipe Left & Right Icon -->
<svg id="Swipe-horizontal_2" data-name="Swipe horizontal 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-x" d="M139.93,113.56l-22.6-3.81V68.43a9.25,9.25,0,0,0-18.5,0v41.2h0V76.08a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,122.65c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,113.56Z"/>
<g class="swipe-horizontal">
<path class="line-horizontal" d="M82.15,41.32c19.69-12.46,37,0,37,0"/>
<polyline class="arrow-left" points="87.89 45.32 79.67 42.74 79.67 42.71 82.25 34.49"/>
<polyline class="arrow-right" points="111.5 43.97 119.73 41.39 119.72 41.36 117.14 33.14"/>
</g>
</svg>
<!-- Double-Finger Swipe Up & Down Icon -->
<svg id="Swipe-vertical_2" data-name="Swipe vertical 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-y" d="M131.09,72.5,112.42,85.79,83.21,56.57A9.25,9.25,0,0,0,70.13,69.65L99.26,98.78h0L75.52,75.08a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L103,128.72l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48L161.56,116a9.25,9.25,0,0,0,1.16-11.67L143.43,75.4A9.28,9.28,0,0,0,131.09,72.5Z"/>
<g class="swipe-vertical">
<path class="line-vertical" d="M44.28,98.76c-12.46-19.69,0-37,0-37"/>
<polyline class="arrow-down" points="48.27 93.02 45.69 101.24 45.67 101.24 37.45 98.66"/>
<polyline class="arrow-up" points="46.92 69.41 44.35 61.18 44.32 61.19 36.1 63.77"/>
</g>
</svg>
<!-- Double-Finger Flick Icon -->
<svg id="Flick_2" data-name="Flick 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-flick" d="M132.11,77.62,113.44,90.9,84.22,61.68A9.25,9.25,0,0,0,71.14,74.76l29.13,29.13h0L76.53,80.19a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L104,133.83l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48l30.14-30.14a9.25,9.25,0,0,0,1.16-11.67L144.45,80.51A9.28,9.28,0,0,0,132.11,77.62Z"/>
<g class="arrows">
<polyline class="arrow-up-3" points="34.69 54.91 40.72 48.75 40.74 48.76 46.9 54.79"/>
<polyline class="arrow-up-2" points="34.69 64.95 40.72 58.79 40.74 58.81 46.9 64.83"/>
<polyline class="arrow-up-1" points="34.69 75 40.72 68.84 40.74 68.85 46.9 74.88"/>
</g>
</svg>
<!-- Rock On Icon -->
<svg id="Rock_on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="hand-rock" d="M161.926,68.25c0-5.109-4.141-9.25-9.25-9.25s-9.25,4.141-9.25,9.25v27l-29.475-4.969V59.736c0-5.109-4.141-9.25-9.25-9.25h0c-5.109,0-9.25,4.141-9.25,9.25v57.358l-9.268-10.79c-3.612-3.612-8.44-3.892-13.081,0c0,0-7.245,5.837-3.831,9.25l33.959,33.959h42.629c4.407,0,8.202-3.111,9.067-7.433l6.819-34.093c0.088-0.438,0.132-0.875,0.156-1.31l0.025-0.015V68.25z"/>
<g class="notes">
<polyline points="49.058,112.498 48.963,91.106 48.988,91.104 57.607,91.009"/>
<circle cx="43.566" cy="112.498" r="5.492"/>
<polyline points="58.824,72.314 58.729,50.922 58.754,50.92 76.061,50.872 76.061,79.078"/>
<circle cx="53.332" cy="72.314" r="5.492"/>
<circle cx="70.569" cy="79.32" r="5.492"/>
</g>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment