Categories
#SVG Web development

SVG Stroke & Fill Animation

Some time ago we went through the tutorial SVG Path Drawing Animation, today we can go a bit further and learn how to fill our strokes.

SVG Fill Animation
Do you like this image? Check more images in theĀ store.
*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add SVG

To create the animation you need to make sure that your SVG shape/path has a stroke. To see how to create basic shapes using SVG click here.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.58 239.81"><defs><style>.cls-1,.cls-6{fill:#1d1d1b;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#ededed;}.cls-3{fill:#dadada;}.cls-4{fill:#b2b2b2;}.cls-5{fill:none;stroke-linecap:round;}.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>css-2</title><g id="computer">
  
  <path class="cls-1" d="M73.18,2.5H247.61a29.13,29.13,0,0,1,29.13,29.13V150.15a0,0,0,0,1,0,0H44a0,0,0,0,1,0,0V31.63A29.13,29.13,0,0,1,73.18,2.5Z"/><polygon class="cls-2" points="263.08 137.22 58.68 137.22 58.31 26.04 262.71 26.04 263.08 137.22"/><path class="cls-3" d="M44.07,150.15H276.54a0,0,0,0,1,0,0v9a15.4,15.4,0,0,1-15.4,15.4H59.47a15.4,15.4,0,0,1-15.4-15.4v-9a0,0,0,0,1,0,0Z"/><circle class="cls-1" cx="159.29" cy="163.44" r="5.91"/><polygon class="cls-4" points="140.35 174.79 130.22 223.48 191.34 223.48 180.55 175.12 140.35 174.79"/><rect class="cls-4" x="107.91" y="224.34" width="101.64" height="9.15" rx="4.58"/><line class="cls-5" x1="2.5" y1="237.31" x2="201.58" y2="237.31"/><line class="cls-5" x1="267.31" y1="237.31" x2="330.08" y2="237.31"/><path class="cls-5" d="M472.26,525.58" transform="translate(-105.44 -288.27)"/><line class="cls-5" x1="214.5" y1="237.31" x2="253.49" y2="237.31"/></g>
  
  <g id="html"><text class="cls-6" transform="translate(105.71 98.8)"><tspan xml:space="preserve">  &lt;/&gt;</tspan></text></g></svg>

Step2.

Add CSS

body {
  background-color: #2a9d8f;
}

.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6 {
  stroke-dasharray: 1650;
  stroke-dashoffset: 1650;
  animation: draw 3.5s linear forwards;	
}

#html {
  position: absolute;
  transform: translateX(10px);
}

svg {
  position: absolute;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 70%;
  fill-opacity: 0;
  
}

Step3.

Add CSS Animation

@keyframes draw {
          0% {
            stroke-dashoffset: 1650;
            }
          75% {
            stroke-dashoffset: 0;
            fill-opacity: 0;
          }
          95% {
            stroke-dashoffset: 0;
          }
          100% {
            fill-opacity: 1;
            stroke-dashoffset: 0;
          }
        }

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Leave a Reply