oddcamp/odd-path

Small utility to create the SVG paths that will be used on our website.

Odd SVG Path

JS library to generate the SVG path that will be used as a frame for the site and for various elements (like team pictures).

Basic usage

Create an array of lines and pass it to the svgFrame() function.

var path = {
  0: {
    arcRad: 5,
    points: [
      ["h", 100],
      ["v", 100],
      ["h", -100],
      ["v", -100],
    ],
  },
};

svgFrame("elementId", path);

This will create a frame to the maximum available space. Notice that svgFrame() accept an options object that allows you to customize default values. More info on the path later.

Syntax

All you need to care about is svgFrame(), we already saw that it accepts an ID for the element and an array that defines the path but as anticipated is also able to accept an options object:

• hStart (integer) default: 10 - defines the horizontal start point to draw the shape, it's value is threated as pixel and will also be used to define the minimum horizontal size of the frame,
• vStart (integer) default: 10 - defines the vertical (start point to draw the shape, it's value is threated as pixel and will also be used to define the minimum vertical size of the frame,

More on path, points and configuration

A path is always drawn from the top-left corner and each line is drawn clockwise. The array of points describes the lines that we need to draw on the screen. Vertical values are considered as relative to the viewport while the horizontal can be relative or absolute.

• v - draws a vertical line, positive values go top to bottom while negative ones are bottom to top
• h - relative unit to draw an horizontal line, positive values go left to right while negative ones are right to left
• H - absolute unit to draw an horizontal line, positive values define an absolute point from the right margin while negative ones define an absolute point from the left margin.

When you use an absolute unit (H) you have two magic values, close and start. Using those strings will allow you to draw the horizontal line to reach the margins defined by the frame, with close you reach the right margin while with start you reach the left one.

The points array lives inside a configuration object that let you define the window size, this lets you define more points and arcRad to accomodate the shape on different screen sizes.

An example can be seen as our base shape:

const oddFrame = {
  0: {
    arcRad: 5,
    points: [
      ["H", 60],
      ["v", 5],
      ["H", 30],
      ["v", 5],
      ["H", "close"],
      ["v", 80],
      ["H", 40],
      ["v", 10],
      ["H", "start"],
      ["v", -100],
    ],
  },
  640: {
    arcRad: 10,
    points: [
      ["H", 100],
      ["v", 5],
      ["H", 50],
      ["v", 5],
      ["H", "close"],
      ["v", 80],
      ["H", 100],
      ["v", 10],
      ["H", "start"],
      ["v", -100],
    ],
  },

  1024: {
    arcRad: 15,
    points: [
      ["H", 150],
      ["v", 5],
      ["H", 75],
      ["v", 5],
      ["H", "close"],
      ["v", 80],
      ["H", 150],
      ["v", 10],
      ["H", "start"],
      ["v", -100],
    ],
  },
};

odd-path's Issues

Not right arc for absolute middle horizontal and vertical

With a path defined as follows, we get the wrong values drawing the arcs.

const notPlayWellMiddleHorizontal = [
  ["h", 30],
  ["v", 10],
  ["H", 150],
  ["v", 5],
  ["H", 75],
  ["v", 15],
  ["H", "close"],
  ["v", 70],
  ["H", 250],
  ["v", -5],
  ["H", 375],
  ["v", 5],
  ["H", "start"],
  ["v", -30],
  ["H", -60],
  ["v", -35],
  ["H", "start"],
  ["v", -35],
];

As you can see from the image below the issue is present for the shape at the bottom and for the first two arcs that get's created while closing the shape.

TODO:
Improve checks for the createArc() function.

Make path animatable

We want to animate the path after the page is load.

Base idea

Set all the values of the array (including the arcRad) and transition them from 0 to the original value. The only issue I can think of for now is that arcRad needs to grow exponentially based on the space left, that's because if we have a radius bigger than the space browser does the best it can think of to still drawing the arc.

Set dimensions based on element

Transform the way we select the element to build the frame from so we can apply the frame to any elements on the page.

Right now the SVG is fixed but we need to change it in order to apply the custom frame.

Base idea

Just pass a selector and let JavaScript calculate the size. Alternatively, since buildFrame() accepts an SVG ID, we could traverse the DOM to find the sibling.