Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div class="container">
  <div class="svg-container j">
    <svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M180.082207,135.339018 C179.778636,142.923502 178.866922,149.900187 177.346062,156.877872 C174.235271,167.36456 173.271118,169.219524 170.665669,171.906908 C162.477321,180.352758 147.678704,190.884727 131.955635,186.609642 C118.368701,182.91537 108.227312,171.400287 112.31571,160.223931 C112.958487,158.466787 117.951521,141.862285 118.360149,135.339018 L65.7602444,135.339018 C47.5159391,135.339018 40.2192189,122.901145 40.2192189,110.461272 C40.2192189,98.3262981 47.2123683,85.5845255 65.7602444,85.5845255 L117.144864,85.5845255 L117.144864,81.0340353 C117.144864,61.618477 129.914876,51 149.678037,51 C169.441198,51 182.21121,61.9213765 182.21121,81.0340353 L182.21121,85.5845255 L233.59583,85.5845255 C252.141703,85.5845255 259.135854,98.3262981 259.135854,110.461272 C259.135854,122.901145 251.838132,135.339018 233.59583,135.339018 L180.082207,135.339018 Z" id="Fill-1" fill="#0A00D6"></path>
        <path class="alphabet-j-left" d="M177.346062,156.877872 C223.866536,157.789569 259.135854,185.699309 264,247.891675 L204.103375,247.891675 C199.238227,219.072237 184.340214,203.295471 156.063043,200.868277 C125.426686,196.731659 119.450718,185.177137 124.217577,174.024246 C128.984437,162.871355 156.063043,156.877872 177.346062,156.877872 Z" id="J-Left" fill="#0A00D6"></path>
        <path class="alphabet-j-right" d="M163.441304,183.87283 C162.404425,190.352196 158.627037,197.476133 156.063043,200.868277 C133.259164,229.689714 98.5969882,245.46548 68.4963892,247.891675 C51.7739455,249.106272 38.0902156,240.004292 36.266787,225.746023 C34.4423565,212.396452 42.0446513,200.565377 56.9416625,198.137183 C77.4980924,194.982748 96.2555035,185.801895 107.534001,169.094577 C113.604944,160.101431 135.689091,149.743799 147.923177,155.952902 C160.157263,162.162004 164.478184,177.393463 163.441304,183.87283 Z" id="J-Right" fill="#0A00D6"></path>
        <circle class="alphabet-j-oval" id="jOval" fill="#FFFFFF" cx="247" cy="61" r="44"></circle>
      </g>
    </svg>
  </div>  
</div>
              
            
!

CSS

              
                html, body {
  background-color: #292929;
  height: 100%;
  margin: 0;
}

.container {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svg-container {
    padding: 0;
    height: 300px;
    border-radius: 8px;
    transform: scale(1.5);
}

.svg-frame {
  border-radius: 8px;
}

.j {
    background-color: #F75497;
}

.alphabet-j-oval {
    mix-blend-mode: difference;
}

.alphabet-j-left, .alphabet-j-right, .alphabet-j-oval  {
    transform-origin: 50% 55%;
}
              
            
!

JS

              
                var animationJ1 = anime.timeline({
  loop: true,
  easing: "easeInOutExpo",
})

animationJ1
.add({
  targets: '.alphabet-j-left',
  rotate: 109,
  duration: 400
})
.add({
  targets: '.alphabet-j-left',
  rotate: 0,
  duration: 400
})

var animationJ2 = anime.timeline({
  loop: true,
  easing: "easeInOutExpo",
})

animationJ2
.add({
  targets: '.alphabet-j-right',
  rotate: -110,
  duration: 400
})
.add({
  targets: '.alphabet-j-right',
  rotate: 0,
  duration: 400
})

var animationJ3 = anime.timeline({
  loop: true,
  easing: "easeInOutExpo",
})

animationJ3
.add({
  targets: '.alphabet-j-oval',
  translateX: -190,
  translateY: 40,
  duration: 400,
})
.add({
  targets: '.alphabet-j-oval',
  translateX: -40,
  translateY: 100,
  duration: 400,
})
.add({
  targets: '.alphabet-j-oval',
  translateX: -180,
  translateY: 180,
  duration: 400,
})
.add({
  targets: '.alphabet-j-oval',
  translateX: -10,
  translateY: 160,
  duration: 400,
})
.add({
  targets: '.alphabet-j-oval',
  translateX: -80,
  translateY: 10,
  duration: 400,
})
.add({
  targets: '.alphabet-j-oval',
  translateX: 0,
  translateY: 0,
  duration: 400,
})
              
            
!
999px

Console