stroke-dashoffset-1.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <style>
  3. path {
  4. stroke-width: 2px;
  5. stroke-dasharray: 10;
  6. }
  7. path#path1 {
  8. stroke-dashoffset: calc(15%);
  9. }
  10. path#path2 {
  11. stroke-dashoffset: calc(10px);
  12. }
  13. path#path3 {
  14. stroke-dashoffset: calc(20px + 2%);
  15. }
  16. path#path4 {
  17. stroke-dashoffset: calc(3px * 2);
  18. }
  19. path#path5 {
  20. stroke-dashoffset: calc(5% - 3px);
  21. }
  22. path#path6 {
  23. stroke-dashoffset: calc(5% - 3px + 5%);
  24. }
  25. path#path7 {
  26. stroke-dashoffset: calc(5% - 3px + 2.5% * 2);
  27. }
  28. path#path8 {
  29. stroke-dashoffset: calc(5% - 3px + 2.5%*2);
  30. }
  31. path#path9 {
  32. stroke-dashoffset: calc(5% - 3px + 2 * 2.5%);
  33. }
  34. path#path10 {
  35. stroke-dashoffset: calc(5% - 3px + 2*2.5%);
  36. }
  37. path#path11 {
  38. stroke-dashoffset: calc(5% - 3px/2 + 2.5% / 2);
  39. }
  40. path#path12 {
  41. stroke-dashoffset: calc(3% + 2.5%);
  42. }
  43. path#path13 {
  44. stroke-dashoffset: calc(3 * 2 + 3 / 6);
  45. }
  46. </style>
  47. <svg height="300" width="300">
  48. <g fill="none" stroke="black">
  49. <path id="path1" d="M5 20 l250 0" />
  50. <path id="path2" d="M5 40 l250 0" />
  51. <path id="path3" d="M5 60 l250 0" />
  52. <path id="path4" d="M5 80 l250 0" />
  53. <path id="path5" d="M5 100 l250 0" />
  54. <path id="path6" d="M5 120 l250 0" />
  55. <path id="path7" d="M5 140 l250 0" />
  56. <path id="path8" d="M5 160 l250 0" />
  57. <path id="patn9" d="M5 180 l250 0" />
  58. <path id="patn10" d="M5 200 l250 0" />
  59. <path id="path11" d="M5 220 l250 0" />
  60. <path id="path12" d="M5 240 l250 0" />
  61. <path id="path13" d="M5 260 l250 0" />
  62. </g>
  63. </svg>