Skip to content

Instantly share code, notes, and snippets.

@beemyfriend

beemyfriend/index.html

Last active September 2, 2017 02:30
Show Gist options
  • Save beemyfriend/e32c476fc7c0431eedfa5b075391d532 to your computer and use it in GitHub Desktop.
Save beemyfriend/e32c476fc7c0431eedfa5b075391d532 to your computer and use it in GitHub Desktop.
Download ZIP
badge
Raw
index.html
<head></head>
<body>
<svg height = '1050px' width = '1500px'>
<radialGradient id="gr-radial"
cx="50%" cy="50%" r="70%">
<!-- Animation for radius of gradient -->
<animate attributeName="r"
values="0%;175%"
dur="10s" repeatCount="indefinite" />
<!-- Animation for colors of stop-color -->
<stop stop-color="#FFF" offset="0">
<animate attributeName="stop-color"
values="#333;#FFF"
dur="10s" repeatCount="indefinite" />
</stop>
<stop stop-color='#333' offset='100%'/>
</radialGradient>
</svg>
</body>
<!--<script src ='d3v4+jetpack.js'></script>-->
<script src = 'https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js'></script>
<script>
var svg = d3.select('svg')
var height = 1500,
width = 1050,
text_size = 60;
svg.st({background: '#333'}).at({width: width, height: height + 1000})
svg.append('text')
.translate([width/2, height * 1/4 + 100])
.st({fontSize: text_size, fill: 'url(#gr-radial)', textAnchor: 'middle'})
.text('You are so cool!')
// .tspans(['You are so cool!', "I'm so happy to finally meet you all!"], 50)
// .text("D3 is the coolest!\n I'm glad to finally meet you all!")
svg.append('text')
.translate([width/2, height * 5/8 + 300])
.st({fontSize: text_size, fill: 'url(#gr-radial)', textAnchor: 'middle'})
.text("I'm so happy to finally meet you!")
var heart= svg.append('g.heart')
.translate([width/2, height/3 + 100 + 100 + 100])
.st({fill: 'white'})
heart.append('path.appear')
.at({d: 'm 150 400 l -200 -200 l 200 -200 l 200 200 l -200 200'})
// .st({fill: 'white'})
heart.append('circle.appear')
.at({cx: 150 -100, cy: 100, r: 143});
heart.append('circle.appear')
.at({cx: 150 +100, cy: 100, r:143})
var image = svg.append('g.bee')
.translate([width/2, height/3 +100 + 100 + 100])
.st({background: 'white'})
image.append('image.appear')
.at({href: "http://cdn.onlinewebfonts.com/svg/img_256890.svg",
width: 300,
height: 300
})
.st({fill: 'white'})
svg.selectAll('.appear')
.call(resize_bee);
function resize_bee(){
svg.selectAll('.appear')
.at({transform: 'scale(0)'})
.transition()
.duration(10170)
.at({transform: 'scale(.7)'})
.translate([-150, -150])
.on('end', resize_bee);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment