This was inspired by the Dribbble shot to the left of the canvas by Ramiro Galan, which can be found here: http://dribbble.com/shots/674715-Sparkle-Light-Trail.
Some browsers still won't fully clear a canvas all the way with the destination-out globalCompositeOperation, anyone know a work around?
A Pen by Karl Lindberg on CodePen.
| <canvas></canvas> | |
| <!-- Click to generate a new image --> |
Thousands of particles that create waves of light. So beautiful.
A Pen by Karl Lindberg on CodePen.
| <div id="container"> | |
| <div id="circle"> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> | |
| <defs> | |
| <path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/> | |
| </defs> | |
| <circle cx="150" cy="100" r="75" fill="none"/> | |
| <g> | |
| <use xlink:href="#circlePath" fill="none"/> | |
| <text fill="#f8f8f8"> |
| <canvas></canvas> | |
| <!-- Click to generate a new image --> |
Playing around with SimplexNoise and textures...
A Pen by Daniel Del Core on CodePen.