Happy Birthday GIF

Cupcakes for Birthday

Animated gif with 5 cupcakes for a birthday, each with a flickering candle. Customize the message and name, and set the text font and colors. Use the image icon to change cupcake images.

Made By: EditableGIFs

Parent GIF 2 Child GIFS Open Inheritance Tree

GIF width: , height:

Line 1

Line 2

HB font

Text font color

Text border color

Edit GIF animation code

Raw Code

Editable GIFs are created from the SCL animation language.
Open help and documentation

/* FEELING ADVENTUROUS? TRY THIS.
   BEWARE: MAKING ERRORS COULD MEAN
           RELOADING AND LOSING YOUR
           WORK
*/

var LINE1="Happy Birthday" //: Line 1
var LINE2="Name" //: Line 2
var FONT="block" //: HB font
var TEXTCOLOR="#ffffff" //: Text font color
var BORDERCOLOR="#e58b9b" //: Text border color
var CUPCAKE1="cupcake-1.png"
var CUPCAKE2="cupcake-2.png"
var CUPCAKE3="cupcake-3.png"
var CUPCAKE4="cupcake-4.png"
var CUPCAKE5="cupcake-5.png"
var BK="bkgrd-1.png"
var CANDLE1="blue.png"
var CANDLE2="green.png"
var CANDLE3="pink.png"
var CANDLE4="purple.png"
var CANDLE5="red.png"

var FLAME1="flame-1.png"
var FLAME2="flame-2.png"

create sprite from BK as Bkgrd end
create data from letters as Line1Letters
set
  LINE1
end
create data from letters as Line2Letters
set
  LINE2
end

create textsprite as HBLetter
where
    align="center" color=TEXTCOLOR
    font="normal bold 64px "+FONT
    style="border" borderwidth=4 bordercolor=BORDERCOLOR
end

create sprite as Layer1 end
create routine as Start
	launch Bkgrd
	launch Layer1
	insert into Layer1 where alt=(sub
		create wait where delay=1650 completion=Stop
		end)
  Line1()
  Line2()
  launch Cupcake1
  launch Cupcake2
  launch Cupcake3
  launch Cupcake4
  launch Cupcake5
  clone from Flame using original
  insert into Candle1 where children=_clone
  clone from Flame using original
  insert into Candle2 where children=_clone
  clone from Flame using original
  insert into Candle3 where children=_clone
  clone from Flame using original
  insert into Candle4 where children=_clone
  clone from Flame using original
  insert into Candle5 where children=_clone
end

var letterSpacing=25
create routine as Line1
	update var HBLPos set=0
  run routine SetHBLetter where repeat=data.Line1Letters
end

create routine as Line2
	update var HBLPos set=0
	update var letterSpacing set=30
  run routine SetNLetter where repeat=data.Line2Letters
end

var HBLPos=0
create routine as SetHBLetter
  var letter=data.Line1Letters.next
  var tlen=data.Line1Letters.count
  LaunchLetter(letter,tlen,_repeat)
end

create routine as LaunchLetter
  var letter=arg.1
  var tlen=arg.2
  var whi=arg.3
  if (HBLPos==0)
  	update var HBLPos set=letterSpacing*whi-(tlen/2*letterSpacing)+200+letterSpacing/2
 	else
		if (letter=="i" || letter=="I" || letter=="l")
			update var HBLPos add=letterSpacing*.95
		elsif (letter=="m" || letter=="M")
			update var HBLPos add=letterSpacing*1.2
		else
			update var HBLPos add=letterSpacing
		endif
  endif
  clone from HBLetter using original
  update textsprite _clone where text=letter and x=HBLPos-((whi+1)%2)*letterSpacing/2-letterSpacing/2
  update sprite _clone where angle=5-20*(whi%2)
  insert into _clone where alt=LDelay
  return _clone
end

create routine as SetNLetter
  var letter=data.Line2Letters.next
  var tlen=data.Line2Letters.count
  var spr=LaunchLetter(letter,tlen,_repeat)
  update sprite spr where y=210
end

create wait as LDelay
where
  delay=500 completion=LDelayDone
end

create routine as LDelayDone
  update sprite _sprite where angle=_sprite.angle+10
  insert into _sprite where alt=LDelay2
end
create wait as LDelay2
where
  delay=500 completion=LDelayDone2
end
create routine as LDelayDone2
  update sprite _sprite where angle=_sprite.angle-10
  insert into _sprite where alt=LDelay3
end
create wait as LDelay3
where
  delay=500 completion=LDelayDone3
end
create routine as LDelayDone3
  update sprite _sprite where angle=_sprite.angle+10
  insert into _sprite where alt=LDelay4
end
create wait as LDelay4
where
  delay=500
end

create sprite from CANDLE1 as Candle1
  where y=-70 center=5,100
end
create sprite from CUPCAKE1 as Cupcake1
  where x=67 y=165 center=auto size=0.30
  having children=Candle1
end

create sprite from CANDLE2 as Candle2
  where y=-70 center=5,100
end
create sprite from CUPCAKE2 as Cupcake2
  where x=134 y=165 center=auto size=0.30
  having children=Candle2
end

create sprite from CANDLE3 as Candle3
  where y=-70 center=5,100
end
create sprite from CUPCAKE3 as Cupcake3
  where x=200 y=165 center=auto size=0.30
  having children=Candle3
end

create sprite from CANDLE4 as Candle4
  where y=-70 center=5,100
end
create sprite from CUPCAKE4 as Cupcake4
  where x=267 y=165 center=auto size=0.30
  having children=Candle4
end

create sprite from CANDLE5 as Candle5
  where y=-70 center=5,100
end
create sprite from CUPCAKE5 as Cupcake5
  where x=334 y=165 center=auto size=0.30
  having children=Candle5
end

create sprite from FLAME1 as Flame
  where center=7,22 x=0 y=-100 size=3
  having alt=flameFlip
end
create flipbook as flameFlip
  where images=(FLAME1,FLAME2) loop=true frames=random
end

Replace this image

OR, choose from the list...

Upload a video to play in the background of your GIF.
We recommend videos/gifs to not be longer than 10 seconds.

Drag Video to Here

Touch to change a GIF image:

Your animation will be:

uploaded and processed
given a unique web address
available to download or share for 5 days

After sharing you will be automatically taken to your new gif page.

For Apps...

Your animation will be:

uploaded for processing
made ready for App upload (mp4)
you will be taken to the video page
video will only be available for a limited time

Save the video to your device for posting to your preferred app.

Download

Your working copy

Personalize name and choose your cupcakes with the image icon

Download:

Download GIF

Download for

Download Video

Errors will appear here.

Your GIF

GIF options

Repeat?

Duration each frame (ms):

Timer interval before repeating (ms):

Start gif on which frame:

Use transparency? ||| Alpha cutoff (0, 255)

Background color?

Width:

Height:

Webm Video Download

Download Complete

Drag/Pinch Image

GIF Tip

Upload in progress...

Please hold... processing