Is it possible to make a squiggly line?

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

example

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.

Pure CSS solution:

We can use the sin wave character '∿' character and then

Set a negative value for letter-spacing

FIDDLE

enter image description here

Just for fun we can use different characters to get other squiggles:

FIDDLE #2

div {
  font-size: 50px;
  font-family: verdana;
}
.tilde {
  letter-spacing: -19px;
}
.ohm {
  letter-spacing: -6px;
}
.ac {
  letter-spacing: -25px;
}
.acd {
  letter-spacing: -11px;
}
.curlyv {
  letter-spacing: -12px;
}
.frown {
  letter-spacing: -13px;
}

<div class="acd">∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿</div>
<div class="tilde">˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜</div>
<div class="curlyv">⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎</div>
<div class="frown">⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢</div>
<div class="ac">∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾</div>
<div class="ohm">ΩΩΩΩΩΩΩΩΩΩ</div>

If you want the underline of some text to be a squiggly line, you can use the following css:

span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

<span>Example text here</span>

Source: https://developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example

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);
  }
}
$(document).ready(function(){
    makeLine('#line', 16);
});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="line">
</div>

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/

.aux{
    display: inline-block;
    vertical-align: top;
}
.line{
    display: inline-block;
    
    height: 400px;
    width: 10px;
    
    background-image:       url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAoCAYAAADHVmuAAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYYFSs0NbBHxgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAGc0lEQVQ4EQFoBpf5AQAAAP8AAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAgAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAQAAAP8AAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACelxA/rjIgrgAAAABJRU5ErkJggg==);   
}

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

Is it possible to make a squiggly line?

Pure CSS solution:

Tags:

Javascript

Html

Css

Jquery

Related

Recent Posts