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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <svg viewBox="0 0 1400 1200">
  
<!-- cx and cy set location along axis while r is the size/radius -->
<!-- Change some of the numbers below to see what happens! -->
  <circle class="circle" cx="255" cy="755" r="140" />
  
<!-- Width and height set size while x and y set location on screen -->
<!-- A square is just a rectangle with a matching width and height -->
<!-- Try to make an extra square by copying and pasting this rect code below and changing the x an y values -->
  <rect class="square" width="220" height="220" x="500" y="800"/>
  
<!-- cx and cy change location on screen, rx and ry set size -->
  <ellipse class="oval" cx="650" cy="550" rx="175" ry="100" />
  
  <rect class="rect" width="400" height="200" x="700" y="65" />
  
<!-- Lists exactly where lines should start and stop on the screen to make stairs effect -->
<!-- Change a couple of the numbers below to see what happens! -->
  <polyline class="stairs" points="100,180 180,180 180,260 260,260 260,340 340,340 340,420" fill="none" />
  
  <polygon class="poly" points="850,805 900,805 925,830 925,880 900,905 850,905 825,880 825,830" />
  
<!-- x1 and y1 define the starting point of the line while x2 and y2 define the end point -->
  <line class="line" x1="950" y1="500" x2="1300" y2="900" />
  
</svg>

              
            
!

CSS

              
                // Fill is how the color is changed

.circle {
  fill: #C19AB7;
}

.square {
  fill: #2E3888;
}

.oval {
  fill: #DB5461;
}

.rect {
  fill: #F38252;
}

.stairs {
  stroke: #BBC42A;
  // Changes thickness of line
  stroke-width: 20;
}

.poly {
  fill: #F3ABBA;
  // Scale larger or smaller

}

.line {
  // Changes the color of a stroke, different from fill
  stroke: #593C8F;
  //Change thickness of line
  stroke-width: 20;
}


// Provides boundaries for shapes
svg {
  border: 16px solid #F3ABBA;
}

              
            
!

JS

              
                /* This tells the included shape where to move from, its center */
gsap.set(".oval, .poly", {transformOrigin: "50% 50%"})

// POLYGON SIZE
/* Quickly scale larger or smaller. An example of a smaller value is .5 */
/* Add a positive y value to move down, and a negative value to move up */
gsap.set(".poly", {scale: 2, x: 70})

// RECTANGLE ANIMATION 
/* Duration sets how long each movement will take */
/* Yoyo means that the movements will reverse when complete */
/* A repeat value of -1 means that it will replay forever */
gsap.timeline({repeat: -1, yoyo: true, defaults:{duration: 2}})
/* x and y move the shape over and then down. Change these values and add additional lines to see what happens */
  .to(".rect", {x: 100})
  .to(".rect", {y: 150}) 
 /* scaleX says to only impact the size on that one axis */
  .to(".rect", {scaleX: .5})

// OVAL ANIMATION 
/* A negative delay causes overlap with the animations written before this one */
/* Rotate values are degrees, so 360 spins all the way around */
  .to(".oval", {rotate: 360, scaleY: .3, fill: "#F3ABBA", delay: -3})
              
            
!
999px

Console