Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<div class="holder">
    <div class="line line1"></div>
    <div class="line line2"></div>
</div>
​
<div class="holder">
    <div class="smallLine smallLine1"></div>
    <div class="smallLine smallLine2"></div>
</div>
​
<div class="holder">
    <div class="tinyLine tinyLine1"></div>
    <div class="tinyLine tinyLine2"></div>
</div>
​
<div class="holder clip">
    <div class="circle circle1"></div>
    <div class="circle circle2"></div>
</div>
​
<div class="holder clip">
    <div class="ellipse ellipse1"></div>
    <div class="ellipse ellipse2"></div>
</div>
 
.holder {
    position: relative;
    width: 200px;
    height: 50px;
}
.clip {
    /* Clip edges, as some of the lines don't terminate nicely. */
    overflow: hidden;
}
​
.line {
    position: absolute;
    width: 200px;
    /* Height set to clip correctly basically background-size/2 + line width */
    height: 26px;
}
.line1 {
    background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.line2 {
    background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.line {
    /* Must be after background definition. */
    background-size: 50px 50px;
}
​
​
.smallLine {
    position: absolute;
    height: 10px;
    width: 200%;
    transform: translate(-25%) scale(0.5)
}
​
.smallLine1 {
    background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.smallLine2 {
    background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
​
.smallLine {
    background-size: 20px 20px;
}
​
​
.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;
}
​
​
.circle {
    position: absolute;
    width: 200px;
    height: 20px;
    background: radial-gradient(16px, transparent, transparent 4px, black 4px, black 10px, transparent 11px);
    background-size: 30px 40px;
}
​
.circle2 {
    /* Offset to make squigglies line up */
    top: 20px;
    left: 15px;
    background-position: 0px -20px;
}
​
​
.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;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
yeerkkiller1pro
0viewers