Is it possible to make a squiggly line?

Question

If I wanted to make a horizontal line, I would do this:

Answer 1

if you are not looking for something really neat, but just for the fun of it, play with multiple box-shadow: http://codepen.io/gcyrillus/pen/mfGdp or http://codepen.io/gcyrillus/pen/xhqFu

.curve{
  margin:3em 0;
  width:100px;
  height:150px;
  border-radius:50%;
  box-shadow:
    0px 2px 1px -1px,
    400px 0px 0px 0px white,
    400px 2px 1px -1px ,
    300px 0px 0px 0px white,
    300px -2px 1px -1px,
    600px 0px 0px 0px white,
    600px 2px 1px -1px ,
    500px 0px 0px 0px white,
    500px -2px 1px -1px,
    800px 0px 0px 0px white,
    800px 2px 1px -1px ,
    700px 0px 0px 0px white,
    700px -2px 1px -1px,
    1000px 0px 0px 0px white,
    1000px 2px 1px -1px ,
    900px 0px 0px 0px white,
    900px -2px 1px -1px,
    1200px 0px 0px 0px white,
    1200px 2px 1px -1px ,
    1100px 0px 0px 0px white,
    1100px -2px 1px -1px,
    1400px 0px 0px 0px white,
    1400px 2px 1px -1px ,
    1300px 0px 0px 0px white,
    1300px -2px 1px -1px,
    1600px 0px 0px 0px white,
    1600px 2px 1px -1px ,
    1500px 0px 0px 0px white,
    1500px -2px 1px -1px;
  position:relative;
}
.curve:before,.curve:after {
  content:'';
  position:absolute;
  height:100%;
  width:100%;
  border-radius:100%;
  box-shadow:inherit;
}
.curve:before {
  left:100%;
  transform:rotate(180deg);
 }
.curve:after {
  left:200%;
}

Answer 2

If you are using Javascript, this can be easily achieved using a sine wave - this is how programming languages have achieved controllable squiggly lines for decades! You should be able to find plenty of examples out there, but essentially you just do loop with an incrementing x value and apply the sine function sin(). This used to be cool for doing screen-savers in the 90s and animating them, etc.

Answer 3

This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.

With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.

I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output

The basic gist is:

.holder {
  /* Clip edges, as some of the lines don't terminate nicely. */
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 50px;
}

.ellipse {
  position: absolute;
  background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
  background-size: 36px 40px;
  width: 200px;
  height: 20px;
}

.ellipse2 {
  top: 20px;
  left: 18px;
  background-position: 0px -20px;
}

<div class="holder">
  <div class="ellipse"></div>
  <div class="ellipse ellipse2"></div>
</div>

You can produce some convincing squiggly lines with some modifications:

.holder {
    position: relative;
    width: 200px;
    height: 50px;
    top: 25px;
}
.tinyLine {
    position: absolute;
    /* Cuts off the bottom half of the pattern */
    height: 20px;
    /* For better cross browser consistency, make it larger with width.  */
    width: 1000%;
    /* And then scale it back down with scale, recentering with translateX. */
    transform: translateX(-45%) scale(0.1);
}

.tinyLine1 {
    background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine2 {
    background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine {
    /* Must be after background definition. */
    background-size: 40px 40px;
}

<div class="holder">
    <div class="tinyLine tinyLine1"></div>
    <div class="tinyLine tinyLine2"></div>
</div>

The browser support is okay (http://caniuse.com/#feat=css-gradients), IE 10 will probably work, however things break down at small scales in different browsers. If you want it to work on really small scales consistently you may want to make the line on a larger scale and then scale it down with transform: scale(x);.

It should also be very fast, linear-gradients are rendered on the GPU in chrome.

Answer 4

EDIT: Given the requirement of no images/data uri.

You can also cram a bunch of border-radius elements together, alternating with top/bottom or left/right edges disabled. I've generalized this into a function that appends them to an element.

Javascript, where squigglecount is the number of "squiggles". You could generalize that to an actual width if you so desired.

http://jsfiddle.net/V7QEJ/1/

function makeLine(id, squiggleCount)
{
    var curve;
    var lineEl = $(id);

    for (var i = 0; i < squiggleCount ; i++)
    {
        curve = document.createElement('div');
        curve.className = 'curve-1';
        lineEl.append(curve);

        curve = document.createElement('div');
        curve.className = 'curve-2';
        lineEl.append(curve);
    }
}

CSS:

.curve-1,
.curve-2{
    display: inline-block;

    border: solid 1px #f00;
    border-radius: 50px;

    height: 20px;
    width: 20px;
}

.curve-1{
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.curve-2{
    border-top: none;
    border-left: none;
    border-right: none;
}

Old (with images):

There's already a bunch of answers, but here's an easy way to do a vertical squiggly line, similar to Lawson's answer.

Basically, you use background-image and a data-uri of a squiggly line to do it. I probably wouldn't use this for anything but it's an interesting thought exercise. There are a bunch of data uri generators that you can use online to change your own images.

http://jsfiddle.net/zadP7/

<div class="aux">Stuff</div>
<div class="line"></div>
<div class="aux">More Stuff</div>

.aux{
    display: inline-block;
    vertical-align: top;
}
.line{
    display: inline-block;

    height: 400px;
    width: 10px;

    background-image: url(...etc...) 
}

Answer 5

﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏

& #65103 ; (wavy low line)

I hope this is not too much off topic - here is how to use those squiggly lines to underline some text (should be a common use case.)

method 1 (snatched from Wulf answering a related question)

<span style="border-bottom: 1px dotted #ff0000;padding:1px">
    <span style="border-bottom: 1px dotted #ff0000;">
        foobar
    </span>
</span>

(not really a squiggly line but a collection of dots, but looks OK and is beautifully simple.)

method 2 (inspired by DanieldD)

using & #65103 ; (wavy low line) unicode character and absolute / relative positioning to put that character underneath some text. Here is a fiddle

here is "the meat" of the code for the positioning

function performUnderWavyLowLineazation(contentElt){
    var wavyFontSize = 40;
    var width = contentElt.width();
    contentElt.addClass("underWavyLowLined");
    replaceSpaceByNonBreakingSpace(contentElt);
    var sp = "<span/>";
    var wrapper = contentElt.wrap(sp).parent();
    wrapper.addClass("wavyParent");
    var underlining = jQuery(sp, {"class" : "wavyLowLine"}).prependTo(wrapper);
    var ghost;
    var invisibleGhostThatTakesUpTheSpaceThatUnderWavyLowLinedElementShouldTakeButDoesntDueToBeingAbsolute
        = ghost = jQuery(sp, {"class": "invisibleUnderWavyLowLined"}).appendTo(wrapper);
    ghost.html(contentElt.html());
    ghost.find("*").removeAttr("id");
    replaceSpaceByNonBreakingSpace(ghost);
    var numWavyChars = Math.floor(0.1 + width/wavyFontSize);
    innerUnderLine = jQuery(sp, {"class": "innerWaveLine"}).appendTo(underlining);
    innerUnderLine.html("&#65103;".repeat(numWavyChars));
    var lineLength = wavyFontSize * numWavyChars;
    var defect = width - lineLength;
    innerUnderLine.css("left", defect/2);
    var wavyGroup = jQuery(sp, {"class" : "wavyGroup"}).prependTo(wrapper);
    underlining.appendTo(wavyGroup);
    contentElt.appendTo(wavyGroup);
}

Answer 6

I found a slighty nicer way to achieve trangle squiggly lines in CSS without halving heights or applying tricks that don't work well across browsers.

I tried @yeerk's solution but it only works well in Chrome. The lines had artifacts on Safari and Firefox.

Firefox

Safari

This solution is a variation of @liliputen's solution, however it improves on ease of flexibility.

You can change the line's size easily from the background-size property.

.squiggly {
    position: relative;
    height: 10px;
    width: 100%;
}

.squiggly::after,
.squiggly::before {
    height: inherit;
    width: inherit;
    background-size: 12px 100%; /* Change this to adjust the size of the squiggly line. */
    content: "";
    position: absolute;
}

.squiggly::before {
    top: -2px;
    background-image: linear-gradient(45deg, red 35%, transparent 0),
        linear-gradient(-45deg, red 35%, transparent 0);
}

.squiggly::after {
    top: 0px;
    background-image: linear-gradient(45deg, white 35%, transparent 0),
        linear-gradient(-45deg, white 35%, transparent 0);
}

<div class="squiggly"></div>

You can also find it here on JS Fiddle.