Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div class="wrapper">
<h2>
      THE TELL-TALE HEART.
    </h2>
    <p>
      TRUE!&mdash;nervous&mdash;very, very dreadfully nervous I had been and am;
      but why will you say that I am mad? The disease had sharpened my senses&mdash;not
      destroyed&mdash;not dulled them. Above all was the sense of hearing acute.
      I heard all things in the heaven and in the earth. I heard many things in
      hell. How, then, am I mad? Hearken! and observe how healthily&mdash;how
      calmly I can tell you the whole story.
    </p>
    <p>
      <span class="heart-container"><span class="heart"></span></span>It is impossible to say how first the idea entered my brain; but once
      conceived, it haunted me day and night. Object there was none. Passion
      there was none. I loved the old man. He had never wronged me. He had never
      given me insult. For his gold I had no desire. I think it was his eye!
      yes, it was this! He had the eye of a vulture&mdash;a pale blue eye, with
      a film over it. Whenever it fell upon me, my blood ran cold; and so by
      degrees&mdash;very gradually&mdash;I made up my mind to take the life of
      the old man, and thus rid myself of the eye forever.
    </p>
    <p>
      Now this is the point. You fancy me mad. Madmen know nothing. But you
      should have seen me. You should have seen how wisely I proceeded&mdash;with
      what caution&mdash;with what foresight&mdash;with what dissimulation I
      went to work! I was never kinder to the old man than during the whole week
      before I killed him. And every night, about midnight, I turned the latch
      of his door and opened it&mdash;oh so gently! And then, when I had made an
      opening sufficient for my head, I put in a dark lantern, all closed,
      closed, that no light shone out, and then I thrust in my head. Oh, you
      would have laughed to see how cunningly I thrust it in! I moved it slowly&mdash;very,
      very slowly, so that I might not disturb the old man&rsquo;s sleep. It took me
      an hour to place my whole head within the opening so far that I could see
      him as he lay upon his bed. Ha! would a madman have been so wise as this?
      And then, when my head was well in the room, I undid the lantern
      cautiously&mdash;oh, so cautiously&mdash;cautiously (for the hinges
      creaked)&mdash;I undid it just so much that a single thin ray fell upon
      the vulture eye. And this I did for seven long nights&mdash;every night
      just at midnight&mdash;but I found the eye always closed; and so it was
      impossible to do the work; for it was not the old man who vexed me, but
      his Evil Eye. And every morning, when the day broke, I went boldly into
      the chamber, and spoke courageously to him, calling him by name in a
      hearty tone, and inquiring how he has passed the night. So you see he
      would have been a very profound old man, indeed, to suspect that every
      night, just at twelve, I looked in upon him while he slept.
    </p>
    <p>
      Upon the eighth night I was more than usually cautious in opening the
      door. A watch&rsquo;s minute hand moves more quickly than did mine. Never before
      that night had I felt the extent of my own powers&mdash;of my sagacity. I
      could scarcely contain my feelings of triumph. To think that there I was,
      opening the door, little by little, and he not even to dream of my secret
      deeds or thoughts. I fairly chuckled at the idea; and perhaps he heard me;
      for he moved on the bed suddenly, as if startled. Now you may think that I
      drew back&mdash;but no. His room was as black as pitch with the thick
      darkness, (for the shutters were close fastened, through fear of robbers,)
      and so I knew that he could not see the opening of the door, and I kept
      pushing it on steadily, steadily.
    </p>
    <p>
      I had my head in, and was about to open the lantern, when my thumb slipped
      upon the tin fastening, and the old man sprang up in bed, crying out&mdash;&ldquo;Who&rsquo;s
      there?&rdquo;
     </p>
    <p>
      I kept quite still and said nothing. For a whole hour I did not move a
      muscle, and in the meantime I did not hear him lie down. He was still
      sitting up in the bed listening;&mdash;just as I have done, night after
      night, hearkening to the death watches in the wall.
    </p>
    <p>
      Presently I heard a slight groan, and I knew it was the groan of mortal
      terror. It was not a groan of pain or of grief&mdash;oh, no!&mdash;it was
      the low stifled sound that arises from the bottom of the soul when
      overcharged with awe. I knew the sound well. Many a night, just at
      midnight, when all the world slept, it has welled up from my own bosom,
      deepening, with its dreadful echo, the terrors that distracted me. I say I
      knew it well. I knew what the old man felt, and pitied him, although I
      chuckled at heart. I knew that he had been lying awake ever since the
      first slight noise, when he had turned in the bed. His fears had been ever
      since growing upon him. He had been trying to fancy them causeless, but
      could not. He had been saying to himself&mdash;&ldquo;It is nothing but the wind
      in the chimney&mdash;it is only a mouse crossing the floor,&rdquo; or &ldquo;It is
      merely a cricket which has made a single chirp.&rdquo; Yes, he had been trying
      to comfort himself with these suppositions: but he had found all in vain.
      All in vain; because Death, in approaching him had stalked with his black
      shadow before him, and enveloped the victim. And it was the mournful
      influence of the unperceived shadow that caused him to feel&mdash;although
      he neither saw nor heard&mdash;to feel the presence of my head within the
      room.
    </p>
    <p>
      When I had waited a long time, very patiently, without hearing him lie
      down, I resolved to open a little&mdash;a very, very little crevice in the
      lantern. So I opened it&mdash;you cannot imagine how stealthily,
      stealthily&mdash;until, at length a simple dim ray, like the thread of the
      spider, shot from out the crevice and fell full upon the vulture eye.
    </p>
    <p>
      It was open&mdash;wide, wide open&mdash;and I grew furious as I gazed upon
      it. I saw it with perfect distinctness&mdash;all a dull blue, with a
      hideous veil over it that chilled the very marrow in my bones; but I could
      see nothing else of the old man&rsquo;s face or person: for I had directed the
      ray as if by instinct, precisely upon the damned spot.
    </p>
    <p>
      And have I not told you that what you mistake for madness is but
      over-acuteness of the sense?&mdash;now, I say, there came to my ears a
      low, dull, quick sound, such as a watch makes when enveloped in cotton. I
      knew that sound well, too. It was the beating of the old man&rsquo;s heart. It
      increased my fury, as the beating of a drum stimulates the soldier into
      courage.
    </p>
    <p>
      But even yet I refrained and kept still. I scarcely breathed. I held the
      lantern motionless. I tried how steadily I could maintain the ray upon the
      eve. Meantime the hellish tattoo of the heart increased. It grew quicker
      and quicker, and louder and louder every instant. The old man&rsquo;s terror
      must have been extreme! It grew louder, I say, louder every moment!&mdash;do
      you mark me well I have told you that I am nervous: so I am. And now at
      the dead hour of the night, amid the dreadful silence of that old house,
      so strange a noise as this excited me to uncontrollable terror. Yet, for
      some minutes longer I refrained and stood still. But the beating grew
      louder, louder! I thought the heart must burst. And now a new anxiety
      seized me&mdash;the sound would be heard by a neighbour! The old man&rsquo;s
      hour had come! With a loud yell, I threw open the lantern and leaped into
      the room. He shrieked once&mdash;once only. In an instant I dragged him to
      the floor, and pulled the heavy bed over him. I then smiled gaily, to find
      the deed so far done. But, for many minutes, the heart beat on with a
      muffled sound. This, however, did not vex me; it would not be heard
      through the wall. At length it ceased. The old man was dead. I removed the
      bed and examined the corpse. Yes, he was stone, stone dead. I placed my
      hand upon the heart and held it there many minutes. There was no
      pulsation. He was stone dead. His eye would trouble me no more.
    </p>
    <p>
      If still you think me mad, you will think so no longer when I describe the
      wise precautions I took for the concealment of the body. The night waned,
      and I worked hastily, but in silence. First of all I dismembered the
      corpse. I cut off the head and the arms and the legs.
    </p>
    <p>
      I then took up three planks from the flooring of the chamber, and
      deposited all between the scantlings. I then replaced the boards so
      cleverly, so cunningly, that no human eye&mdash;not even his&mdash;could
      have detected any thing wrong. There was nothing to wash out&mdash;no
      stain of any kind&mdash;no blood-spot whatever. I had been too wary for
      that. A tub had caught all&mdash;ha! ha!
    </p>
    <p>
      When I had made an end of these labors, it was four o&rsquo;clock&mdash;still
      dark as midnight. As the bell sounded the hour, there came a knocking at
      the street door. I went down to open it with a light heart,&mdash;for what
      had I now to fear? There entered three men, who introduced themselves,
      with perfect suavity, as officers of the police. A shriek had been heard
      by a neighbour during the night; suspicion of foul play had been aroused;
      information had been lodged at the police office, and they (the officers)
      had been deputed to search the premises.
    </p>
    <p>
      I smiled,&mdash;for what had I to fear? I bade the gentlemen welcome. The
      shriek, I said, was my own in a dream. The old man, I mentioned, was
      absent in the country. I took my visitors all over the house. I bade them
      search&mdash;search well. I led them, at length, to his chamber. I showed
      them his treasures, secure, undisturbed. In the enthusiasm of my
      confidence, I brought chairs into the room, and desired them here to rest
      from their fatigues, while I myself, in the wild audacity of my perfect
      triumph, placed my own seat upon the very spot beneath which reposed the
      corpse of the victim.
    </p>
    <p>
      The officers were satisfied. My manner had convinced them. I was
      singularly at ease. They sat, and while I answered cheerily, they chatted
      of familiar things. But, ere long, I felt myself getting pale and wished
      them gone. My head ached, and I fancied a ringing in my ears: but still
      they sat and still chatted. The ringing became more distinct:&mdash;It
      continued and became more distinct: I talked more freely to get rid of the
      feeling: but it continued and gained definiteness&mdash;until, at length,
      I found that the noise was not within my ears.
    </p>
    <p>
      No doubt I now grew <i>very</i> pale;&mdash;but I talked more fluently,
      and with a heightened voice. Yet the sound increased&mdash;and what could
      I do? It was a low, dull, quick sound&mdash;much such a sound as a watch
      makes when enveloped in cotton. I gasped for breath&mdash;and yet the
      officers heard it not. I talked more quickly&mdash;more vehemently; but
      the noise steadily increased. I arose and argued about trifles, in a high
      key and with violent gesticulations; but the noise steadily increased. Why
      would they not be gone? I paced the floor to and fro with heavy strides,
      as if excited to fury by the observations of the men&mdash;but the noise
      steadily increased. Oh God! what could I do? I foamed&mdash;I raved&mdash;I
      swore! I swung the chair upon which I had been sitting, and grated it upon
      the boards, but the noise arose over all and continually increased. It
      grew louder&mdash;louder&mdash;louder! And still the men chatted
      pleasantly, and smiled. Was it possible they heard not? Almighty God!&mdash;no,
      no! They heard!&mdash;they suspected!&mdash;they knew!&mdash;they were
      making a mockery of my horror!-this I thought, and this I think. But
      anything was better than this agony! Anything was more tolerable than this
      derision! I could bear those hypocritical smiles no longer! I felt that I
      must scream or die! and now&mdash;again!&mdash;hark! louder! louder!
      louder! louder!
    </p>
    <p>
      &ldquo;Villains!&rdquo; I shrieked, &ldquo;dissemble no more! I admit the deed!&mdash;tear
      up the planks! here, here!&mdash;It is the beating of his hideous heart!&rdquo;
     </p>
</div>
              
            
!

CSS

              
                .wrapper {
  width: 100%;
  max-width: 30em;
  margin:auto;
  font-size: 1.25em;
  line-height: 1.3;
}
.heart {
  display: block;
  width: 50px;
  height: 50px;
  background: darkred;
  transform: rotate(45deg);
  position: relative;
  top: 75px;
  left: 25px;
}
.heart:before {
  content: " ";
  width: 50px;
  height: 50px;
  background: darkred;
  display: block;
  border-radius: 50%;
  margin-top: 50%;
  position: absolute;
  top: -25px;
  left: -25px;
}
.heart:after {
  content: " ";
  width: 50px;
  height: 50px;
  background: darkred;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -25px;
  left: 0;
}
.heart-container {
  display: block;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: polygon(10px 93px, 51px 136px, 96px 87px, 92px 75px, 76px 57px, 16.58% 28.36%, 5.66% 32.82%);
  animation-name: heartbeat;
  animation-duration: 2s;
  animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  shape-margin: 0.25em;
}

@keyframes heartbeat {
  from {
    shape-margin: 0.25em;
  }
  to {
    shape-margin: 1em;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console