Recently I came across the custom error page of the creative jar website; featuring a very fancy image of an origami bear. Because of it’s simplicity in the shapes that are used to make it up I thought this could be replicated using the latest technologies in web design.
Now I’m well aware that uploading a jpeg takes a fraction of the time, but thought it would be neat to create this using just a bunch of code.
My first thought was to use CSS3 to draw and layer up the shapes having just learnt a little trick about creating triangles. By defining a width and height of 0, then setting transparent borders on all but one of its sides I was able to play around with border-width to create different angled triangles. The downfall with this method was there is no way off adding drop shadows to custom shapes in CSS3 so I was not able to achieve the realism of the shapes in the original image.
.left-front-foot {
border-color: transparent transparent #ff4500 transparent;
border-style: solid;
border-width: 0px 11px 17px 21px;
height: 0px;
width: 0px;
position: absolute;
top: 205px;
left: 178px;
-moz-transform: rotate(4deg);
-moz-transform-origin: 0 100%;
}
I then turned to HTML5 canvas having never used it before and was surprised at how easy it is to get something drawn on the page. Using this method I was able to plot the points of each shape separately with no need to position them on the page using CSS. I was able to replicate the origami image almost perfectly by defining individual shadows for each shape. Maybe with a slight cheat at the end I positioned an image of the more 3D looking shadows underneath the canvas to get it looking as accurate as possible.
//Left front foot
context.beginPath();
context.moveTo(179, 220);
context.lineTo(200, 204);
context.lineTo(214, 220);
context.fill();
context.closePath();
Take a look at the final example here.
After a little more research i’m going to attempt to animate this little fella.