CodePen Embed - Swipe Animation

<svg width="200" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
  
      <defs>
        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="a">
            <stop stop-color="#FFF" stop-opacity="0" offset="0%"/>
            <stop stop-color="#7AA021" offset="74.454%"/>
            <stop stop-color="#7AA021" offset="100%"/>
        </linearGradient>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="b">
            <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
            <feColorMatrix values="0 0 0 0 0.282366071 0 0 0 0 0.282366071 0 0 0 0 0.282366071 0 0 0 0.7 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <g id="gradient" fill="none" fill-rule="evenodd">
        <rect fill="url(#a)" width="191" height="46" rx="28" z-index="-2"/>
        <text filter="url(#b)" font-family="OpenSans-Bold, Open Sans" font-size="20" font-weight="bold">
            <tspan id="swipe" x="49" y="31" fill="#FFF">SWIPE</tspan>
        </text>
    </g>
  
  
    <defs>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
            <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
            <feColorMatrix values="0 0 0 0 0.0767963435 0 0 0 0 0.0767963435 0 0 0 0 0.0767963435 0 0 0 0.516420403 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <g id="hand" transform="translate(5)" fill="none" fill-rule="evenodd">
        <ellipse fill="#7AA021" cx="34.477" cy="22.387" rx="22.243" ry="22.292"/>
        <g filter="url(#a)" transform="translate(0 15)">
            <path d="M91.498 71.794v-1.377 1.377z" opacity=".5" fill="#1D1D1B"/>
            <path fill="#3C3C3B" d="M90.792 100.932c-.043.142-.089.283-.135.423.046-.14.092-.281.135-.423zM90.581 101.585a24.2 24.2 0 0 1-1.43 3.337 23.056 23.056 0 0 0 1.43-3.337zM90.985 100.269l-.038.134.038-.134zM89.002 105.204l-.092.17.092-.17zM91.789 94.807c-.003.117-.008.234-.012.35.004-.116.009-.233.012-.35zM91.749 95.707l-.006.089.006-.089zM85.761 110.696l-3.146 5.277v19.27h.012v-19.27l3.134-5.277zM91.61 70.357v1.437l.183 22.77c.002-.123.006-.246.006-.37 0 0-.107-28.126-.088-28.932a6.15 6.15 0 0 0-.102-1.267v5.837c.006.173.006.348 0 .525z"/>
            <path d="M91.794 94.666v-.102l-.005.243.005-.141zM91.743 95.795a23.079 23.079 0 0 1-.758 4.474c.398-1.446.655-2.939.758-4.474zM89.152 104.922l-.15.282.15-.282zM85.761 110.696l2.558-4.29c.206-.34.401-.685.59-1.033-.111.202-.226.404-.344.604l-2.804 4.72zM91.777 95.157zM90.657 101.355l-.075.23c.026-.076.05-.153.075-.23zM90.948 100.403z" opacity=".5" fill="#1D1D1B"/>
            <path d="M91.61 71.794v-1.437a8.204 8.204 0 0 0 0-.525v-5.837c-.548-2.965-3.245-5.73-7.557-6.63-2.95-.616-5.767-.19-7.7.969-.92-2.43-3.758-4.59-7.426-5.355-2.877-.6-5.625-.21-7.552.883-.885-2.466-3.747-4.669-7.46-5.443-.044-.01-.088-.016-.132-.025-3.231-.64-6.287-.036-8.18 1.41L41.099 6.12C40.354-.506 31.038-.894 28.553 4.263c-.386.801-.608 1.736-.606 2.802l-.03 69.806v2.621c-.911.578-1.841.758-2.72.627-1.54-.23-2.923-1.416-3.772-3.106l-9.4-22.582c-1.521-3.687-5.102-4.45-7.962-3.311-1.445.575-2.707 1.634-3.426 3.051-.705 1.388-.89 3.117-.217 5.064l9.715 33.105a48.674 48.674 0 0 0 7.448 15.073l6.277 8.56v19.984h58.767v-.714h-.013v-19.27l3.147-5.276 2.803-4.72c.119-.2.233-.401.346-.604l.092-.169.149-.282a24.19 24.19 0 0 0 1.43-3.337l.076-.23a22.164 22.164 0 0 0 .29-.952l.038-.134c.398-1.46.652-2.958.758-4.474l.006-.088c.012-.183.02-.367.027-.55.005-.117.01-.233.013-.35l.004-.243-.184-22.77z" fill="#FFF"/>
            <path d="M82.615 115.973l3.146-5.276 2.804-4.72c.118-.2.233-.401.345-.604l.092-.169.149-.282a24.19 24.19 0 0 0 1.43-3.337l.076-.23a22.164 22.164 0 0 0 .29-.952l.038-.134c.398-1.46.652-2.958.758-4.474l.006-.088c.012-.183.02-.367.028-.55.004-.117.01-.233.012-.35l.004-.243-.184-22.77v-1.438a8.204 8.204 0 0 0 0-.524v-5.837c-.547-2.966-3.244-5.731-7.556-6.63-2.95-.616-5.766-.19-7.7.968-.92-2.43-3.758-4.589-7.426-5.354-2.876-.6-5.624-.21-7.552.883-.885-2.467-3.747-4.669-7.46-5.444l-.132-.024V60.4l7.613 2.293v73.262h21.231v-.713h-.012v-19.27zM25.25 90.497l2.668 1.708V76.87v2.621c-.912.578-1.842.758-2.721.627-1.54-.23-2.922-1.416-3.772-3.106l-9.4-22.582c-1.521-3.687-5.101-4.45-7.962-3.311l10.093 25.842a28.292 28.292 0 0 0 11.095 13.535zM45.635 50.112l-4.55-44.01C40.664 2.372 37.522.626 34.42.737l2.831 46.848 8.383 2.526z" opacity=".5" fill="#DBDBDB"/>
        </g>
  </g>
</svg>

#swipe{
  animation: flash 2s infinite;
  animation-delay: 2s
}

@keyframes flash{
  0% {fill: #4C660E;}
  50% {fill: white;}
  100% {fill: silver;}
}

body {
  background-color: black;
}

/* #hand, #gradient{
  transform: translate(100px, 100px);
} */

@keyframes left{
  from{
    transform: translateX(120px);
  }
  to{
    transform: translateX(-10px)
  }
}

#hand {
  animation: left 2s linear;
}

This Pen is owned by Julia Xu on CodePen.

See more by @juliazxu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.