HTML | CSS | JavaScript | jQuery | Type Design
2017

An interactive typeface created with only code (HTML, CSS and jQuery). It has a complete character set and 2 visual 'states'.

Please hold down the "a", "b" and "c" key.

This is a preview of the typeface. Check out the whole set here!
Each letter is drawn with only one line to mimic the real neon signs.

Type in Context

Some examples of the typeface being used in actual neon signs. This is also achieved with only code. Check out the coded version here!

Snippet of my Code

To achieve this interactive experience, I used HTML, CSS and jQuery.

The letter "A"

Here I'm using the letter "A" as an example showing the code behind this project.

HTML: It consists of 5 layers: the fill, outline, shadow and glows.

    
<div class="a">

   <canvas id="shadowa"></canvas>
   
   <canvas id="outlinea"></canvas>
   
   <canvas id="filla"></canvas>
   
   <canvas id="glowa"></canvas>
   
   <canvas id="glowa2"></canvas>
   
</div>

JavaScript: The HTML <canvas> element is used to draw the type.

    
      var canvas = document.getElementById('filla');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(188, 153);
      context.bezierCurveTo(188, 158, 174, 162, 167, 162);
      context.bezierCurveTo(124, 158, 133, 104, 167, 104);
      context.bezierCurveTo(190, 105,196, 122, 196, 132);
      context.lineTo(196, 167); 
      context.lineWidth = 4.5;
      context.strokeStyle = 'white';
      context.stroke();
///////////////////////////////////////////////
      var canvas = document.getElementById('shadowa');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(188, 153);
      context.bezierCurveTo(188, 158, 174, 162, 167, 162);
      context.bezierCurveTo(124, 158, 133, 104, 167, 104);
      context.bezierCurveTo(190, 105,196, 122, 196, 132);
      context.lineTo(196, 167); 
      context.lineWidth = 4.5;
      context.strokeStyle = '#black';
      context.stroke();
///////////////////////////////////////////////
      var canvas = document.getElementById('filla');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(188, 153);
      context.bezierCurveTo(188, 158, 174, 162, 167, 162);
      context.bezierCurveTo(124, 158, 133, 104, 167, 104);
      context.bezierCurveTo(190, 105,196, 122, 196, 132);
      context.lineTo(196, 167); 
      context.lineWidth = 5;
      context.strokeStyle = '#2b2b2b';
      context.stroke();
///////////////////////////////////////////////
      var canvas = document.getElementById('glowa');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(188, 153);
      context.bezierCurveTo(188, 158, 174, 162, 167, 162);
      context.bezierCurveTo(124, 158, 133, 104, 167, 104);
      context.bezierCurveTo(190, 105,196, 122, 196, 132);
      context.lineTo(196, 167); 
      context.lineWidth = 4.5;
      context.strokeStyle = 'white';
      context.stroke();
///////////////////////////////////////////////
      var canvas = document.getElementById('glowa2');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(188, 153);
      context.bezierCurveTo(188, 158, 174, 162, 167, 162);
      context.bezierCurveTo(124, 158, 133, 104, 167, 104);
      context.bezierCurveTo(190, 105,196, 122, 196, 132);
      context.lineTo(196, 167); 
      context.lineWidth = 13;
      context.strokeStyle = 'white';
      context.stroke();

CSS: The CSS consists of various animations that mimic the neon effects and can be triggered by the keyboard interaction.

    
.blur{
   filter: blur(3.5px);
   animation: blink 1s;
}

.blur2{
   filter: blur(30.5px);
   display: initial;
   animation: blink 1s;
}

.blur3{
   animation: blink2 1s infinite;
   filter: blur(30.5px);
   display: initial;
}

.opacity{
   opacity: 0;
   animation: blink 1s;
}

@keyframes blink{
   0%  {opacity: 0.5}
   45% {opacity: 1}
   50% {opacity: 0}
   55% {opacity: 1}
   65% {opacity: 0}
   70% {opacity: 1}
   75% {opacity: 0}
   80% {opacity: 1}
   85% {opacity: 0}
}

@keyframes blink2{
   0%  {opacity: 0}
   45% {opacity: 1}
   50% {opacity: 0}
   55% {opacity: 1}
   75% {opacity: 0}
   80% {opacity: 1}
   85% {opacity: 1}
   100% {opacity: 1}
}

@keyframes appear{
   from{opacity: 0;}
   to{opacity: 1;}
}

@keyframes appearr{
   from{opacity: 0}
   to{opacity: 1}
}

@keyframes blink3{
   0%   {opacity: 0}
   25%  {opacity: 1}
   50%  {opacity: 0}
   55%  {opacity: 1}
   65%  {opacity: 0}
   70%  {opacity: 1}
   75% {opacity: 0}
   80% {opacity: 1}
   85% {opacity: 0}
   100% {opacity: 1}
}

jQuery: jQuery enables the user to interact with the letters by pressing on the keyboard, which triggers the animations.

    
function domo(){
   jQuery('#platform-details').html('' + navigator.userAgent + '');
   jQuery(document).bind('keydown.a',function (evt){jQuery('#filla').addClass('opacity'); return false; });
   jQuery(document).bind('keyup.a',function (evt){jQuery('#filla').removeClass('opacity'); return false; });
   jQuery(document).bind('keydown.a',function (evt){jQuery('.glowa').addClass('blur'); return false; });
   jQuery(document).bind('keyup.a',function (evt){jQuery('.glowa').removeClass('blur'); return false; });
   jQuery(document).bind('keydown.a',function (evt){jQuery('.glowa2').addClass('blur2'); return false; });
   jQuery(document).bind('keyup.a',function (evt){jQuery('.glowa2').removeClass('blur2'); return false; });
}        
jQuery(document).ready(domo);