← All elements
<div class="container">
<div class="trace"></div>
<div class="pencil">
<div class="rubber"></div>
<div class="joint"></div>
<div class="stick"></div>
<div class="pencil-top"></div>
<div class="pencil-tip"></div>
</div>
</div>About this animation
A pencil travels around a circle and leaves a white arc behind it as its container rotates.
How it works
A container rotates in a loop while a white arc with two transparent borders traces the circle. A pencil built from rubber, joint, stick and tip elements sits at the edge, so as the container turns it seems to draw the line behind itself.
Ways to customise it
- Change the green background.
- Edit the 5s draw duration.
- Recolour the pencil parts.
Good to know
A neat explanation of how rotation around a centre can fake drawing. It is decorative, so mark it aria-hidden.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.