cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div>
  <svg viewBox="0 0 300 200">
    <path class="motion" d="
      M  0,  0
      C  0,  0  99,  1  99, 89
      L 99,111
      C 99,130  75,112  99,112
      C103,112 100,112 106,112
      C121,112 121, 89 105, 89
      C 88, 89 102, 89  99, 89
      C  0, 89  80,103 123,103
      C128,103 135,103 136,103
      C155,103 137,140 137,103
      C137, 92 123, 93 123,103
      C123,115 135,113 137,110
      C152, 86 103, 87 143,110
      C152,116 157,106 147,103
      C140,102 143, 93 152, 96
      C206,118 159.5,50 159,89
      L159,112
      C159,180 117, 93 168,118
      C176,122 180,116 180,115
      C183,107 169,101 168, 90
      C167, 77 180, 67 180, 95
      L180,103
      C180,115 166,115 166,103
      C166, 92 180, 94 180,102
      C180,180 188,125 188,112
      C188,110 188,100 188, 96
      C188, 91 189, 80 194, 91
      C200,101 186,134 188,106
      C189, 93 201, 93 201,100
      C201,105 201,105 201,112
      C201,130 220,160 300, 80
    "></path>
  </svg>
</div> 

            
          
!
            
              @import "nib"

easeInOutSine = cubic-bezier(0.445, 0.050, 0.550, 0.950)
easeOutBack   = cubic-bezier(0.250,-0.250, 0.750, 1.250)
easing = easeInOutSine
duration = 5.5s

back-color = #5677FC
fore-color = #F5F6F7

body
html
div
  background back-color
  margin 0
  padding 0
  width 100%
  height 100%
  text-align center

svg
  width 600px
  height 400px
  cursor pointer
  transform translate3d(0,0,0)

path
  fill none
  transition stroke-dashoffset duration easing, stroke-dasharray duration easing
  stroke-width 2px
  stroke-linecap round
  stroke fore-color
  stroke-dashoffset 0px
  stroke-dasharray 0px 1180px

.text path
  &.d-1
    stroke-dashoffset -149px
    stroke-dasharray 22px 1180px
  &.d-2
    stroke-dashoffset -201.3px
    stroke-dasharray 49px 1180px
  &.e-1
    stroke-dashoffset -377.5px
    stroke-dasharray 14px 1180px
  &.e-2
    stroke-dashoffset -431.2px
    stroke-dasharray 43px 1180px
  &.s-1
    stroke-dashoffset -526px
    stroke-dasharray 37px 1180px
  &.i-1
    stroke-dashoffset -631px
    stroke-dasharray 0.1px 1180px
  &.i-2
    stroke-dashoffset -637.5px
    stroke-dasharray 16px 1180px
  &.g-1
    stroke-dashoffset -732.5px
    stroke-dasharray 15px 1180px
  &.g-2
    stroke-dashoffset -812px
    stroke-dasharray 69px 1180px
  &.n-1
    stroke-dashoffset -941px
    stroke-dasharray 17px 1180px
  &.n-2
    stroke-dashoffset -1013px
    stroke-dasharray 33.5px 1180px

            
          
!
            
              charParts = [
  "d-1"
  "d-2"
  "e-1"
  "e-2"
  "s-1"
  "i-1"
  "i-2"
  "g-1"
  "g-2"
  "n-1"
  "n-2"
]

partElem = $("path")
for part in charParts
  $("svg").append partElem.clone().attr("class", part)

i = setInterval ->
  $("div").toggleClass "text"
, 7000

setTimeout ->
  $("div").toggleClass "text"
, 100

$("div").click ->
  clearInterval i
  $("div").toggleClass "text"

resize = ->
  $("body").css
    "margin-top": ~~((window.innerHeight - 400) / 2) + "px"
    
$(window).resize resize
resize()

#get the line lengths
#$("path").each (i) -> console.log @getTotalLength()

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console