PHP-generated Hatch Diamonds for Fun

Ready for some fun?

PHP can use the div tag to generate horizontal lines. The PHP script accompanying this article can generate diamond shapes of various designs.

Here are a few illustrations.

Some ideas where the diamonds could be used include as article section dividers, decorations on covers or in navigation areas, and as breaks for heavy text blocks.

When a pleasing diamond is generated, a screenshot can be made and the image used in various places, even as a web page or div background image.

How It Works

In the PHP Script, the minimum and maximum widths are specified as percentages. (100% would be the entire available width.)

The PHP script begins at the smallest width and generates a line. Then the width is incremented by the amount you specified and another line is generated.

That keeps going until the width is at the maximum.

Then, the width is decremented and lines generated until the width is at the minimum.

The result is a diamond shape or, depending on your specifications, something akin to it.

The line thickness, spacing between lines, and line color can all be specified.

The PHP Script

Here is the PHP script. It is designed to be put into your web page where you want to generate the hatch diamond. How-to information follows.

<?php
$WidthMinimumPercentage = 10;
$WidthMaximumPercentage = 50;
$WidthPercentageAdjustment = 20;
$HatchLineThickness = 3;
$HatchLineSpacing = 0;
$HatchLineColor = "#2F8CDB";
for( $i=$WidthMinimumPercentage; $i<=($WidthMaximumPercentage-$WidthPercentageAdjustment); $i+=$WidthPercentageAdjustment )
{
    echo <<<HATCHLINE
<div 
  style="height:{$HatchLineThickness}px; 
         width:${i}%; 
         background-color:$HatchLineColor; 
         margin:0 auto {$HatchLineSpacing}px auto;">
</div>
HATCHLINE;
}
for( ; $i>=$WidthMinimumPercentage; $i-=$WidthPercentageAdjustment )
{
    echo <<<HATCHLINE
<div 
  style="height:{$HatchLineThickness}px; 
         width:${i}%; 
         background-color:$HatchLineColor; 
         margin:0 auto {$HatchLineSpacing}px auto;">
</div>
HATCHLINE;
}
?>

How to Use the Script

Paste the script into the web page source code where you want to generate a hatch diamond. Then, customize 6 variables (the blue lines in the above PHP source code.

The first 3 lines to customize have to do with the width of the hatch diamond.

1. $WidthMinimumPercentage = 10; is the percent of the available width for the shortest of the horizontal hatch lines. Specify only the number, no % character. The shortest line is at the top and the bottom of the hatch diamond. The number 0 may be specified.

2. $WidthMaximumPercentage = 50; is the percent of the available width for the longest of the horizontal hatch lines. Specify only the number, no % character. The longest line is at the middle of the hatch diamond. The number 100 may be specified. This number determines the width of the hatch diamond.

3. $WidthPercentageAdjustment = 20; is how much the percentage shall be adjusted during the course of making the diamond. This number determines the slant of the hatch diamond sides.

The last 3 lines have to do with the appearance of the hatch lines.

4. $HatchLineThickness = 3; specifies the thickness of the hatch lines, in pixels. (Don't specify "px", just the number.) The number needs to be larger than 0.

5. $HatchLineSpacing = 0; specifies how much space to put between the hatch lines. (Don't specify "px", just the number.) The number may be 0 or larger. If 0, the diamond will be a solid color.

6. $HatchLineColor = "#2F8CDB"; specifies the color of the hatch lines. Any HTML color value may be specified here.

Adjust the various custom specifications to see what the results are. It's actually quite good fun.

The following section break is generated from the PHP script source code presented further above — no specifications changed.

For completeness, each of the hatch diamond illustrations at the beginning of this article are repeated here, followed by the specifications that created the illustration.

$WidthMinimumPercentage = 0;
$WidthMaximumPercentage = 10;
$WidthPercentageAdjustment = .5;
$HatchLineThickness = 1;
$HatchLineSpacing = 0;
$HatchLineColor = "#2F8CDB";

$WidthMinimumPercentage = 0;
$WidthMaximumPercentage = 50;
$WidthPercentageAdjustment = 5;
$HatchLineThickness = 1;
$HatchLineSpacing = 1;
$HatchLineColor = "#2F8CDB";

$WidthMinimumPercentage = 0;
$WidthMaximumPercentage = 10;
$WidthPercentageAdjustment = 1;
$HatchLineThickness = 4;
$HatchLineSpacing = 2;
$HatchLineColor = "#2F8CDB";

$WidthMinimumPercentage = 0;
$WidthMaximumPercentage = 50;
$WidthPercentageAdjustment = 20;
$HatchLineThickness = 3;
$HatchLineSpacing = 0;
$HatchLineColor = "#2F8CDB";

As you can see, changing the custom specifications can produce a wide variety of hatch diamond shapes.

If you like to make PHP dance and do things according to your direction, you'll have fun with this hatch diamond script.

See how many different pleasing hatch diamonds you can generate.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager