12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!DOCTYPE html>
- <style>
- path {
- stroke-width: 2px;
- stroke-dasharray: 10;
- }
- path#path1 {
- stroke-dashoffset: calc(15%);
- }
- path#path2 {
- stroke-dashoffset: calc(10px);
- }
- path#path3 {
- stroke-dashoffset: calc(20px + 2%);
- }
- path#path4 {
- stroke-dashoffset: calc(3px * 2);
- }
- path#path5 {
- stroke-dashoffset: calc(5% - 3px);
- }
- path#path6 {
- stroke-dashoffset: calc(5% - 3px + 5%);
- }
- path#path7 {
- stroke-dashoffset: calc(5% - 3px + 2.5% * 2);
- }
- path#path8 {
- stroke-dashoffset: calc(5% - 3px + 2.5%*2);
- }
- path#path9 {
- stroke-dashoffset: calc(5% - 3px + 2 * 2.5%);
- }
- path#path10 {
- stroke-dashoffset: calc(5% - 3px + 2*2.5%);
- }
- path#path11 {
- stroke-dashoffset: calc(5% - 3px/2 + 2.5% / 2);
- }
- path#path12 {
- stroke-dashoffset: calc(3% + 2.5%);
- }
- path#path13 {
- stroke-dashoffset: calc(3 * 2 + 3 / 6);
- }
- </style>
- <svg height="300" width="300">
- <g fill="none" stroke="black">
- <path id="path1" d="M5 20 l250 0" />
- <path id="path2" d="M5 40 l250 0" />
- <path id="path3" d="M5 60 l250 0" />
- <path id="path4" d="M5 80 l250 0" />
- <path id="path5" d="M5 100 l250 0" />
- <path id="path6" d="M5 120 l250 0" />
- <path id="path7" d="M5 140 l250 0" />
- <path id="path8" d="M5 160 l250 0" />
- <path id="patn9" d="M5 180 l250 0" />
- <path id="patn10" d="M5 200 l250 0" />
- <path id="path11" d="M5 220 l250 0" />
- <path id="path12" d="M5 240 l250 0" />
- <path id="path13" d="M5 260 l250 0" />
- </g>
- </svg>
|