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 15 of 15 comments ( View all | Add Comment )

anore	1768800752 I LOOOVE THIS & DEFINITELY USING, BUT IDK HOW TO GET HIM ON MY 'WHO ID LIKE TO MEET' SECTION he keeps going on the bottom box where it says Tibush Labs Report Comment
🎧ReowR★.ᐟ	1757781106 Uziing!! Report Comment
Abnormal victoriA	1755754025 UsInG Report Comment
pe2ky pe2t	1752666884 U2iing Report Comment
Viktor	1736974772 tried using it and half of his body is missing Report Comment
Haunted_Woodland	1732655473 usin9 Report Comment
Toast	1726621034 using Report Comment
kisa catcat	1722933754 using Report Comment
phenomenal✮cat	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
YOYO	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