Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

What is box-sciagraphy?

Box-sciagraphy is a jQuery plugin that draws a long CSS box-shadow for an element to simulate a shadow cast by the sun if that element were viewed from above at a particular place and time. This plugin is in part inspired by Google Map's incorrect cast shadows and FourShadows.js.

Sciagraphy, if you're interested, is the use of shading and the projection of shadows to show perspective in architectural or technical drawing. Architects sometimes use sciagraphic studies to determine how much sunlight will strike a building, in addition to creating convincing rendering of a building.

Using box-sciagraphy in your project

Box-sciagraphy can be included in your project with NPM or Bower, or by downloading dist/box-sciagraphy.js directly.

Install from NPM:

$ npm install box-sciagraphy

Install from Bower:

$ bower install box-sciagraphy

Box-sciagraphy depends on jQuery and Suncalc. You'll need to include them both in your project:

<script src="path/to/jquery.js"></script>
<script src="path/to/suncalc.js"></script>
<script src="path/to/box-sciagraphy.js"></script>

You'll need to define what elements should recieve box-sciagraphy shadows:


On individual elements, you'll need to define an UNIX timestamp, latitude, and longitude. For an element "placed" at 9:00am on December 21, 2014 (Winter Solstice):

<div class="element"

Additionally, there are two global options that you can pass through the .boxSciagraphy() function call:


String. Any valid CSS color, defaults to gray. Determines the color of the cast box-shadow. Colors with alpha transparency may give you strange results.


Number. Determines the "fuzziness" of the shadow by adding a blur to the box-shadow property.

Cool huh? There're some good tools out there to help you get the information you'll need:

Why is this useful?

Box-sciagraphy's usefulness is dubious at best. But, if you can think of a compelling use, I'd love to hear about it!


Box-sciagraphy is under tested...I'm pretty sure the math is correct and that it works for all appropriate times and locations. Please submit issues for any problems you may encounter. If you'd like to contribute, feel free to open an issue or pull request. Also, I'd love to hear from you if you use Box-sciagraphy in your project!

You can’t perform that action at this time.