In this example below you will see how to do a ExampleEdit with some HTML / CSS and Javascript

This awesome code was written by parkerhutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright parkerhutchinson ©
  • HTML
  • CSS
  • JavaScript
    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient -->

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>

    <circle class="circle" stroke="url(#MyGradient)" fill="white"
          cx="50" cy="50" r="20" stroke-width="3" />

/*Downloaded from https://www.codeseek.co/parkerhutchinson/exampleedit-ZXNxom */
    svg .circle{
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: dash 2s linear alternate infinite;

@keyframes dash {
  from {
    stroke-dashoffset: 150;
  to {
    stroke-dashoffset: 0;

/*Downloaded from https://www.codeseek.co/parkerhutchinson/exampleedit-ZXNxom */