Hello all,
Does anyone know how to create a divider with irregular/uneven lines?
I’ve attached an example, I know that we can add borders to the div block, but what if I don’t want it to be straight lines?
Appreciate any advice!
Thank you.
Cheers,
Yun
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey Stan,
Thanks for the reply. I did use SVG, but since it’s responsive, the line will be scaled, then it’s impossible to keep the stroke width to 1px for example.
Any other solutions on how to maintain the stroke width?
Thanks!
hi @Yun_Huang all you have to do is to set fixed height and set aspect ratio to none
here is code from example to play with
<svg width="100%" height="10" viewBox="0 0 641 7" preserveAspectRatio="none" version="1.1" >
<g transform="matrix(1,0,0,1,-50.997,-91.5191)">
<path d="M690.452,94.816C689.786,94.858 688.265,94.927 687.611,94.961L682.586,95.252C679.396,95.44 676.264,95.709 673.107,95.894C671.022,96.016 668.926,96.1 666.795,96.1C662.007,96.099 657.275,95.926 652.568,95.653C641.51,95.013 630.593,93.828 619.415,93.054C600.423,91.74 581.348,91.647 562.261,92.101C533.654,92.782 505.02,94.691 476.602,95.548C448.466,96.397 420.36,96.932 392.253,97.08C364.147,97.228 336.039,96.988 307.897,96.284C302.168,96.141 296.459,96.923 290.752,97.116C289.331,97.164 287.911,97.176 286.49,97.126C266.071,96.418 245.902,96.056 225.558,95.351C216.903,95.051 208.216,94.689 199.465,94.211C195.658,94.003 191.834,93.934 188.003,93.939C179.097,93.952 170.154,94.367 161.296,94.369C151.66,94.372 142.018,94.316 132.374,94.231C117.91,94.104 103.442,93.914 88.99,93.763C79.011,93.659 68.994,92.409 59.02,91.914C56.509,91.79 54.001,91.713 51.497,91.714C51.329,91.714 51.192,91.851 51.192,92.019C51.192,92.188 51.329,92.324 51.497,92.324C53.991,92.325 56.489,92.404 58.989,92.529C68.971,93.031 78.996,94.287 88.983,94.397C103.436,94.558 117.904,94.758 132.368,94.894C142.014,94.984 151.658,95.046 161.296,95.049C170.155,95.051 179.098,94.64 188.003,94.631C191.822,94.627 195.633,94.698 199.427,94.907C208.182,95.389 216.873,95.756 225.533,96.059C245.877,96.771 266.046,97.134 286.465,97.846C287.902,97.896 289.339,97.885 290.776,97.837C296.469,97.644 302.164,96.86 307.879,97.002C336.028,97.702 364.143,97.938 392.256,97.784C420.37,97.631 448.481,97.086 476.622,96.229C505.039,95.363 533.671,93.446 562.277,92.756C581.344,92.296 600.399,92.381 619.371,93.687C630.552,94.457 641.472,95.639 652.532,96.275C657.251,96.546 661.995,96.719 666.795,96.718C668.938,96.717 671.046,96.632 673.143,96.508C676.3,96.323 679.432,96.053 682.623,95.863L687.643,95.571C688.373,95.532 690.177,95.452 690.686,95.412C690.825,95.401 690.908,95.377 690.923,95.37C691.117,95.281 691.113,95.123 691.099,95.041C691.094,95.012 691.06,94.804 690.806,94.783C690.775,94.781 690.708,94.779 690.598,94.779C690.545,94.779 690.495,94.792 690.452,94.816Z"/>
</g>
</svg>
more details on MDN or just search preserveAspectRatio svg to find some useful informations. This is just a simple approach but to made SVG work the way you need can be sometime tricky and take time to learn to handle it.
if you using lines and strokes you can use vector-effect="non-scaling-stroke" more info here
https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty
Hey Stan,
Appreciate your help! It is indeed the area I’ve never touched! I would dive in and see how I can play with the custom code. Thank you so so much!
Best,
Yun
hi @Yun_Huang if you don’t have further question related to this request topic feel free to close this request as solved
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.