Shapes

Base shapes

The iHASCO logotype features a hexagon, square, triangle and circle, and it's these simple geometric shapes that provide the fourth ingredient of the identity:

These are used as solid coloured shapes, containers for illustration and photography and in repeating patterns. The triangle or hexagon shapes can also be combined to create further suitable shapes:

As long as the angles are either 90° or 30° they will suit the identity

Shapes and patterns do four tasks in a layout:

This is covered in further detail in Layouts.

Patterns

As well as using the base shapes as they are, they can also be repeated in patterns. These are displayed in an offset grid, or angled to 30°.

Each pattern can be altered to use any colour scheme, as well as changing the density of the shapes, or removing the fill.

Dot

Triangle

Line

Container shapes

These patterns can be used inside any base shape container, but avoid combining a rectangle with vertical lines (below left) as the result is dull:

Using a container shape with 30° angles (above right) gives a more interesting result.

Technical notes on patterns

The above patterns are created using SVG with pattern fill, where the patterns are defined separately from their containing shape. With this, any pattern definition can be re-used inside any SVG path.

First, the pattern is defined:

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <pattern id="pattern-line" x="0" y="0" width="15.05" height="26" viewBox="0 0 22 38" patternUnits="userSpaceOnUse">
    <path stroke="#8CC642" stroke-width="6" d="M92,-127 L-75,162"/>
    <path stroke="#8CC642" stroke-width="6" d="M167,0 L0,289" transform="translate(-60.5 -114)"/>
  </pattern>
  </defs>
</svg>

Then this can be used as a pattern fill for any shape defined in SVG:

<svg width="150" height="150">
  <polygon points="150 140 75 10 0 140" fill="url(#pattern-line)"/>
</svg>