# clock

This clock is built entirely with the Graphery SVG library.

edit in codepen.io (opens new window)

We will now explain step by step how to create a dynamic SVG of this type.

# Import gySVG

The first step, if we haven't already done so, is to import the Graphery SVG library. In our case, we've chosen to include the code within a script type=module and we'll use the import expression.

    see: load gySVG

    # Create the SVG

    To create the graph we are going to use gySVG() and we are going to configure the viewBox.

      see: SVG Element, .viewBox, .attachTo

      # Outside circle

      We create the outer circle of the image with .add('circle') and configure it:

        see: Circle

        # Hour and minute marks

        To create the hour and minute marks we have to use add('line') and to position each line inside the circle every N degrees we are going to use some relatively complex mathematical operations:

          see: Line

          # Text label for every hour

          We modified the previous code a bit to add with add('text') the labels for each of the clock hours. Again, to properly locate each of the texts we have to use a couple of trigonometric functions.

            see: Text element

            # Clock hands

            Now we create the three clock hands by add('polygon'), one for the seconds, one for the minutes, and one for the hours.

              see: Polygon

              # Update time automatically

              By adding a little more code we can rotate the clock hands to show the current time. To avoid complicating the example we have used a simple setInterval() where .transform('rotate()) is called for each of the hands.

                see: Transform

                # The complete code

                If we put all these steps together this is the example's code:

                import gySVG from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';
                
                const svg = gySVG().viewBox('0 0 250 250');
                
                svg.add('circle')
                  .cx(125).cy(125).r(124)
                  .stroke('#000').stroke_width(2).fill('none');
                
                let h = 1;
                for (let n = 6;  n <= 360; n += 6) {
                  const radians = ((n - 90) * Math.PI) / 180.0;
                  let radio;
                  if (n % 30 === 0) {
                    radio = 110;
                    svg.add('text')
                      .innerHTML(h++)
                      .x(125 + 95 * Math.cos(radians))
                      .y(132 + 95 * Math.sin(radians))
                      .style.fontSize(20)
                      .style.fontFamily('sans-serif')
                      .text_anchor('middle');
                  } else {
                    radio = 115;
                  }
                  svg.add('line')
                    .x1(125 + 120 * Math.cos(radians))
                    .y1(125 + 120 * Math.sin(radians))
                    .x2(125 + radio * Math.cos(radians))
                    .y2(125 + radio * Math.sin(radians))
                    .stroke('#000').stroke_width(n % 30 === 0 ? 2 : 1);
                }
                
                const g       = svg.add('g').fill('#000').stroke('#555').stroke_width(1);
                const seconds = g.add('polygon').points([125, 20], [129, 125], [125, 145], [124, 125]);
                const minutes = g.add('polygon').points([125, 30], [130, 125], [125, 150], [120, 125]);
                const hours   = g.add('polygon').points([125, 60], [132, 125], [125, 160], [118, 125]);
                
                svg.attachTo('#example-clock');
                
                setInterval((function update() {
                  const d = new Date();
                  seconds.transform(`rotate(${ d.getSeconds() * 6 }, 125, 125)`);
                  minutes.transform(`rotate(${ d.getMinutes() * 6 }, 125, 125)`);
                  hours.transform(`rotate(${(d.getHours() % 12 * 30) +(d.getMinutes() * 0.5) }, 125, 125)`);
                  return update;
                })(), 1000);