CSS/HTML: Border builds it self?

Question

so I am wondering how this is possible? I really would like something similar to this on my site. How hard is this to do and if so can anyone help me?

Here is an example of what I am trying to accomplish: Click Here

Can you elaborate? Your link doesn't have anything to do with borders; it shows someone clicking a button and moving a mouse cursor. — Mr Lister, Apr 08 '17 at 17:00
If you saw the image, after the person clicked "play" you can see the text "play zen gaming" and around it was a border that built itself up. — L. Bourne, Apr 08 '17 at 17:01
Oh, that wasn't very clear. Well, you could do something with a background image in a div with overflow:hidden and a transitioning width. — Mr Lister, Apr 08 '17 at 17:04
Possible duplicate of [how to animate drawing lines on canvas](http://stackoverflow.com/questions/23939588/how-to-animate-drawing-lines-on-canvas) — O.Rares, Apr 08 '17 at 17:06
I mean a width that starts out from 0 and grows to the width iof the window with a `transition` property. — Mr Lister, Apr 08 '17 at 17:06

Wiktor Bednarz · Accepted Answer · 2017-04-08T18:52:23.037

So, are you wondering if you can accomplish that in pure HTML and CSS?

Yes, you can.

To simulate border–drawing animation, all you need to do is use some svg and perform a trick with animating an SVG stroke (border).

The trick in its simplest form consists of:

svg element — it'll contain our vector graphic, it's important to include viewbox attribute for proper scaling,
path or any other SVG element that can have a stroke,
stroke-dasharray and stroke-dashoffset CSS properties for our path. We begin with something big, such as stroke-dashoffset: 2000px,
animation CSS property along with @keyframes to bring stroke-dashoffset back to 0 after defined amount of time.

Understanding stroke offset

In SVG you can create dashed border — so it consists of alternating parts: gaps and stroke. stroke-dasharray defines this behaviour. It expects at least 2 numbers. The first one being width of a dash and the second one — width of the gap.

Moreover, stroke-dashoffset just controls the offset of this dash–gap pair. In other words, it's a number that defines where the first dash will begin.

I prepared an example which shows relationship between those 2 properties. You can play with it by clicking Run code snippet. ;-)

svg {
  transition: all 1s;
}

#dasharray-1:checked ~ #preview svg {
  stroke-dasharray: 10px 20px;
}
#dasharray-2:checked ~ #preview svg {
  stroke-dasharray: 20px 10px;
}
#dasharray-3:checked ~ #preview svg {
  /*/ dash 10px / gap 20px / dash 30px / gap 40px... /*/
  stroke-dasharray: 10px 20px 30px 40px;
}
#dasharray-4:checked ~ #preview svg {
  stroke-dasharray: 2000px 2000px;
}

#dashoffset-1:checked ~ #preview svg {
  stroke-dashoffset: 100px;
}
#dashoffset-2:checked ~ #preview svg {
  stroke-dashoffset: 1990px;
}
#dashoffset-3:checked ~ #preview svg {
  stroke-dashoffset: 2000px;
}

h1,
h2{
  margin-bottom: 0;
  margin-top: .5em;
}

#preview {
  position: absolute;
  top: 0;
  right: 1em;
  transform-origin: 100% 0%;
}

<h1>SVG test</h1>
<h2><code>stroke-dasharray</code></h2>
<input type="radio" name="dasharray" id="dasharray-0" checked>
<label for="dasharray-0"><code>default</code></label>
<input type="radio" name="dasharray" id="dasharray-1">
<label for="dasharray-1"><code>10px 20px</code></label>
<input type="radio" name="dasharray" id="dasharray-2">
<label for="dasharray-2"><code>20px 10px</code></label>
<input type="radio" name="dasharray" id="dasharray-3">
<label for="dasharray-3"><code>10px 20px 30px 40px</code></label>
<input type="radio" name="dasharray" id="dasharray-4">
<label for="dasharray-4"><code>2000px 2000px</code></label>

<h2><code>stroke-dashoffset</code></h2>
<input type="radio" name="dashoffset" id="dashoffset-0" checked>
<label for="dashoffset-0"><code>default</code></label>
<input type="radio" name="dashoffset" id="dashoffset-1">
<label for="dashoffset-1"><code>100px</code></label>
<input type="radio" name="dashoffset" id="dashoffset-2">
<label for="dashoffset-2"><code>1990px</code></label>
<input type="radio" name="dashoffset" id="dashoffset-3">
<label for="dashoffset-3"><code>2000px</code></label>

<div id="preview">
  <h2>Preview</h2>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="150">
    <rect width="100" height="150" fill="none" stroke="#222" stroke-width="10" color="#000"/>
  </svg>
</div>

Fancy example

Now that you (hopefully) understand how strokes work, you are ready for some magic! To animate a drawing effect, first we define a pair of dash–and–gap. Dash will have a width of 2000px, and the same goes for a gap — stroke-dashoffset: 2000px 2000px. Then we move those, so only a gap is visible to the user — stroke-dashoffset: 2000px. Finally, we set off an animation which results in the offset going back to 0 — stroke-dashoffset: 0.

/*/ Animate lines /*/
.ornament .line path {
 fill: none;
 stroke: #ecf0f1;
 stroke-width: .2px;
 stroke-dasharray: 2000px 2000px;
 stroke-dashoffset: 2000px;
 animation: drawStroke 5s ease-in-out forwards 0s;
}

@keyframes drawStroke {
 to {
  stroke-dashoffset: 0;
 }
}

/*/ Arrange our 4 exact SVGs /*/
.ornament {
 width: 80%;
 margin: 0 auto;
 clear: both;
 overflow: hidden;
}
.ornament.bottom {
 transform: scaleY(-1);
}
.ornament .line {
 width: 50%;
 float: left;
}
.ornament .line.left {
 transform: scaleX(-1);
}

/*/ Add gradient /*/
.ornament {
 position: relative;
}
.ornament:before,
.ornament:after {
 content: '';
 position: absolute;
 top: 0;
 background: red;
 width: 40%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
}
.ornament:before {
 left: 0;
 background: linear-gradient(to right, #111 0%, transparent 100%); 
}
.ornament:after {
 right: 0;
 background: linear-gradient(to left, #111 0%, transparent 100%); 
}

/*/ Beauty /*/
body {
 background: #111;
 color: #fff;
}
header {
 text-align: center;
 color: lime;
 font: 2em Impact, sans-serif;
 text-transform: uppercase;
}
header .title {
 margin: 0;
}

<section id="games">
  <header>
    <div class="ornament top">
      <svg class="line left" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
      <svg class="line right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
    </div>
    <h2 class="title">
      Play now
    </h2>
    <div class="ornament bottom">
      <svg class="line left" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
      <svg class="line right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
    </div>
  </header>
</section>

CSS/HTML: Border builds it self?

1 Answers1

Yes, you can.

Understanding stroke offset

Fancy example