How to make Hand drawn pencil circle using pure CSS?

Question

Actually, I am looking for a hand-drawn pencil circle hover effect using pure CSS without using SVG. Like this one on CodeMyUi. But this was achieved using an SVG I want to create it using only pure CSS. Please if anybody knows this answer me.

Answer 1

Perhaps you could try something like this?

.circle-on-hover {
  padding: 16px;
  position: relative;
  display: inline-block;
  margin: 16px;
}

.circle-on-hover:hover:after {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid blue;
  content: '';
  top: 0;
  left: 0;
  border-radius: 100px 50px 150px;
  transform: rotate(-5deg);
}

<div class="circle-on-hover">Lorem ipsum</div>

You could fiddle with the border-radius and rotation to change the effect, and maybe add :before to get the cross-over in the top right?

Hope this points you in the right direction - please let me know :-)