Puppeted Lil Hal

Tags: homestuck, simple

Description:

A little hal that sits on your profile!! He's made to sit in the bottom of your "Who I'd like to meet" section!! Art by me!

** sorry for forgetting to remove the invert && hue rotate filters, thats changed now

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by averageGamester (https://layouts.spacehey.com/layout?id=100779) -->

<div class="profile_pic unique">
<div class="character body"></div>
<div class="character head"></div>
<div class="character face"></div>
<div class="character arm1"></div>
<div class="character arm2"></div>
<div class="character leg1"></div>
<div class="character leg2"></div>
<div class="character hip"></div>
</div>

<style>
.profile_pic.unique {
width:10px;
height:90px;
bottom: 17px;
left: 70px;
position:relative;
}
.character {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
z-index: 1 !important;
width:383px;
height:265px;
background-size: 100% 100%;
position:relative;
}
.character.body{
background-image: url("https://64.media.tumblr.com/043944df48e69422f0f60ee979ec90b4/832b81f65a79b3e8-ed/s1280x1920/715656567ff541d6d12896e72cd01c99e01b2e97.pnj");
animation: body_breathe 10s linear 0s infinite;
}
.character.head{
bottom: 265px;
 position:relative;
background-image: url("https://64.media.tumblr.com/048dcd46108a803032cc1ee59bb9bd55/bcf8d3ed6100ad7a-97/s1280x1920/b48f821247c45b21ca71d9be0e64a7236399881e.pnj");
}
.character.head:hover{
transform: rotate(2deg);
}
.character.face{
pointer-events: none;
bottom: 530px;
background-image: url("https://64.media.tumblr.com/28755b453faba1bda190555965402874/832b81f65a79b3e8-45/s1280x1920/136ceaf0fc787268ae4b4119a3cf76ae1c17dbf6.pnj");
}
.character.arm1{
pointer-events: none;
bottom: 830px;
left: -20px;
background-image: url("https://64.media.tumblr.com/f8c2792ff3e76e4beefa29d554c200f8/832b81f65a79b3e8-a1/s1280x1920/249029c6d1aff891241453c19350b8561dceac07.pnj");
}
.character.arm2{
pointer-events: none;
bottom: 1090px;
left: 15px;
z-index: 0 !important;
background-image: url("https://64.media.tumblr.com/58a340cd32ddef168d8dd3604fd6a65a/832b81f65a79b3e8-dd/s1280x1920/b8906a80619cdb09b7c46e7ecb79776753572a7d.pnj");
animation: hand_swing 5s linear 0s infinite alternate;
}
.character.leg1{
pointer-events: none;
z-index: 2 !important;
bottom: 1312px;
left: -25px;
background-image: url("https://64.media.tumblr.com/ac7c957a10a3dc424a01a5774c1d97e7/832b81f65a79b3e8-2a/s1280x1920/07ef714919924a836db5ab16dc13dca9f1726fb0.pnj");
animation: leg_swing 10s linear 0s infinite alternate;
}
.character.leg2{
pointer-events: none;
bottom: 1570px;
background-image: url("https://64.media.tumblr.com/e18695540bcca6f1b97de36b618a096d/832b81f65a79b3e8-24/s1280x1920/1adda39dcabc01617627d64f7dafd0b9ed6931b9.pnj");
}
.character.hip{
pointer-events: none;
bottom: 1860px;
background-image: url("https://64.media.tumblr.com/ab8a84d094ee28fa52a6f68458a1658a/832b81f65a79b3e8-f0/s1280x1920/53680f69616b09aa920ff49fdb185bc6e909501b.pnj");
}
@keyframes hand_swing {
  0%{transform: rotate(0deg);}
  50%{transform: rotate(30deg);}
  100%{transform: rotate(0deg);}
}
@keyframes leg_swing {
  0%{transform: rotate(-10deg);}
  50%{transform: rotate(10deg);}
  100%{transform: rotate(-10deg);}
}
@keyframes body_breathe {
  0%{transform: translate(0px, 0px);}
  10%{transform: translate(0px, 0px);}
  20%{transform: translate(0px, 0px);}
  30%{transform: translate(0px, 0px);}
  40%{transform: translate(0px, 0px);}
  50%{transform: translate(0px, 0px);}
  60%{transform: translate(0px, 0px);}
  70%{transform: translate(0px, -5px);}
  80%{transform: translate(0px, 0px);}
  90%{transform: translate(0px, 0px);}
  100%{transform: translate(0px, 0px);}
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 9 of 9 comments ( View all | Add Comment )

Toast	1726621034 using Report Comment
kisa catcat	1722933754 using Report Comment
oll✮yaaa	1722762034 using Report Comment
C4L1XTO_923	1722532105 Using ^^ Report Comment
Quinn (not using this acc anymore)	1716388415 usinngg Report Comment
<BBKKBKK>	1713649920 Using & thx sooo much for making this:']!! Its been hard for me to find anything lil hal related on here so I appreciate this:3 Report Comment
≪ LIL HAL ≫	1713026852 Using!! Report Comment
KeybordCaps	1711405838 Hello! I love this, and am using it on my profile, but for some reason his colours are inverted?? im unsure why Report Comment for some reason theres a "filter:invert(100%);" command somewhere in the script, delete it and it should go back to normal by Szfed; 1712081841; Report sorry! My profile uses inverted colours && I thought I'd removed that from the code but evidently not ^.^;; by averageGamester; 1713620496; Report
Sam	1711000097 i havnt read homestuck, but this is super cool. Im sorry to ask, could you do prismo? If not, i just want to say again how epic this is Report Comment prismo would be cool but I'm not sure how he would work with his whole clipping onto backgrounds thing : by averageGamester; 1713691417; Report maybe by Sam; 1713720289; Report