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

              
                <input type="checkbox" class="toggle">
<div class="switch">
  <div class="inner">
    <svg class='falcon' width="62px" height="54px" viewBox="0 0 62 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="millenniumfalcon_96181" transform="translate(31.000000, 27.000000) rotate(90.000000) translate(-31.000000, -27.000000) translate(4.000000, -4.000000)" fill-rule="nonzero">
            <path d="M26.4,61.5 C16.6,61.5 9.7,56.9 7.4,54.5 C6.8,54 6.4,53.3 6.4,52.5 C6.5,52 6.6,51.4 6.8,51 C5.7,49.9 4.8,48.7 4.1,47.4 L3.2,45.6 C2.2,45.3 1.4,44.5 1.1,43.5 C0.8,42.8 -0.5,35.7 0.3,34.4 C0.6,33.9 1.1,33.5 1.7,33.4 C2.7,28.2 4.3,23.2 6.4,18.4 C9,12.1 14.8,1.8 16.8,1 C17,0.9 17.7,0.6 21.3,0.6 C24.5,0.6 25.6,0.7 26.1,1.9 C26.2,2.2 26.3,2.5 26.6,9.6 L26.8,9.6 C26.7,1.5 27,1.3 27.9,0.8 C28.2,0.7 28.7,0.4 33.7,0.4 C37.5,0.4 37.9,0.6 38.3,0.9 C38.7,1.2 39.1,1.5 44.6,13.2 C44.8,13.1 45.1,13 45.3,13 C45.7,13 47,12.9 48,12.9 C49,12.9 50.2,12.9 50.8,13.9 C51.2,14.5 53.7,21.3 53.9,21.9 C54.2,23.1 53.7,32.9 53.6,33.4 C53.4,34.1 52.9,34.7 52.3,35.1 C52.7,38.2 52.2,41.3 51,44.1 C50.1,46.2 48.8,48.2 47.3,49.9 C47.3,50.7 47.3,51.4 47.1,52.1 C46.7,53.3 39,61.2 26.6,61.4 L26.4,61.5 Z" id="Path" fill="#FFFFFF"></path>
            <path d="M3.1,34.8 C4.1,29.4 5.7,24.2 7.9,19.1 C11.5,10.9 16.7,2.9 17.5,2.6 C18.3,2.3 24.4,2.3 24.6,2.6 C24.8,2.9 25.1,11.5 25.1,11.5 C26.3,11.3 27.5,11.4 28.7,11.6 C28.7,11.6 28.5,2.7 28.9,2.5 C29.3,2.3 37,2.2 37.5,2.5 C38,2.8 43.9,16 43.9,16 C43.9,16 44.8,14.8 45.4,14.7 C46,14.6 49.1,14.4 49.3,14.7 C49.5,15 52,21.5 52.2,22.2 C52.4,22.9 52.1,32.5 52,33 C51.9,33.5 50.5,34.2 50.5,34.2 C51.1,37.3 50.8,40.5 49.6,43.4 C47.5,47.9 45.7,49.3 45.7,49.3 C45.8,50.1 45.7,50.9 45.6,51.7 C45.4,52.3 38.3,59.7 26.8,59.8 C15.3,59.9 8.2,53.3 8.3,52.6 C8.4,51.9 8.7,51.2 9,50.5 C7.7,49.4 6.6,48.1 5.8,46.6 L4.3,44 C3.5,44.1 2.8,43.6 2.6,42.8 C2,40.3 1.6,37.7 1.6,35.1 C1.9,34.9 2.7,35 3.1,34.8 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M10.1,19 C10.1,19 13.5,11.4 15.1,8.8 C16.7,6.2 17.8,4.3 18.3,4.2 C18.8,4.1 23.1,4.2 23.1,4.5 C23.1,4.8 23.1,11.8 23.1,11.8 C23.1,11.8 21.9,12.7 21.9,13.3 L21.9,14 C17.7,15.3 13.8,17 10.1,19 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M30.8,4.5 C31.2,4.1 35.7,4.1 36.1,4.5 C36.5,4.9 43.1,18.9 43.2,19.2 C43.2,19.7 43.2,20.2 43.1,20.6 C41.3,18.2 38.8,16.4 36,15.5 C31.6,14.3 30.6,14.5 30.6,14.4 C30.6,14.3 30.7,4.6 30.8,4.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M24.1,13.1 C25,12.8 25.9,12.6 26.8,12.7 C27.6,12.6 28.4,12.8 29.1,13.2 C29.2,13.4 29.2,29.1 28.9,29.1 C28.6,29.1 24.9,29.5 24.8,29.1 C24.7,28.7 23.8,13.5 24.1,13.1 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M46,17 C46,17 47.7,16.6 48.1,17 C49,19 49.9,21 50.5,23.1 C50.5,23.3 50.2,33.1 50.2,33.1 C50.2,33.1 34.6,36.8 34.4,36.5 C34.2,36.2 33.6,34.5 33.9,34.3 C34.2,34.1 43.9,26.4 44.1,26 C44.3,25.6 44.7,20.7 44.9,20.4 C45.1,20.1 46,17 46,17 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M22.2,15.9 C22.3,15.9 23,27.9 23,27.9 L21.8,26.2 C21.8,26.2 21.3,26.5 21.4,26.7 C21.5,26.9 23.2,29.6 23.2,29.7 C23.2,29.8 22.8,30.1 22.6,30.2 C22.5,30.3 22.4,30.4 22.3,30.4 C21.7,29.4 21,28.5 20.2,27.7 C20,27.7 19.7,28 19.8,28.1 C19.9,28.2 21.8,30.8 21.7,30.9 C21.6,31 20.8,31.7 20.8,31.7 C20.3,30.9 19.7,30.2 19.1,29.5 C18.9,29.5 18.6,29.9 18.6,30 C18.6,30.1 20.3,32.4 20.2,32.5 C20,32.7 19.9,33 19.7,33.2 C19.1,32.4 18.5,31.6 17.8,30.9 C17.7,30.9 17.3,31.3 17.4,31.4 C17.5,31.5 19.2,33.7 19.2,33.8 C19.2,33.9 18.8,34.6 18.8,34.7 L18.7,34.9 C17.9,33.8 17.1,32.7 16.2,31.7 C16.1,31.7 15.7,31.9 15.8,32.1 C15.9,32.3 18.4,35.9 18.4,35.9 C18,36 17.7,36 17.3,36 C17.2,36 14.6,32.6 14.5,32.7 C14.4,32.8 14,33 14,33.1 C14,33.2 16.3,36.1 16.2,36.1 C15.6,36.2 15,36.2 14.4,36.2 C14.2,36.1 12.8,33.9 12.6,33.9 C12.4,33.9 12.1,34.2 12.1,34.3 C12.1,34.4 13.3,36.3 13.2,36.3 C13.1,36.3 9.3,36 7.4,35.7 C5.5,35.4 4.5,35.1 4.5,34.9 C4.5,34.7 5.6,27.7 7.6,24.7 C9.6,21.7 13.6,19.3 16,18.2 C18.1,17.2 20.1,16.4 22.2,15.9 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M26.5,30.5 C30,30.5 32.7,33.3 32.9,37.5 C33.1,41.7 30.1,44.1 26.4,44.3 C23.2,44.3 20.6,41.9 20.4,38.8 C20.1,36.2 20.4,30.6 26.5,30.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M26.1,32 C28.6,31.5 30.1,34.5 29.4,36.6 C28.7,38.7 24.5,39 23.8,36.9 C23.1,34.8 24.1,32.5 26.1,32 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M26.2,32.9 C28,32.5 29.1,34.7 28.6,36.3 C28.1,37.9 25,38 24.5,36.5 C23.9,35.1 24.6,33.5 26,33 C26.1,32.9 26.2,32.9 26.2,32.9 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M12.4,23.4 C14.2,22.6 16.4,23.2 17.6,24.9 C18.6,26.5 18.2,28.6 16.5,29.7 C16.2,29.9 16,30 15.7,30.1 C13.3,31 10.7,30.1 10.3,28.1 C9.7,26.2 10.6,24.2 12.4,23.4 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M12.7,24.1 C14.2,23.5 15.9,23.9 16.8,25.2 C17.6,26.5 17.2,28.2 16,29 C15.8,29.1 15.6,29.2 15.4,29.3 C13.5,30 11.5,29.3 11.2,27.7 C10.6,26.2 11.3,24.7 12.7,24.1 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M38.2,18.4 C35.9,17.3 33.4,16.4 30.8,16 C30.7,16.2 30.4,29.9 30.4,29.9 C30.9,30.1 31.4,30.3 31.9,30.6 C32.6,31.3 33.1,32.2 33.4,33.1 L37.3,30.1 C35.7,30.2 34.3,29.2 33.8,27.7 C33.3,25.8 34.2,23.9 36,23.1 C37.8,22.3 40,22.9 41.2,24.6 C41.6,25.2 41.8,26 41.7,26.7 C42,26.5 42.2,26.3 42.2,26.3 C42.3,26.1 42.9,23.4 42.9,23.4 C41.9,21.3 40.2,19.5 38.2,18.4 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M36.3,23.8 C34.9,24.4 34.2,26 34.6,27.4 C34.9,28.9 36.7,29.6 38.5,29.1 L40.5,27.5 C40.9,26.7 40.8,25.7 40.3,24.9 C39.5,23.7 37.8,23.2 36.3,23.8 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M3.7,36.4 C4.7,36.3 9.3,37.4 12.8,37.5 C16.3,37.6 18.7,37.6 18.7,37.7 C18.7,37.8 18.8,39.3 18.8,39.3 C18.8,39.3 4.8,42.4 4.7,42.2 C4.6,42 3.1,36.5 3.7,36.4 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M34.5,38 C34.8,38 48.9,35.1 49,35.4 C49.1,36.6 49.1,37.8 49,39 C49,39.7 48.8,40.3 48.4,40.9 C48.4,40.9 34.4,39.9 34.4,39.8 C34.4,39.7 34.5,38 34.5,38 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M34.3,40.8 C34.5,40.8 47.9,42.2 47.9,42.4 C47.9,42.6 46.9,44.5 46.6,45.2 C46.4,45.6 46,46 45.7,46.4 C45.6,45.6 45.3,44.7 45,43.9 C44.8,43.9 44.2,44.1 44.3,44.3 C44.4,44.5 45,47.2 45,47.3 C45,47.4 44.3,48.1 44.3,48.1 C44.2,48 44.1,47.9 44,47.8 C43.9,47.7 43.1,43.5 43,43.4 C42.9,43.3 42.2,43.1 42.2,43.4 C42.2,43.7 43,47.1 42.8,47.1 C42.6,47.1 41,45.9 41,45.9 C41,45.9 41,43.2 40.7,43 C40.4,42.8 39.9,42.6 39.9,42.8 C39.9,43 40,45.1 40,45.1 L38.8,44.1 C38.8,44.1 38.9,42.7 38.7,42.6 C38.5,42.5 37.7,42.2 37.7,42.3 C37.7,42.4 37.5,43.3 37.5,43.3 C37.5,43.3 34.2,41.4 34.2,41.3 C34.2,41.1 34.3,41 34.3,40.8 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M9.8,49.6 C8.8,48.5 7.9,47.4 7.2,46.1 C6.6,44.7 6.1,43.6 6.3,43.5 C6.5,43.4 19,40.6 19.1,40.7 C19.3,41.1 19.5,41.5 19.7,41.9 C19.2,42.5 18.6,43 18,43.4 C18,43.3 17.2,41.9 17,42 C16.8,42.1 16.5,42.2 16.6,42.3 C16.7,42.4 17.4,43.9 17.4,43.9 C17.4,43.9 16.6,44.7 16.5,44.6 C16,43.8 15.5,43.1 15,42.4 C14.9,42.4 14.5,42.8 14.5,42.8 C15,43.5 15.4,44.3 15.7,45.1 C15.4,45.3 15.1,45.6 14.7,45.7 C14.1,44.8 13.5,43.9 12.8,43.1 C12.6,43.1 12,43.3 12,43.6 C12,43.9 13.7,46.3 13.6,46.4 L12.8,46.9 C12.8,46.9 10.8,43.8 10.6,43.8 C10.3,43.9 10.1,44 9.8,44.2 C9.8,44.2 11.9,47.5 11.9,47.6 C11.7,47.8 11.4,48 11.2,48.2 C10.4,46.9 9.5,45.7 8.5,44.5 C8.4,44.6 7.8,44.8 7.9,44.9 C8,45 10.4,48.9 10.4,48.9 L9.8,49.6 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M20.8,43.5 C20.8,43.5 22.4,45.9 26.5,45.7 C29,45.5 31.4,44.3 33,42.5 L40.1,46.8 C42.2,48 43.4,49.6 43.4,50.1 C43.4,50.6 37.4,58 26.1,58.4 C14.8,58.8 10.3,52.8 10.4,52 C10.5,51.2 20.2,43.3 20.8,43.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M26.4,46.7 C27.8,46.7 28.9,47.7 28.9,49.1 C28.9,49.5 28.8,49.8 28.7,50.1 C27.9,52.2 24.6,52 23.7,50.3 C23.1,49 23.8,47.4 25.1,46.8 C25.5,46.7 25.9,46.6 26.4,46.7 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M26.3,47.5 C27.2,47.5 28,48.2 28,49.1 C28,49.3 28,49.6 27.9,49.8 C27.4,51.2 25.1,51.1 24.5,50 C24.1,49.1 24.6,48 25.5,47.7 C25.8,47.5 26,47.4 26.3,47.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M26.3,52.8 C27.4,52.8 28.3,53.6 28.4,54.7 C28.4,55 28.4,55.3 28.2,55.5 C27.6,57.2 24.8,57 24.2,55.7 C23.8,54.6 24.3,53.4 25.4,52.9 C25.7,52.8 26,52.7 26.3,52.8 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M26.3,53.5 C27,53.5 27.5,54 27.6,54.7 C27.6,54.9 27.6,55.1 27.5,55.2 C27.1,55.9 26.3,56.2 25.6,55.8 C25.4,55.7 25.2,55.5 25.1,55.3 C24.8,54.6 25.1,53.9 25.8,53.6 C25.9,53.6 26.1,53.5 26.3,53.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M33.5,45.6 C34.6,45.6 35.5,46.4 35.6,47.5 C35.6,47.8 35.6,48.1 35.4,48.3 C34.8,50 32,49.8 31.4,48.5 C31,47.4 31.5,46.2 32.6,45.7 C32.9,45.6 33.2,45.6 33.5,45.6 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M33.5,46.4 C34.2,46.4 34.7,46.9 34.8,47.6 C34.8,47.8 34.8,48 34.7,48.1 C34.3,48.8 33.5,49.1 32.8,48.7 C32.6,48.6 32.4,48.4 32.3,48.2 C32,47.5 32.3,46.8 33,46.5 C33.1,46.4 33.3,46.4 33.5,46.4 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M20.3,45.8 C21.4,45.8 22.3,46.6 22.4,47.7 C22.4,48 22.4,48.3 22.2,48.5 C21.6,50.2 18.8,50 18.2,48.7 C17.8,47.6 18.3,46.4 19.4,45.9 C19.6,45.8 20,45.7 20.3,45.8 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M20.2,46.5 C20.9,46.5 21.4,47 21.5,47.7 C21.5,47.9 21.5,48.1 21.4,48.2 C21,48.9 20.2,49.2 19.5,48.8 C19.3,48.7 19.1,48.5 19,48.3 C18.7,47.6 19,46.9 19.7,46.6 C19.8,46.6 20,46.5 20.2,46.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M18.2,50.7 C19.3,50.7 20.2,51.5 20.3,52.6 C20.3,52.9 20.3,53.2 20.1,53.4 C19.5,55.1 16.7,54.9 16.1,53.6 C15.7,52.5 16.2,51.3 17.3,50.8 C17.6,50.7 17.9,50.7 18.2,50.7 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M18.2,51.5 C18.9,51.5 19.4,52 19.5,52.7 C19.5,52.9 19.5,53.1 19.4,53.2 C19,53.9 18.2,54.2 17.5,53.8 C17.3,53.7 17.1,53.5 17,53.3 C16.7,52.6 17,51.9 17.7,51.6 C17.8,51.5 18,51.5 18.2,51.5 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M35.4,50.5 C36.5,50.5 37.4,51.3 37.5,52.4 C37.5,52.7 37.5,53 37.3,53.2 C36.7,54.9 33.9,54.7 33.3,53.4 C32.9,52.3 33.4,51.1 34.5,50.6 C34.7,50.5 35.1,50.4 35.4,50.5 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M35.3,51.2 C36,51.2 36.5,51.7 36.6,52.4 C36.6,52.6 36.6,52.8 36.5,52.9 C36.1,53.6 35.3,53.9 34.6,53.5 C34.4,53.4 34.2,53.2 34.1,53 C33.8,52.3 34.2,51.6 34.8,51.3 C34.9,51.3 35.1,51.2 35.3,51.2 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M13.8,20.9 C14.5,20.2 15.4,19.7 16.3,19.3 C18.3,18.3 18.5,18.2 18.6,18.3 C18.7,18.5 18.8,18.8 18.8,19.1 C18.8,19.2 17.3,19.6 16.2,20.3 C15.7,20.6 15.2,21 14.9,21.4 C14.9,21.4 13.8,21.1 13.8,20.9 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M17.5,8.6 C18.7,8.3 20,9.1 20.3,10.3 C20.4,10.7 20.4,11.1 20.3,11.5 C19.8,13.5 16.8,13.6 16.1,12.6 C15.3,11.4 15.6,9.7 16.9,8.9 C17,8.7 17.2,8.6 17.5,8.6 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M17.6,9.2 C18.5,9 19.4,9.5 19.6,10.4 C19.7,10.7 19.7,11 19.6,11.3 C19.2,12.3 18.1,12.8 17.1,12.4 C16.9,12.3 16.7,12.2 16.5,12 C15.9,11.1 16.2,9.9 17,9.4 C17.2,9.3 17.4,9.2 17.6,9.2 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M34.7,8.3 C35.9,8 37.2,8.8 37.5,10 C37.6,10.4 37.6,10.8 37.5,11.2 C37,13.2 34,13.3 33.3,12.3 C32.5,11.1 32.8,9.4 34.1,8.6 C34.2,8.5 34.4,8.4 34.7,8.3 Z" id="Path" fill="#1D1D1B"></path>
            <path d="M34.8,9 C35.7,8.8 36.6,9.3 36.8,10.2 C36.9,10.5 36.9,10.8 36.8,11.1 C36.4,12.1 35.3,12.6 34.3,12.2 C34.1,12.1 33.9,12 33.7,11.8 C33.1,10.9 33.4,9.7 34.2,9.2 C34.5,9.1 34.6,9.1 34.8,9 Z" id="Path" fill="#E6E4DA"></path>
            <path d="M45.8,21.2 C46.1,21.1 46.4,21.2 46.6,21.3 C46.7,21.4 46.3,25.1 46.3,25.1 C46.3,25.1 45.3,25.2 45.2,25.1 C45.3,23.8 45.5,22.5 45.8,21.2 Z" id="Path" fill="#1D1D1B"></path>
        </g>
    </g>
</svg>
<!--     <div class="disc"></div> -->
  </div>
</div>

<div class='credit'>
    <p>Created by <a class='credit--link' href='https://codepen.io/travis_john'>Travis John</a></p>
  </div>
</div>



              
            
!

CSS

              
                body {
  margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toggle {
    position: absolute;
    width: 10em;
	  height: 5em; 
    margin: 0;
    width: 15%;
    filter: opacity(0);
    cursor: pointer;
    z-index: 2;
  
  &:checked {
    
    ~ .switch {
    background: #2481F1;
      
    .star {
      width: 10rem;
      }
    
    .falcon {
	    left: 42%;
      }
    }
  }
}

.toggle ~ .switch {
	position: absolute;
	width: 15rem;
	height: 5rem; 
	background: black;
	border-radius: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
  transition: .5s;
  
  .inner {
    width: 12rem;
	  height: 3.5rem;
	  background: transparent;
	  border-radius: 2rem;
	  display: flex;
	  justify-content: center;
  }
  
  .star {
	  width: .25rem;
	  height: .25rem;
	  border-radius: 50%;
    opacity: .75;
	  background-color: white;
    position: absolute;
    transition: .5s;
    transform-origin: right;
}
  
  .falcon {
    position: relative;
	  left: -45%;
    transition: 0.5s;
    z-index: 1;
  }
}

.credit {
  position: fixed;
  bottom: 2%;
  right: 2%;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 1.125em;
  color: black;
  
  .credit--link {
    color: #1565C0;
    text-decoration: none;
    cursor: pointer;
    
    &:hover {
      text-decoration: underline;
    }
  }
}
              
            
!

JS

              
                var $parent = $('.switch'),
     $starCount = 50,
     $parentWidth = $parent.width(),
     $parentHeight = $parent.height();

for (i=0; i<$starCount; i++){
    var $randPosX = Math.floor((Math.random()*$parentWidth)),
        $randPosY = Math.floor((Math.random()*$parentHeight));
    $parent.append('<div class="star star--position-'+i+'"></div>');
    
    $('.star--position-'+i).each(function(){
    $(this).css({
      left: $randPosX,
      top: $randPosY
    });
  });
}
              
            
!
999px

Console