cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

    <symbol id="s-intro-text">
        <g class="title">
            <text text-anchor="middle" 
                  x="50%" y="30%" dy=".5em">
            <text text-anchor="middle" 
                  x="50%" y="60%" dy=".5em">
    <pattern id="pt--text" 
             viewBox="0 0 1500 250"
             width="420" height="70">
        <text x="0" y="0" class="text--pattern">
          <tspan x="0" y="1em">nam tristique vestibulum nulla nec accumsan. Nullam commodo eget dolor et ultricies.
          <tspan x="0" y="2.1em">nulla ligula elit, placerat a sapien vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget
          <tspan x="0" y="3.2em">maecenas tempus elit quis sapien tempus, sit amet viverra neque mattis. Quisque a tincidunt mi.
          <tspan x="0" y="4.3em">proin at justo eu ipsum posuere dignissim vel quis eros. Etiam at libero commodo, varius justo quis, interdum erat.
          <tspan x="0" y="5.4em">fusce viverra mollis est, nec euismod ante mattis ut. Aenean eu mauris viverra enim vulputate bibendum.
          <tspan x="0" y="6.5em">integer velit metus, cursus et commodo sit amet, gravida vitae purus. Sed scelerisque at odio non condimentum.
          <tspan x="0" y="7.6em">sed neque lacus, rhoncus vitae sem ut, pharetra vestibulum elit.
          <tspan x="0" y="8.7em">cras ultricies aliquam dolor quis ultrices. Cras eget mauris tincidunt, aliquam erat quis, faucibus augue.
    <use xlink:href="#s-intro-text"/>
              HTML, BODY {
    height: 100%;
    min-height: 100%;
svg {
    position: absolute;
    width: 100%;
    height: 100%;

.text--pattern {
    font: bold 2.75rem/1 Arial;
    fill: #000;

.title {
    font: 35vmin/1 Impact;
    stroke: #000;
    stroke-width: 3;
    fill: url(#pt--text);


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.


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