.pencil {
  display: block;
  width: 10em;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

/* Animations */
@keyframes pencilBody1 {
  from,
	to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

50% {
    stroke-dashoffset: 150.8;
 /* 3/8 of diameter */
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
	to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
	to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
	to {
    transform: rotate(-45deg) translate(49px,0);
  }

50% {
    transform: rotate(0deg) translate(49px,0);
  }
}

@keyframes pencilEraserSkew {
  from,
	32.5%,
	67.5%,
	to {
    transform: skewX(0);
  }

35%,
	65% {
    transform: skewX(-4deg);
  }

37.5%, 
	62.5% {
    transform: skewX(8deg);
  }

40%,
	45%,
	50%,
	55%,
	60% {
    transform: skewX(-15deg);
  }

42.5%,
	47.5%,
	52.5%,
	57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
	to {
    transform: rotate(-90deg) translate(49px,-30px);
  }

50% {
    transform: rotate(-225deg) translate(49px,-30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px,100px) rotate(0);
  }

to {
    transform: translate(100px,100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(-113deg);
  }

50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px,100px) rotate(-113deg);
  }

75%,
	to {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(112deg);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Pencil Loader Using SVG and CSS

This creative pencil loader animation is built entirely using SVG and CSS. It’s a smooth, looping animation that visually resembles a rotating pencil with a dynamic stroke effect, making it perfect as a loading spinner or decorative element on any modern website.

SVG Structure Overview

The animation is based on an SVG element that uses multiple circles and shapes to build a pencil illustration. It’s not a static image — each part of the pencil is animated using CSS to give the illusion of drawing and rotating.

The main components include:

A circular stroke that moves around the edge
Three circular pencil body layers
A stylized eraser section
A sharp pencil point

Each of these parts has its own animation behavior, but they all work together to create one smooth visual loop.

Rotating Body Elements

Three concentric circles represent the body of the pencil. These rotate around the center and change their dash offset over time, which makes them appear as if they are being drawn dynamically. The different colors and stroke widths for each layer add visual depth.

Each circle rotates from its base angle to a deeper rotation, giving the animation a spiraling effect. The movement is smooth, consistent, and loops infinitely.

Eraser Movement and Skew

The eraser part of the pencil doesn’t just sit still — it swings back and forth and skews at intervals to create a rubbery, flexible motion. This makes the animation feel more alive and adds character. The skewing happens in quick successions, simulating how an actual eraser might move if shaken or twisted.

Pencil Tip Animation

The pencil tip rotates along with the rest of the elements but keeps its sharp triangle shape. It moves in sync with the rest of the body, contributing to the overall rotation effect.

The tip doesn’t distort — it simply moves around the center while pointing downward, maintaining its form throughout the animation.

Stroke Circle Effect

One of the most eye-catching elements of this animation is the outer stroke — a circle that rotates and changes its stroke-dashoffset value. This creates a dashed drawing effect that mimics a pencil in motion, drawing something as it spins.

The stroke starts at one end, fills in a bit as it moves, and then resets again, giving the appearance of continuous circular motion.

Overall Animation Flow

The animation is seamless and runs on an infinite loop. It combines rotation, skewing, and stroke manipulation to mimic a pencil in action. All movements are controlled using @keyframes in CSS, and different animation names are assigned to each part of the pencil.

The animation is lightweight, scalable, and does not rely on JavaScript, making it suitable for loading indicators, decorative headers, or branding animations.

This SVG and CSS combination creates a playful yet elegant rotating pencil effect that can enhance the visual experience of any user interface.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.