css - How can I get an animated SVG to start "drawing itself" sooner? -


i'm trying create loading animation html & css looks ekg readout. have working want start redrawing sooner (right disappears , i'd start drawing before finishes "undrawing"

<head>      <style>     body {   background-color: #fff; }    .path {   animation: draw 2.2s infinite ease-in-out;    -webkit-animation: draw 2.2s infinite ease-in-out; }    @keyframes draw {    {     stroke-dashoffset: 1100;  }      { stroke-dashoffset: 50} }          @-webkit-keyframes draw {    {     stroke-dashoffset: 1100;  }      { stroke-dashoffset: 50} }      </style>     </head> <div class="bg">   <svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewbox="0 0 670 236">    <path class="path" stroke="#ca6728" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="610" fill="none" d="m0,80.9h20.6c0.5,0,1.4-0.2,1.8-0.5l38,70.1         c0.5-0.3,1.2-0.3,1.6,0l12.7,9.4c0.4,0.3,1.3,0.6,1.8,0.6l13.3,0c0.6,0,1.2,0.4,1.5,0.9l6.2,11.3c0.3,0.5,0.5,0.4,0.5-0.1l4.4-90.8         c0-0.5,0.1-0.5,0.1,0l6.9,102.1c0,0.5,0.2,0.6,0.4,0l7-22.4c0.2-0.5,0.7-1,1.3-1l16.1,0c0.5,0,1.3-0.3,1.8-0.7l129,66.4         c0.4-0.4,1.1-0.3,1.5,0l13.3,13.1c0.4,0.4,1.2,0.7,1.7,0.7l20.1,0,"/>      </svg> </div>      </html>

js fiddle here: https://jsfiddle.net/jzvenice/4slw9ag9/

i think similar effect can achieved playing stroke-dasharray values :

https://jsfiddle.net/4slw9ag9/2/

...  stroke-dasharray="391 300" stroke-dashoffset="0"  ....  @keyframes draw { { stroke-dashoffset: 691; } { stroke-dashoffset: 0} }  ...

only first value exact (length of path 391 pixels), detected line of javascript commented out , not needed further functionality. other value can adjusted comes across best visually.

edit - deleted answer seems more relevant comment. don't mind me undeleting minor update.


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more