Clever things

Transparent JPG (With SVG)

This is really excellent: take a JPG, which has great compression for photos, but doesn't support transparency, and link it within an <svg> which can apply a clipping mask based on a path. The path can be traced manually over the photo in Photoshop or Illustrator, and can be exported as an SVG file from Illustrator. The following code (minus the path data), demonstrates how to do this:

HTML5

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d=" ... " />
    </clipPath>
  </defs>
  <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>

Tags: 

WebGL demos and apps by David Li

A screenshot of David Li's site, with a grid of thumbnails of their various WebGL demos.

These are awesome and mesmerizing, even more so that they demonstrate what can be done with native browser WebGL APIs. Give them a try. (Warning: some may be quite laggy if you have lower end hardware, and I haven't tested these on mobile.)

Tags: