CODEWITHSUNDEEP
cssanimationsvg
Rijo
Rijo

Reputation: 3043

How to draw svg file?

I have one svg file, I drew using CSS. When I did it is drawing as double line. I want to draw as single line. How is it possible?

css code

svg {
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
svg path {
  stroke-width: 1;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: draw;
  animation-timing-function: linear;
}

Here is my svg file link what i did

https://jsfiddle.net/rijo/t5pva50c/2/

my expected out put like this

https://jsfiddle.net/rijo/52135t3g/4/

Upvotes: 0

Views: 233

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101868

Your SVG has been drawn so that the paths describe the outline of each black shape. For instance, your bulb actually consists of two paths: one for the outside black shape, and another path for the transparent hole. The "light ray" shapes are actually rectangles with rounded ends.

The SVG needs to be redrawn so that each black shape is a thick black line that runs along the centre of the shape instead. So one path for the bulb, and five short straight lines for the "light rays".

Upvotes: 1

vals
vals

Reputation: 64234

Your paths are double, they enclose the outer part of the elements.

Make your path be the inner part of the drawing, and single.

Then, make them thick setting an stroke-width high enough

Set stroke-linecap to rounded to get the end of the path as you already have now.

You will find that your paths are much more easier now !

#test {
    stroke: blue;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 120 90;
    stroke-dashoffset: 0;
    animation: show 2s infinite linear;
}

@keyframes show {
    from {stroke-dashoffset: -80}
      to {stroke-dashoffset:   60}
}
<svg>			
      <path id="test" fill="none" d="M67 39 l 39 25"/>
	

</svg>

Upvotes: 1

Related Questions