Pornhub Logo generator

index.html

<div id="canvas">
<span contenteditable="true" spellcheck="false">Porn</span><span class="orange" contenteditable="true" spellcheck="false">Hub</span>
</div>
<a href="#" class="cumshot">Cum shot</a>

pornhub-logo-generator.markdown

Pornhub Logo generator

A Pen by blacker on CodePen.

License.

script.js

$('.cumshot').click(function(){
  
   html2canvas($('#canvas'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

style.scss

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  display:flex;
  align-items:center;
  height:100vh;
  text-align:center;
  justify-content: center;  
}
#canvas {

  background-color: black;
  color: white;
  font: bold 60px Arial;
  display:inline-block;
  padding: 40px 30px;
}

.orange {
  background-color: orange;
  color: black;
  padding: 15px;
  border-radius: 15px;
  margin-left: 15px;
}

.cumshot{
  position:fixed;
  bottom:30px;
  font-size:40px;
  text-decoration:none;
  left:50%;
  transform:translateX(-50%);
  color:#000;
}