Line drawing animation with pure css

Question

Is there any way to implement a CSS animation in which a dot grows to be a line?

point l (a dot) ---------------------------> point m (a line)

I know this can be done with SVG, but I want to know if it is possible to be implemented with pure CSS.

Answer 1

You could use a border on an element with 1px which grows to the required length.

Using @keyframes and animation properties you can get this to start from page load.

div{
  height:0px;
  width:1px;
  border-bottom:1px solid #000;
  
  -webkit-animation: increase 3s;
  -moz-animation:    increase 3s; 
  -o-animation:      increase 3s; 
  animation:         increase 3s; 
  animation-fill-mode: forwards;
}

@keyframes increase {
    100% {
        width: 300px;
    }
}

<div></div>

Answer 2

Using the transition property in CSS, you can give drawing effect to a <div> by targeting its width property.

Hover over the orange color dot on result screen.

.point {
  width: 6px;
  height: 6px;
  background: tomato;
  border-radius: 3px;
  transition: width 1s ease;
}

.point:hover {
  width: 200px;
}

<div class="point"></div>