Tag: svg

Categories
Web development

SVG Analog Clock (current time)

SVG Analog Clock
SVG Analog Clock


SVG Analog Clock (current time)

To create the SVG Analog Clock (current time) follow the steps below.

Demo:

*to see the SVG Clock Animation on the website click here.

Step1.

Draw the Clock

For this tutorial, I had drawn Clock and Clock face in Adobe Illustrator. To see how to draw the analog clock in Adobe Illustrator click here.

Step2.

Add the HTML and paste your SVG code into it (inside the <body> element in your HTML document):

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
</body>
</html>

Step3.

Draw the clock hands:

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
    <style>
        #hr {
  stroke-width:15px; 
  stroke: #333; 
  stroke-linecap:round;
}

#min {
	stroke-width: 10px;
  fill: #333; 
  stroke: #333;
  stroke-linecap:round;
}
#sec {
  stroke-width: 5px;
  stroke: #f55;
  stroke-linecap:round;
  transform-origin: bottom;
  transform-box: fill-box;
 }
    </style>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
        
        <g transform="translate(270, 270)" id="clock-hands">
         <line x1="270" y1="270" x2="270" y2="110" transform="rotate(80 100 100)" id="hr">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="43200s"
                              repeatCount="indefinite"/>
        </line>
                                                      
        <line x1="270" y1="270" x2="270" y2="75" id="min">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="3600s"
                              repeatCount="indefinite"/>
        </line>
      
        <line x1="270" y1="270" x2="270" y2="40" id="sec">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="60s"
							                      calcMode="discrete"
                              values="0;   6;  12;  18;  24;  30;  36;  42;  48;  54; 60;  66;  72;  78;  84;  90;  96; 102; 108; 114; 120; 126; 132; 138; 144; 150; 156; 162; 168; 174; 180; 186; 192; 198; 204; 210; 216; 222; 228; 234; 240; 246; 252; 258; 264; 270; 276; 282; 288; 294; 300; 306; 312; 318; 324; 330; 336; 342; 348; 354; 0"
                              additive="replace"
                              fill="freeze"
                              repeatCount="indefinite"/>
        </line>
    </g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
</body>
</html>

Step4.

To set the current time and link the clock hands add JavaScript:

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
    <style>
        #hr {
  stroke-width:15px; 
  stroke: #333; 
  stroke-linecap:round;
}

#min {
	stroke-width: 10px;
  fill: #333; 
  stroke: #333;
  stroke-linecap:round;
}
#sec {
  stroke-width: 5px;
  stroke: #f55;
  stroke-linecap:round;
  transform-origin: bottom;
  transform-box: fill-box;
 }
    </style>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
        
        <g transform="translate(270, 270)" id="clock-hands">
         <line x1="270" y1="270" x2="270" y2="110" transform="rotate(80 100 100)" id="hr">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="43200s"
                              repeatCount="indefinite"/>
        </line>
                                                      
        <line x1="270" y1="270" x2="270" y2="75" id="min">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="3600s"
                              repeatCount="indefinite"/>
        </line>
      
        <line x1="270" y1="270" x2="270" y2="40" id="sec">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="60s"
							                calcMode="discrete"
                              values="0;   6;  12;  18;  24;  30;  36;  42;  48;  54;
               60;  66;  72;  78;  84;  90;  96; 102; 108; 114;
              120; 126; 132; 138; 144; 150; 156; 162; 168; 174;
              180; 186; 192; 198; 204; 210; 216; 222; 228; 234;
              240; 246; 252; 258; 264; 270; 276; 282; 288; 294;
              300; 306; 312; 318; 324; 330; 336; 342; 348; 354; 0"
                              additive="replace"
                              fill="freeze"
                              repeatCount="indefinite"/>
        </line>
    </g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
    <script>
        let clockHands = [];
clockHands[clockHands.length] = document.querySelector("#min > *");
clockHands[clockHands.length] = document.querySelector("#hr > *");

let cy = 270;
let cx = 270;

function link(idx) {
  return [idx, cx, cy].toString();
}

let date = new Date();
let hrHand = 360 * date.getHours() / 12 + date.getMinutes() / 2;
let minHand = 360 * date.getMinutes() / 60;

clockHands[0].setAttribute('from', link(minHand));
clockHands[0].setAttribute('to', link(minHand + 360));
clockHands[1].setAttribute('from', link(hrHand));
clockHands[1].setAttribute('to', link(hrHand + 360));
    </script>
</body>
</html>

Enjoy coding!

Hey, here’s something that might interest you:

SVG Handwriting Animation

Baggage Scan /SVG & JavaScript Animation

CSS Moon orbiting the Earth on the SVG path

Categories
Web development

CSS Moon orbiting the Earth on the SVG path

CSS Earth with the Moon

Demo:

*to see the animation on the website click here.

To create the CSS Earth and Moon animation follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="container">
  <div class="clouds"></div>
  <div class="planet">
  </div>
  <div class="moon"></div>
  <div class="up"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #072137;
}

.container {
  position: relative;
}

Add clouds:

.clouds {
  position: absolute;
  background-color: #041c2f;
  width:200px;
  height: 40px;
  border-radius:50px;
  top:-45px;
  left:90px;
  box-shadow: -140px 40px #072137,140px 40px #072137,20px 40px #041c2f, 20px 80px #041c2f, 180px 120px #072137, 20px 120px #041c2f, 70px 160px #041c2f, -180px 160px #041c2f, -290px 200px #072137,-10px 200px #072137,-120px 200px #041c2f, -140px 240px #041c2f;
}

.clouds:before {
  content:"";
  position:absolute;
  width:7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.3);
  top:-10px;
  box-shadow: -100px 100px rgba(255,255,255,0.3), 130px 230px rgba(255,255,255,0.3), 50px 310px rgba(255,255,255,0.3), -130px 215px rgba(255,255,255,0.3);
}

.clouds:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
  left:50px;
  top:20px;
  box-shadow: 100px 100px rgba(255,255,255,0.2), -100px 240px rgba(255,255,255,0.2);
}

Style the planet:

.planet {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #00a5cf;
  border-radius:50%;
  overflow:hidden;
}

.planet:before {
  content:"";
  position: absolute;
  background-color: #368715;
  width:100px;
  height:25px;
  border-radius:20px;
  left:15px;
  box-shadow:60px 25px #00a5cf,25px 25px #368715, -25px 25px #368715, 50px 50px #368715, -15px 50px #368715, 90px 75px #00a5cf,30px 75px #368715, -15px 75px #368715, -25px 0px #368715;
  top:100px;
}

.planet:after {
  content:"";
  position: absolute;
  width:200px;
  height:200px;
  border-radius: 50%;
  top:0;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
.up {
  position: absolute;
  background-color: #00a5cf;
  width:200px;
  height:100px;
  border-radius: 100px 100px 0 0;
  top:0;
  overflow:hidden;
}

.up:before {
  content:"";
  position: absolute;
  background-color: #368715;
  width:100px;
  height:25px;
  border-radius:20px;
  left:-10px;
  box-shadow:60px 25px #00a5cf,25px 25px #368715, -25px 25px #368715, 50px 50px #368715, -5px 50px #368715, 90px 75px #00a5cf,30px 75px #368715, -10px 75px #368715;
}

.up:after {
  content:"";
  position: absolute;
  width:200px;
  height:100px;
  border-radius: 100px 100px 0 0;
  top:0;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
CSS Planet Earth

Style the moon with the offset-path:

.moon {
  position: absolute;
  width:40px;
  height:40px;
  background-color: #d6d6d6;
  box-shadow: inset -5px 5px rgba(0,0,0,0.2);
  border-radius:50%;
  top:-135px;
  left:-175px;
  overflow:hidden;
  offset-path: path("M280.25,191c38.55,0,74.78,5.44,102,15.32C409.18,216.08,424,228.93,424,242.5s-14.82,26.42-41.74,36.18C355,288.56,318.8,294,280.25,294s-74.78-5.44-102-15.32c-26.91-9.76-41.74-22.61-41.74-36.18s14.83-26.42,41.74-36.18c27.24-9.88,63.47-15.32,102-15.32m0-1c-79.95,0-144.76,23.51-144.76,52.5S200.3,295,280.25,295,425,271.49,425,242.5,360.19,190,280.25,190Z");
  animation: move 6s linear infinite;
}

.moon:before, .moon:after {
  content:"";
  position: absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow: inset 2px 2px rgba(0,0,0,0.2);
  background-color: #e5e5e5;
}

.moon:before {
  top:5px;
  left:25px;
}

.moon:after {
  top:35px;
  left:10px;
}

Animate the moon (Orbiting around the Earth):

@keyframes move {
  to { 
    offset-distance: 50%;
  }
}

Enjoy coding!

Read also:

Pure CSS Train Animation

CSS Saturn/ Planet Rings

CSS Train Front Animation/ Loader

Categories
Web development

How to resize an SVG image?

Files in format .png or .jpg are easy to resize and in most cases, you do not need to use any special software to do it.
The resizing is more complicated when you want to change the size for .svg format files.

resize SVG files

What is making the .svg different from other image formats?

There can be a lot of confusion about which kind of image format to use to achieve the best result in any given situation.

In the case of .jpg and .png formats, the size of the image depends on the number of pixels. The image resolution is therefore defined by the number of pixels that defined the height and width of an image.

The .svg is a vector-based image format. SVG defines the graphics in XML format. A vector image uses geometric forms such as points, lines, curves, and shapes to represent different parts of the image as discrete objects. This is why they retain their high quality no matter how much you scale them (more about the .svg file you can read here).

How to resize a SVG image?

SVG images can be created and edited with any text editor but it is often more convenient to create SVG images with a drawing program, like Illustrator, Sketch, Inkscape, or another vector-based program.

I am using two ways to resize .svg files by using the text editor (you can use any text editor to resize your image).

Option 1:

When you will open the .svg file in the text editor it should show lines of code.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The width and height attributes of the element define the width and height of the SVG image. So you can change the width and height to what you want.

Option 2:

If you haven’t defined the width and the height of the image in the SVG code you can adjust the size in CSS:

svg {
  width:10%;
}

Example:

Hope this helps!

Hey, here’s something that might interest you:

SVG Draw on Scroll

SVG Handwriting Animation

SVG Stroke & Fill Animation

Categories
Web development

Round text animation on Scroll

Lately, I posted the SVG tutorial, how to move the text on the path (to see the tutorial click here), today I’ll show you another SVG text effect, how to move SVG text on the circle path by mouse scrolling.

animate a text on the circle

Animation:

*animation opened in the Safari browser.
*to see the live output of the animation on the website click here.

Demo:

What do you need to do?

  1. Add SVG
  2. Add CSS
  3. Add JavaScript

Step1.

Add SVG

Add an SVG shape (circle), and the text: 

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

   <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape" startOffset="500px" id="textPath">Scroll to move a text on the circle.</textPath>
      
    </text>
</svg>

Step2.

Add CSS

Style the text and the circle:

body {
  height: 200vh;  
}

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: fixed;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-150deg);
}

Step3.

Add JavaScript

const textPath = document.querySelector("#textPath");

const a = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", event => {
  let percent = (a[st]||b[st]) / ((a[sh]||b[sh]) - a.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 5) + 500)
});

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

Enjoy coding!

Read also:

How to resize an SVG image?

CSS Moon orbiting the Earth on the SVG path

SVG Draw on Scroll

Categories
Web development

Moving text on an SVG path

SVG text on a circle

Example1 – Moving text on a circle:

*animation opened in the Safari browser.
*to see the animation on the website click here.

Demo:

Example2 – Moving text on a heart path:

*animation opened in the Safari browser.

Demo:

Step1.

Add a SVG path/ shape

In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

Step2.

Add CSS/ Style the circle

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: relative;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-120deg);
}

Step3.

Add the text( body section)

  <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape">SVG moving text on the circle.</textPath>

Step4.

Add SVG Animation

  <animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
    </text>
</svg>

Enjoy coding!

Read also:

SVG Handwriting Animation

SVG Stroke & Fill Animation

How to resize an SVG image?

Categories
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

Demo:

*to see the live output of the animation on the website 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

.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;
            fill-opacity: 0;
            }
          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!

Read also:

SVG Handwriting Animation

Baggage Scan /SVG & JavaScript Animation

Round text animation on Scroll

Categories
Web development

SVG Path Drawing Animation

Path Drawing Animation

The <path> element is used to define a path. It can draw anything you like!

Demo:

To see the live output of the animation on the website click here.

To create SVG Path Drawing Animation we’ll use the same SVG path from the tutorial – SVG Draw on Scroll (which I created in Adobe Illustrator).

Step1.

Add HTML

Get an SVG path (make sure that your shape has a stroke).

SVG Path drawing
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.cls-1{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path class="cls-1" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>

Step2.

Add CSS

We will use the stroke-dasharray property for creating dashes in the stroke of SVG shapes, and also a stroke-dashoffset property to define the location along an SVG path where the dash of a stroke will begin.

body {
  background-color: #2a9d8f; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px;
  
}

.cls-1{
       stroke-width: 3px;
       stroke-dasharray: 1200;
       stroke-dashoffset: 1200;
       animation: draw 3s linear forwards infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

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

Enjoy coding!

Read also:

Baggage Scan /SVG & JavaScript Animation

SVG Handwriting Animation

SVG Draw on Scroll

Categories
Web development

SVG Draw on Scroll

SVG Draw on Scroll

Using SVG and JavaScript to draw a heart on scroll. Note that it has to be a <path> element:

Demo:

Step1.

Add HTML

Get a SVG path

To make this animation working it has to be a path (any other of SVG elements won’t work).

To create an animation I drew a path (heart) in Adobe Illustrator. To read more about SVG and learn how to create a SVG file click here and here. 

<div class="container">
<div class="text"><h1>Scroll to draw</h1></div>
  
  
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.heart{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path id="heart1" class="heart" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>
  
</div>

Step2.

Add CSS

body {
  background: linear-gradient(141deg, #f0f3bd 0%, #02c39a 51%, #00a896 75%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5000px;
  
}

.container {
  position: relative; 
}

svg {
  stroke-width: 2px;
  position: fixed;
  width: 200px;
  height: auto;
  margin:0;
  top: 30%;
  left: 45%;
}

.text {
  position: absolute;
  top:-2500px;
  display: block;
  color: white;
  width:400px;
  left:-100px;
  text-shadow: 1px 1px 1px black;
}

Step3.

Add JavaScript

const svg = document.getElementById("heart1");
const length = svg.getTotalLength();


svg.style.strokeDasharray = length;

svg.style.strokeDashoffset = length;

window.addEventListener("scroll", function () {
  const scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  const draw = length * scrollpercent;

  svg.style.strokeDashoffset = length - draw;

});

Enjoy coding!

Read also:

SVG Stroke & Fill Animation

Baggage Scan /SVG & JavaScript Animation

CSS Moon orbiting the Earth on the SVG path