css Question posted in
Some basic documentation can be found here.

SVG/CSS Loader spinner animation of filling/unfilling letters

I have a custom SVG for the letter CG. I want to add a "loader-spinner" animation that fills and unfills the letters C and G.

I’ve managed to get an animation where the outline of these letters is drawn/undrawn, but I want the letters to be filled/unfilled. I tried changing the thickness of the stroke, but since the stroke goes both inward and outward, that doesn’t work.

Is this even possible? Code is provided below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CG Spinner Animation</title>
    
</head>
<body>

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none; stroke:red; stroke-width:5; stroke-dasharray: 0 1000;}
    @keyframes fillAnimation {
        0% {
            stroke-dasharray: 0 1000;
        }
        50% {
            stroke-dasharray: 1000 0;
        }
        100% {
            stroke-dasharray: 0 1000;
        }
    }

    .st0 {
        animation: fillAnimation 2.5s ease-in-out infinite;
    }
</style>
<g>
    <g>
        <g>
            <path class="st0" d="M394.5,577.9c-14.9,16.5-31.2,27-50.5,32.3l-0.2-0.5c-10.9,3.1-22.2,4.7-33.7,4.7
                c-66.9,0-121.2-54.4-121.2-121.2s54.4-121.2,121.2-121.2c34.6,0,66.9,14.5,89.9,39.9l13.1-10.9c-26.3-29.4-63.3-46.1-103-46.1
                c-76.2,0-138.2,62-138.2,138.2s62,138.2,138.2,138.2c40.7,0,70.6-13,97-42.1c25.7-28.4,44.4-68,64.2-109.9
                c15.6-33.1,31.7-67.1,52.3-97.3l0.4,0.3c38.6-61.5,104.9-98.2,177.2-98.2c59.7,0,116,25.2,155.7,69.5l13.1-10.8
                c-42.9-48.2-104-75.7-168.8-75.7c-67.3,0-121.4,23.5-165.5,71.9c-35.2,38.7-57.9,86.7-79.8,133.2
                C436.7,512.9,418.5,551.4,394.5,577.9z"/>
            <path class="st0" d="M915.9,546.1c0-39.7-23.7-74-57.6-89.6c-0.8-0.8-1.7-1.4-2.8-1.9c-12-5-24.8-7.5-37.8-7.5
                c-54.7,0-99.2,44.5-99.2,99.2c0,22.2,7.3,43.4,20.8,60.7c-11.8,3.8-24.2,5.9-37,5.9c-66.7,0-120.9-54.3-120.9-120.9
                c0-39.3,18.8-74.2,47.9-96.3c20.2-14.9,45.1-23.8,72-23.8c33.4,0,65,13.7,87.9,37.7l0.9-0.8l12.2-10.1l0.9-0.8
                c-26.1-28-62.4-43.9-100.9-43.9c-10.9,0-21.5,1.3-31.7,3.7c-27.2,5.4-49.7,18.4-69.5,40c-1.8,1.9-3.5,4-5.2,6
                c-1.2,1.5-2.4,2.9-3.6,4.4c-0.5,0.6-0.9,1.2-1.4,1.8c-0.2,0.2-0.3,0.4-0.5,0.6c-19.7,25.7-36.2,59.2-55.1,99
                c-21.1,44.8-43,91-75.7,127.2c-26.2,29-56.4,48.2-91.3,57.9l-0.2-0.6c-18.8,5.4-38.3,8.2-58,8.2c-115.3,0-209.1-93.8-209.1-209.1
                s93.8-209.1,209.1-209.1c61,0,117.9,26,157.7,71.8l13.1-10.8c-43-49.7-104.7-77.9-170.8-77.9C185.5,267.1,84,368.5,84,493.2
                s101.4,226.1,226.1,226.1c65.8,0,118.9-23.2,162.1-71c12.2-13.4,22.8-28.1,32.5-43.4c18.1,31.8,43.7,58.8,74.7,78.7
                c36.4,23.4,78.5,35.7,121.9,35.7c91.1,0,172.8-54.2,208.3-138.1l-0.2-0.1C913.7,570,915.9,558.2,915.9,546.1z M701.3,702.3
                c-40.1,0-79-11.4-112.7-33c-31.4-20.2-56.8-48.2-73.7-81.3c13.2-23.1,24.6-47.3,35.9-71.1c4.1-8.8,8.2-17.3,12.3-25.6
                c0,0.6,0,1.2,0,1.9c0,76.2,62,138.2,138.2,138.2c48.8,0,93-24.9,118.2-66.5l-0.1-0.1c2.8-4.5,5.4-9.1,7.6-14
                c2-4.2,0.2-9.3-4.1-11.3c-4.2-2-9.3-0.2-11.3,4.1c-11.8,24.9-31.6,44.6-55.4,56.5c-13.2-14.9-20.5-34-20.5-54
                c0-44.9,36.6-81.5,81.5-81.5c44.9,0,81.5,36.6,81.5,81.5c0,11.1-2.2,21.9-6.6,32.1c0,0.1-0.1,0.2-0.1,0.3
                C858.5,653.9,784.1,702.3,701.3,702.3z"/>
        </g>
    </g>
</g>
</svg>


</body>
</html>
Tags:

2

Answers


  1. 0

    Css clip path could give the illusion of something like that.
    Your other option to redraw the entire SVG in a single path, so that you can grow a stroke along that path.

    .example-1 svg {
  animation: fillAnimation 2.5s ease-in-out infinite;
}

@keyframes fillAnimation {
  0% {
    clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(100% 100%, 100% 0, 100% 100%, 0% 100%);
  }
}

.wrapper {
  display: flex;
}

svg {
  width: 100%;
  height: 100%
}

.example-1,
.example-2 {
  margin: 6px;
  display: inline-block;
  border: 2px solid orange;
}

.example-2 svg {
  background-color: linen;
  animation: fillAnimation 5s ease-in-out infinite;
}

.st0 {
  fill: red;
  stroke: red;
  stroke-width: 5;
  stroke-dasharray: 0 1000;
}
    <div class="wrapper">
  <div class="example-1">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<g>
    <g>
        <g>
            <path class="st0" d="M394.5,577.9c-14.9,16.5-31.2,27-50.5,32.3l-0.2-0.5c-10.9,3.1-22.2,4.7-33.7,4.7
                c-66.9,0-121.2-54.4-121.2-121.2s54.4-121.2,121.2-121.2c34.6,0,66.9,14.5,89.9,39.9l13.1-10.9c-26.3-29.4-63.3-46.1-103-46.1
                c-76.2,0-138.2,62-138.2,138.2s62,138.2,138.2,138.2c40.7,0,70.6-13,97-42.1c25.7-28.4,44.4-68,64.2-109.9
                c15.6-33.1,31.7-67.1,52.3-97.3l0.4,0.3c38.6-61.5,104.9-98.2,177.2-98.2c59.7,0,116,25.2,155.7,69.5l13.1-10.8
                c-42.9-48.2-104-75.7-168.8-75.7c-67.3,0-121.4,23.5-165.5,71.9c-35.2,38.7-57.9,86.7-79.8,133.2
                C436.7,512.9,418.5,551.4,394.5,577.9z"/>
            <path class="st0" d="M915.9,546.1c0-39.7-23.7-74-57.6-89.6c-0.8-0.8-1.7-1.4-2.8-1.9c-12-5-24.8-7.5-37.8-7.5
                c-54.7,0-99.2,44.5-99.2,99.2c0,22.2,7.3,43.4,20.8,60.7c-11.8,3.8-24.2,5.9-37,5.9c-66.7,0-120.9-54.3-120.9-120.9
                c0-39.3,18.8-74.2,47.9-96.3c20.2-14.9,45.1-23.8,72-23.8c33.4,0,65,13.7,87.9,37.7l0.9-0.8l12.2-10.1l0.9-0.8
                c-26.1-28-62.4-43.9-100.9-43.9c-10.9,0-21.5,1.3-31.7,3.7c-27.2,5.4-49.7,18.4-69.5,40c-1.8,1.9-3.5,4-5.2,6
                c-1.2,1.5-2.4,2.9-3.6,4.4c-0.5,0.6-0.9,1.2-1.4,1.8c-0.2,0.2-0.3,0.4-0.5,0.6c-19.7,25.7-36.2,59.2-55.1,99
                c-21.1,44.8-43,91-75.7,127.2c-26.2,29-56.4,48.2-91.3,57.9l-0.2-0.6c-18.8,5.4-38.3,8.2-58,8.2c-115.3,0-209.1-93.8-209.1-209.1
                s93.8-209.1,209.1-209.1c61,0,117.9,26,157.7,71.8l13.1-10.8c-43-49.7-104.7-77.9-170.8-77.9C185.5,267.1,84,368.5,84,493.2
                s101.4,226.1,226.1,226.1c65.8,0,118.9-23.2,162.1-71c12.2-13.4,22.8-28.1,32.5-43.4c18.1,31.8,43.7,58.8,74.7,78.7
                c36.4,23.4,78.5,35.7,121.9,35.7c91.1,0,172.8-54.2,208.3-138.1l-0.2-0.1C913.7,570,915.9,558.2,915.9,546.1z M701.3,702.3
                c-40.1,0-79-11.4-112.7-33c-31.4-20.2-56.8-48.2-73.7-81.3c13.2-23.1,24.6-47.3,35.9-71.1c4.1-8.8,8.2-17.3,12.3-25.6
                c0,0.6,0,1.2,0,1.9c0,76.2,62,138.2,138.2,138.2c48.8,0,93-24.9,118.2-66.5l-0.1-0.1c2.8-4.5,5.4-9.1,7.6-14
                c2-4.2,0.2-9.3-4.1-11.3c-4.2-2-9.3-0.2-11.3,4.1c-11.8,24.9-31.6,44.6-55.4,56.5c-13.2-14.9-20.5-34-20.5-54
                c0-44.9,36.6-81.5,81.5-81.5c44.9,0,81.5,36.6,81.5,81.5c0,11.1-2.2,21.9-6.6,32.1c0,0.1-0.1,0.2-0.1,0.3
                C858.5,653.9,784.1,702.3,701.3,702.3z"/>
        </g>
    </g>
</g>
</svg>
  </div>
  <div class="example-2">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<g>
    <g>
        <g>
            <path class="st0" d="M394.5,577.9c-14.9,16.5-31.2,27-50.5,32.3l-0.2-0.5c-10.9,3.1-22.2,4.7-33.7,4.7
                c-66.9,0-121.2-54.4-121.2-121.2s54.4-121.2,121.2-121.2c34.6,0,66.9,14.5,89.9,39.9l13.1-10.9c-26.3-29.4-63.3-46.1-103-46.1
                c-76.2,0-138.2,62-138.2,138.2s62,138.2,138.2,138.2c40.7,0,70.6-13,97-42.1c25.7-28.4,44.4-68,64.2-109.9
                c15.6-33.1,31.7-67.1,52.3-97.3l0.4,0.3c38.6-61.5,104.9-98.2,177.2-98.2c59.7,0,116,25.2,155.7,69.5l13.1-10.8
                c-42.9-48.2-104-75.7-168.8-75.7c-67.3,0-121.4,23.5-165.5,71.9c-35.2,38.7-57.9,86.7-79.8,133.2
                C436.7,512.9,418.5,551.4,394.5,577.9z"/>
            <path class="st0" d="M915.9,546.1c0-39.7-23.7-74-57.6-89.6c-0.8-0.8-1.7-1.4-2.8-1.9c-12-5-24.8-7.5-37.8-7.5
                c-54.7,0-99.2,44.5-99.2,99.2c0,22.2,7.3,43.4,20.8,60.7c-11.8,3.8-24.2,5.9-37,5.9c-66.7,0-120.9-54.3-120.9-120.9
                c0-39.3,18.8-74.2,47.9-96.3c20.2-14.9,45.1-23.8,72-23.8c33.4,0,65,13.7,87.9,37.7l0.9-0.8l12.2-10.1l0.9-0.8
                c-26.1-28-62.4-43.9-100.9-43.9c-10.9,0-21.5,1.3-31.7,3.7c-27.2,5.4-49.7,18.4-69.5,40c-1.8,1.9-3.5,4-5.2,6
                c-1.2,1.5-2.4,2.9-3.6,4.4c-0.5,0.6-0.9,1.2-1.4,1.8c-0.2,0.2-0.3,0.4-0.5,0.6c-19.7,25.7-36.2,59.2-55.1,99
                c-21.1,44.8-43,91-75.7,127.2c-26.2,29-56.4,48.2-91.3,57.9l-0.2-0.6c-18.8,5.4-38.3,8.2-58,8.2c-115.3,0-209.1-93.8-209.1-209.1
                s93.8-209.1,209.1-209.1c61,0,117.9,26,157.7,71.8l13.1-10.8c-43-49.7-104.7-77.9-170.8-77.9C185.5,267.1,84,368.5,84,493.2
                s101.4,226.1,226.1,226.1c65.8,0,118.9-23.2,162.1-71c12.2-13.4,22.8-28.1,32.5-43.4c18.1,31.8,43.7,58.8,74.7,78.7
                c36.4,23.4,78.5,35.7,121.9,35.7c91.1,0,172.8-54.2,208.3-138.1l-0.2-0.1C913.7,570,915.9,558.2,915.9,546.1z M701.3,702.3
                c-40.1,0-79-11.4-112.7-33c-31.4-20.2-56.8-48.2-73.7-81.3c13.2-23.1,24.6-47.3,35.9-71.1c4.1-8.8,8.2-17.3,12.3-25.6
                c0,0.6,0,1.2,0,1.9c0,76.2,62,138.2,138.2,138.2c48.8,0,93-24.9,118.2-66.5l-0.1-0.1c2.8-4.5,5.4-9.1,7.6-14
                c2-4.2,0.2-9.3-4.1-11.3c-4.2-2-9.3-0.2-11.3,4.1c-11.8,24.9-31.6,44.6-55.4,56.5c-13.2-14.9-20.5-34-20.5-54
                c0-44.9,36.6-81.5,81.5-81.5c44.9,0,81.5,36.6,81.5,81.5c0,11.1-2.2,21.9-6.6,32.1c0,0.1-0.1,0.2-0.1,0.3
                C858.5,653.9,784.1,702.3,701.3,702.3z"/>
        </g>
    </g>
</g>
</svg>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I modified the svg and adjusted the stroke-width value

    so that the inside could be filled, not the outline of the character.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CG Spinner Animation</title>

</head>

<body>

  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;"
    xml:space="preserve">
<style type="text/css">
    .st0{
      fill:none;
      stroke:red;
      stroke-width:20;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: fillAnimation 2.5s ease-in-out infinite;
    }
    @keyframes fillAnimation {
        0% {
            stroke-dasharray: 1000 0;
        }
        50% {
            stroke-dasharray: 0 1000;
        }
        100% {
            stroke-dasharray: 1000 0;
        }
    }
</style>
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:aipgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:aipgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <path class="st0" d="M491.3,374.6c-39.8-45.6-98.4-74.4-163.8-74.4c-120.1,0-217.4,97.3-217.4,217.4s97.3,217.4,217.4,217.4
            c50.2,0,96.3-17,133.1-45.5c0,0,49.5-38.8,85.1-121.8c0,0,50-110.3,70-130.8"/>
        <path class="st0" d="M880.7,372.2c-40-45.1-98.4-73.5-163.5-73.5c-59,0-112.2,25.6-151.6,63.6c0,0-40.6,36.6-90.8,149.2
            c0,0-27.8,66.6-56.4,97.2l0.1-0.1c-23.4,23.4-55.7,37.8-91.3,37.8c-71.3,0-129.2-57.8-129.2-129.2S255.9,388,327.2,388
            c38.1,0,72.4,16.5,96.1,42.8"/>
        <path class="st0" d="M838.9,568c-19.8,46.8-66.2,79.7-120.3,79.7c-72.1,0-130.5-58.4-130.5-130.5s58.4-130.5,130.5-130.5
            c37.4,0,71.1,15.7,94.9,41"/>
        <path class="st0" d="M773.5,635.6c-17.4-16.3-28.3-39.6-28.3-65.4c0-49.5,40.1-89.6,89.6-89.6c49.5,0,89.6,40.1,89.6,89.6
            c0,12.3-2.5,24-6.9,34.6l0,0c-33.8,77-110.7,130.9-200.2,130.9c-85.6,0-159.7-49.2-195.5-120.9"/>
    </g>
</switch>
</svg>



</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search