Graphery SVG

# car racing

This example is a very simple car racing game. Please, click the start button.

edit in codepen.io (opens new window)

Now we will explain step by step how to create this animated SVG.

# Import Graphery SVG

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 and define a width.

      # The car

      We define a defs element for include inside the car symbol. This kind of element don't display the content and can be reused with a simple use element.

        # Circuit

        Now we define the race track and each of the lines of the circuit.

          # Three cars

          With the use element we can create three cars and put them in the starting line.

            # Start button

            Finally, we add the start button and the code for the racing animation:

              # 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, 600, 300).width ('600px').height ('300px');
const defs = svg.add ('defs');
const car  = defs.add ('symbol').viewBox (0, 0, 960, 480).width (40).height (20);
car.add ('path')
    .d (`M557 7c-19-4-1 31-1 38l-124 0C350 48 9-1 14 116 5 208-3 313 26 402c29 18 72
       21 107 30 135 19 284-11 422-1l-8 35c7 4 18 3 22-4l12-31c50-6 135 9 183 11 144 11 211-138
       182-262C914-16 721 47 582 45c-5-7-9-41-24-38z`);
car.add ('path').fill ('white')
    .d (`M927 330l-5.1.6c-21 2-37 26-39 54l-0 7 5.2-4c15-14 28-32 37-52l2-4z
       M927 140l-5.1.6c-21-2-37-26-39-54l-0-7 5.2 4c15 14 28 32 37 52l2 4z
       M207 120c-75 9-124 8-128 117 3 109 53 107 128 117 13 0 24-10 24-24V144c0-13-10-24-24-24z
       M639 86c-27 7-103 5-104 45v212c0 37 71 36 95 44 117 28 117-314 8-302z
       M347 368c-33 0-65 1-94 5 25 62 247 20 327.1 33-47-23-133-39-232-39z
       M347 107c-33 0-65-1-94-5 25-62 247-20 327.1-33-47 23-133 39-232 39z`);

svg.add ('path').stroke_width (100).stroke ('black').fill ('none')
    .d (`M450,250H150c-55,0-100-45-100-100v0C50,95,95,50,150,50h300c55,0,100,45,100,100v0
         C550,205,505,250,450,250z`);
const g     = svg.add ('g').fill ('none').stroke ('white')
    .stroke_width (1).stroke_dasharray ([12, 12]);
const line1 = g.add ('path')
    .d (`M450,225H150c-41.2,0-75-33.7-75-75v0c0-41.2,33.7-75,75-75h300c41.2,0,75,33.7,75,75v0
         C525,191.3,491.3,225,450,225Z`);
const line2 = g.add ('path')
    .d (`M440,250H150.9C95.4,250.5,50,205.1,50,149.6v-0.1C50,93.9,95.4,48.5,150.9,48.5h298.1
         c55.5,0,100.9,45.4,100.9,100.9v0.1C550,205.1,504.6,250.5,450,250.5Z`);
const line3 = g.add ('path')
    .d (`M450,275H150c-68.7,0-125-56.2-125-125v0C25,81.2,81.2,25,150,25h300c68.7,0,125,
         56.2,125,125v0C575,218.8,518.8,275,450,275Z`);

const carRed   = svg.add ('use').href (car.ref ()).fill ('red').width (40).height (20)
    .transform ('rotate(180,465,230)').x (460).y (225);
const carGreen = svg.add ('use').href (car.ref ()).fill ('green').width (40).height (20)
    .transform ('rotate(180,465,255)').x (460).y (250);
const carBlue  = svg.add ('use').href (car.ref ()).fill ('blue').width (40).height (20)
    .transform ('rotate(180,465,280)').x (460).y (275);

const button = svg.add ('g').font_size (15).font_family ('monospace').style.cursor ('hand');
button.add ('rect').x (250).y (135).width (100).height (40).rx (20).ry (40)
    .fill ('grey').stroke ('black');
button.add ('text').x (300).y (160).text_anchor ('middle')
    .fill ('white').content ('start');

button.addEventListener ('click', () => {
  carRed.x (0).y (0).transform ('translate(-20, -10)')
      .add ('animateMotion').dur (((Math.random () * 2) + 4) + 's')
      .repeatCount (1).rotate ('auto').beginElement ().fill ('freeze')
      .add ('mpath').href (line1.ref ());
  carGreen.x (0).y (0).transform ('translate(-30, -10)')
      .add ('animateMotion').dur (((Math.random () * 2) + 4) + 's')
      .repeatCount (1).rotate ('auto').beginElement ().fill ('freeze')
      .add ('mpath').href (line2.ref ());
  carBlue.x (0).y (0).transform ('translate(-20, -10)')
      .add ('animateMotion').dur (((Math.random () * 2) + 4) + 's')
      .repeatCount (1).rotate ('auto').beginElement ().fill ('freeze')
      .add ('mpath').href (line3.ref ());
});

svg.attachTo ('#content');

              ← fractal tree →