Diwali Greeting

README.md

Diwali Greeting

diwali_lamp.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
	 id="svg3202" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="diwali lamp.svg" inkscape:version="0.48.2 r9819"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="771.654px"
	 height="723.17px" viewBox="0 0 771.654 723.17" enable-background="new 0 0 771.654 723.17" xml:space="preserve">
<filter  id="filter3423" inkscape:menu-tooltip="Blur the contents of objects, preserving the outline" color-interpolation-filters="sRGB" inkscape:label="Blur content" inkscape:menu="Blurs">
	<feColorMatrix  result="result7" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 " id="feColorMatrix3425"></feColorMatrix>
	<feGaussianBlur  result="result6" id="feGaussianBlur3427" stdDeviation="5"></feGaussianBlur>
	<feComposite  in="result6" result="result91" in2="result7" id="feComposite3429" operator="atop"></feComposite>
	<feComposite  in2="result91" id="feComposite3431" operator="in"></feComposite>
</filter>
<sodipodi:namedview  id="base" showgrid="false" inkscape:cy="-76.116479" inkscape:cx="1153.2112" inkscape:zoom="0.26134937" borderopacity="1.0" bordercolor="#666666" pagecolor="#ffffff" fit-margin-bottom="0" fit-margin-right="0" inkscape:guide-bbox="true" inkscape:window-y="-8" inkscape:window-x="1358" inkscape:window-height="962" inkscape:window-width="1280" inkscape:current-layer="layer1" inkscape:document-units="px" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:window-maximized="1" fit-margin-left="0" showguides="true" fit-margin-top="0">
	</sodipodi:namedview>
<path id="path3230" sodipodi:rx="117.14286" sodipodi:ry="37.142857" sodipodi:type="arc" sodipodi:cx="-828.57141" sodipodi:cy="335.21933" fill="#552200" d="
	M315.872,448.581c0,15.169-63.32,27.465-141.429,27.465S33.015,463.75,33.015,448.581c0-15.168,63.32-27.465,141.429-27.465
	S315.872,433.413,315.872,448.581z"/>
<path id="path3232" sodipodi:rx="134.28571" sodipodi:ry="75.714287" sodipodi:type="arc" sodipodi:cx="-382.85715" sodipodi:cy="362.36218" fill="#552200" d="
	M738.729,460.201c0,30.92-60.122,55.985-134.286,55.985s-134.285-25.065-134.285-55.985s60.121-55.986,134.285-55.986
	S738.729,429.281,738.729,460.201z"/>
<path id="path3227" sodipodi:nodetypes="csc" inkscape:connector-curvature="0" fill="#552200" stroke="#803300" stroke-width="27.5169" d="
	M13.758,446.175c24.849-35.281,204.261-58.586,356.399-58.456c159.051,0.136,333.534,20.475,387.738,56.331"/>
<radialGradient id="path4219_1_" cx="186.4985" cy="426.7051" r="262.1011" gradientTransform="matrix(0.9781 0 0 -0.9489 207.8674 649.7855)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#FFCC00"/>
	<stop  offset="1" style="stop-color:#FFD015;stop-opacity:0"/>
</radialGradient>
<path id="path4219" sodipodi:rx="338.62717" sodipodi:ry="302.27737" sodipodi:type="arc" sodipodi:cx="388.36902" sodipodi:cy="148.51765" opacity="0.602" fill="url(#path4219_1_)" enable-background="new    " d="
	M726.996,248.709c0,166.943-151.608,302.277-338.627,302.277S49.742,415.652,49.742,248.709l0,0
	c0-166.943,151.609-302.277,338.627-302.277S726.996,81.766,726.996,248.709z"/>
<g id="g3379" transform="matrix(0.49034383,0,0,0.38263293,-259.96,-418.88496)" filter="url(#filter3423)">
	<path inkscape:connector-curvature="0" fill="#FFCC00" d="M1379.072,2001.061c59.999-105.715,54.285-162.857,59.999-217.143
		c5.716-54.286-85.792-271.585-91.428-311.429c-2.091-14.781-4.053-27.485-5.897-38.318c-18.014-105.81-24.867-33.028-32.562,26.283
		c-0.467,3.6-0.937,7.15-1.413,10.607c-5.124,37.229-97.143,257.142-91.429,311.428c5.715,54.286,0,111.428,60,217.143"/>
	<path inkscape:connector-curvature="0" fill="#FFD42A" d="M1366.712,2000.347c48.983-89.111,44.42-141.386,49.78-191.925
		c5.411-51-69.724-238.607-73.87-275.249c-1.613-13.132-3.149-24.36-4.632-33.804c-14.537-91.984-17.391-28.952-23.802,23.33
		c-0.389,3.133-0.771,6.267-1.148,9.362c-4.055,33.393-79.406,223.734-73.902,275.254c5.39,50.553,0.835,102.914,49.587,191.844"/>
	<path inkscape:connector-curvature="0" fill="#FFE680" d="M1354.353,1999.632c37.968-72.506,34.554-119.916,39.559-166.709
		c5.108-47.714-53.651-205.627-56.31-239.069c-1.135-11.481-2.246-21.233-3.37-29.289c-11.057-78.16-9.912-24.876-15.04,20.378
		c-0.313,2.666-0.605,5.383-0.884,8.115c-2.986,29.557-61.669,190.327-56.375,239.079c5.067,46.822,1.67,94.403,39.172,166.544"/>
	<path inkscape:connector-curvature="0" fill="#FF9955" d="M1341.993,1998.917c26.952-55.904,24.688-98.444,29.338-141.492
		c4.806-44.428-37.581-172.649-38.75-202.89c-0.655-9.831-1.342-18.107-2.107-24.776c-7.578-64.334-2.434-20.801-6.281,17.427
		c-0.233,2.199-0.436,4.5-0.617,6.868c-1.918,25.723-43.932,156.919-38.848,202.905c4.743,43.088,2.505,85.891,28.76,141.246"/>
	<path inkscape:connector-curvature="0" fill="#AA4400" d="M1303.535,1998.083c-6.095-6.095-4.909-34.034-1.323-65.845
		c3.898-34.57,10.628-73.712,13.927-94.35c0.78-4.881,1.368-8.727,1.682-11.234c2.856-22.858,20-8.572,20,8.572
		c0,0.798,0.062,1.848,0.177,3.129c1.291,14.213,9.279,56.692,13.734,94.381c3.77,31.892,5.009,60.352-2.482,65.347"/>
</g>
<path id="path3210" sodipodi:nodetypes="ccsssc" inkscape:connector-curvature="0" fill="#C6A68D" d="M7.301,440.131
	c215.713,365.838,540.71,372.693,757.143-2.113c-85.024,27.172-203.876,26.084-253.297,0.604
	c-50.891-26.236-98.02-115.412-120.883-115.082c-24.576,0.354-76.335,90.675-120.883,115.082
	C218.559,466.468,112.063,466.814,7.301,440.131z"/>
<path id="path3212" inkscape:connector-curvature="0" fill="#A27259" d="M384.356,438.044c-22.857,0-122.857,73.943-160,88.732
	c-36.805,14.654-96.053,8.537-166.625-10.075c196.261,264.823,459.579,269.134,656.281-0.947c-0.145-0.216-1.094-1.663-1.094-1.663
	c-62.857,24.959-141.999,30.71-177.125,12.686C512.676,514.914,407.214,438.044,384.356,438.044z"/>
<path id="path3217" sodipodi:nodetypes="ssccss" inkscape:connector-curvature="0" fill="#A4664A" d="M385.325,522.541
	c-12.878,0.533-109.896,55.502-174.281,61.28c-19.843,1.781-92.25,0.122-95.938,0.023
	c168.345,175.354,372.638,178.522,541.531,2.103c-0.546,0.07-49.006,4.735-88.469-0.022
	C523.398,580.525,413.285,521.384,385.325,522.541z"/>
<path id="path3222" sodipodi:nodetypes="sccs" inkscape:connector-curvature="0" fill="#AA5B35" d="M381.872,614.042
	c-73.388,0-134.67,33.215-194.149,33.763c131.602,100.749,267.197,93.99,399.728-2.244
	C511.703,643.229,453.192,614.042,381.872,614.042z"/>
</svg>

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Happy D3iwali</title>
  <!-- Js -->
  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link href="http://fonts.googleapis.com/css?family=Arizonia" rel="stylesheet" type="text/css">
  <!-- CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- HTML -->
  <!-- inspired by http://jsfiddle.net/christopheviau/XnG6r/-->
  <!-- inspired by https://gist.github.com/mbostock/1345853-->
  <div id="body">
    <div class="centered">
      <h1 id="greeting">Wishing you a very <br/>
        Happy D<span id="d3text">3</span>iwali
        <br/> and a prosperous New Year!
      </h1>
      <div id="lamp"></div>
    </div>

  <!-- Js -->
  <script type="text/javascript" src="index.js">
  </script>
</body>
</html>

index.js

 var dataset = [ 5, 10, 15, 20, 25];

//Width and height
var w = 800;
var h = 200;

//Create SVG Element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Import the plane
d3.xml("diwali_lamp.svg", "image/svg+xml", function(xml) {  
  var importedNode = document.importNode(xml.documentElement, true);
  svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .attr("transform", function(d, i){ 
        return "translate(" + (i * (w / dataset.length)) + "," 
            + (h - 200) + ")"
            +"scale("+ 0.2 +")";
    })
    .each(function(d, i){ 
        var plane = this.appendChild(importedNode.cloneNode(true)); 
        d3.select(plane).select("g")
            .transition()
            .duration(1000)
            .each(slide);
    });

    function slide() {
      var flame = d3.select(this);
      var x = Math.random() * (0.40 - 0.38) + 0.38;
      var y = Math.random() * (0.49 - 0.48) + 0.48;
      (function repeat() {
        //Original matrix - 0.49034383,0,0,0.38263293,-259.96,-418.88496
/*        flame = flame.transition()
            .attr("transform", "matrix(0.50,0.01,0,0.38,-265,-418)")
          .transition()
            .attr("transform", "matrix(0.47,0,0.01,0.39,-259.96,-420)")
            .each("end", repeat);
        })();*/
        flame = flame.transition()
            .attr("transform", "matrix(" + y + ",0.01,0," + x + ",-265,-418)")
          .transition()
            .attr("transform", "matrix(" + y + ",0,0.01,0.39,-259.96,-420)")
            .each("end", repeat);
        })();
    } 
});

style.css

html { margin: 0; padding: 0; }

body {
  margin: 0;
  padding: 0;
  text-align: center; /* !!! */
  background-color: black;
}

.centered {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

#lamp {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

#d3text {
  color: #E4B1B1;
}

h1 {
  font: 4em 'Arizonia', Helvetica, sans-serif;
  color: #fff;
}

how i use coding in blogger. please suggest me youtube video.