F.A.Q.
Shape Elements SVGScalable Vector Graphics

This project have 2 folders and 6 files:

Regular

  1. Unpack zip in the root folder.
  2. Insert scripts in HTML page, before </body>:
  3. <script src="js/player.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
  4. Choose element from example and write his name to "id" in <div> element in HTML page. Save and restart page in browser.
  5. <div id="shapeName"></div>

Advanced

Change color all item

  1. Go to css/style.css;
  2. Write a new rule for element path and change color stroke and fill;
  3. path {
     stroke: #1e56b6;
     fill: #b61e63;
    }

Change color a single item

  1. Go to css/style.css;
  2. Find class .shapeName_change_color_1 and change color fill and stroke;
  3. .shapeName_change_color_1 {
     stroke: #70B61E;
     fill: #70B61E;
    }

Change size for all item

  1. Go to css/style.css;
  2. Find class .anim-icon and change width;
  3. .anim-icon {
     width: 100%;
    }

Change size for a single item

  1. Go to css/style.css;
  2. Write a new rule for ID;
  3. #shapeName {
     width: 40%;
    }