cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <?xml version="1.0" encoding="windows-1252" standalone="no"?>
<!-- © Cyril Levallois -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -120 1012 704" preserveAspectRatio="xMidYMin meet" id="svg184863" version="1.1">
  <defs id="defs184865">
    <linearGradient id="linearGradient4176">
      <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0" id="stop4178"/>
      <stop style="stop-color:#3b3b3b;stop-opacity:1;" offset="1" id="stop4180"/>
    </linearGradient>
    <linearGradient xlink:href="#linearGradient4176" id="linearGradient15666" gradientUnits="userSpaceOnUse" x1="281.41483" y1="130.4845" x2="287.53983" y2="130.4845"/>
    <linearGradient xlink:href="#linearGradient4176" id="linearGradient15668" gradientUnits="userSpaceOnUse" gradientTransform="translate(-168.77267,-10.629943)" spreadMethod="reflect" x1="460.12604" y1="85.636497" x2="461.72244" y2="90.386497"/>
    <linearGradient xlink:href="#linearGradient4176" id="linearGradient15670" gradientUnits="userSpaceOnUse" gradientTransform="translate(-168.77267,-10.629943)" x1="444.3877" y1="90.659805" x2="452.92529" y2="90.659805"/>
    <radialGradient xlink:href="#linearGradient4176" id="radialGradient15795" gradientUnits="userSpaceOnUse" gradientTransform="scale(1.920712,1.920712)" cx="0" cy="0" fx="0" fy="0" r="2.0625"/>
    <linearGradient xlink:href="#linearGradient4176" id="linearGradient15803" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.5667428,0,0,5.5667428,0.73036502,2.3639374)" spreadMethod="reflect" x1="3.2185423" y1="0.25841543" x2="3.3313417" y2="-0.5540846"/>
    <linearGradient xlink:href="#linearGradient4176" id="linearGradient15854" gradientUnits="userSpaceOnUse" gradientTransform="translate(-168.77267,-10.629943)" x1="444.3877" y1="90.659805" x2="452.92529" y2="90.659805"/>
  </defs>
  <g id="layer1" transform="translate(-0.00311879,0.00373451)">
    <path style="fill:#a8bb89;fill-opacity:1;stroke:none" d="M 506.32112,584.64194 1012.6392,292.3191 506.32112,-0.00373451 0.00311879,292.3191 z" id="sol"/>
    <g id="eolienne" transform="translate(223.4375,-136.71875)">
      <path id="poteau" d="m 282.67057,78.309942 3.70191,-0.04419 c 0,34.249998 1.10485,68.499998 1.10485,102.749998 0,0 -0.2437,1.6875 -3.0625,1.6875 -2.8188,0 -2.9375,-1.6875 -2.9375,-1.6875 0,-34.25 1.19324,-68.45581 1.19324,-102.705804 z" style="fill:url(#linearGradient15666);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:202.00000763"/>
      <path id="Dynamo" d="m 279.85233,75.703247 c 2.1271,-0.80147 4.1836,-1.842101 6.43816,-2.254849 1.8196,-0.355722 3.67554,-0.466543 5.51211,-0.704713 0.85872,-0.05824 1.86321,-0.27206 2.59051,0.312698 0.67194,0.802612 0.70232,1.923853 0.74357,2.92482 0.0871,0.837304 -0.0881,1.849222 -1.01873,2.125608 -1.21189,0.504251 -2.57357,0.47637 -3.7704,1.034728 -0.89814,0.379103 -1.91187,0.717416 -2.51597,1.52643 -0.0842,0.639222 -0.56418,1.091674 -1.10523,1.407882 -1.08954,0.663832 -2.25848,1.261446 -3.51611,1.519202 -0.68068,-0.125799 -0.95499,-0.989409 -1.39451,-1.473593 -0.98062,-1.492707 -1.95479,-3.050121 -2.38918,-4.801025 -0.1148,-0.547598 -0.16987,-1.320934 0.42578,-1.617188 z" style="fill:url(#linearGradient15668);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:202.00000763"/>
      <g id="Tete" transform="matrix(1.2539063,0.72394314,0,1.4199219,281.64062,79.492188)">
        <g id="triPales">
          <animateTransform id="rotate-pales" from="0" type="rotate" to="360" dur="5s" repeatCount="indefinite" additive="replace" attributeName="transform" attributType="XML" fill="freeze"/>
          <circle d="M 40,0 C 40,22.09139 22.09139,40 0,40 -22.09139,40 -40,22.09139 -40,0 c 0,-22.09139 17.90861,-40 40,-40 22.09139,0 40,17.90861 40,40 z" id="zone-Pales" r="40" cx="0" cy="0" style="fill:none"/>
          <path id="Pale" d="m 31.654776,4.5807214 c 0.17379,-1.043764 -0.69586,-2.26149 -12.78607,-4.08807701 C 6.7784051,-1.3339446 6.0825451,-2.0297876 4.5169051,-0.98602262 2.9512351,0.05774139 2.2947044,-0.15380004 1.4634988,-0.42441474 -0.61426489,-1.1008701 -0.14836846,1.1029219 2.163962,1.563885 4.8767567,2.1046807 29.794898,5.9268548 31.654776,4.5807214 z" style="fill:url(#linearGradient15803);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.14763264;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:202.00000763"/>
          <use height="584.64569" width="1012.6361" transform="matrix(-0.5,-0.8660254,0.8660254,-0.5,-0.17779472,0.11429944)" id="Pale1" xlink:href="#Pale" y="0" x="0"/>
          <use height="584.64569" width="1012.6361" transform="matrix(-0.5,0.8660254,-0.8660254,-0.5,0.01008886,0.21112446)" id="Pale2" xlink:href="#Pale" y="0" x="0"/>
        </g>
        <circle d="M 2,0 C 2,1.1045695 1.1045695,2 0,2 -1.1045695,2 -2,1.1045695 -2,0 c 0,-1.1045695 0.8954305,-2 2,-2 1.1045695,0 2,0.8954305 2,2 z" style="fill:url(#radialGradient15795);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" cy="0" cx="0" r="2" id="circle"/>
      </g>
      <path id="Pignon" d="m 283.11276,83.106864 c -1.4466,0.52243 -3.00122,0.685263 -4.53104,0.729899 -0.87448,-0.01588 -1.82953,0.0045 -2.59162,-0.483806 -0.53581,-0.428817 -0.26269,-1.203333 -0.10923,-1.75285 0.57168,-1.610649 1.47286,-3.108271 2.6055,-4.386518 0.42917,-0.523687 1.03909,-0.856575 1.71162,-0.93696 0.93997,-0.22748 1.93512,0.188538 2.51117,0.945492 1.04202,1.33272 1.69776,3.150648 1.21892,4.831479 -0.13924,0.41906 -0.37118,0.893456 -0.81532,1.053264 z" style="fill:url(#linearGradient15670);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:202.00000763"/>
    </g>
    <g transform="translate(331.1608,-82.02846)" id="eolienne2">
      <use x="0" y="0" xlink:href="#poteau" id="poteau2" width="1012.6361" height="584.64569"/>
      <use x="0" y="0" xlink:href="#Dynamo" id="Dynamo2" width="1012.6361" height="584.64569"/>
      <g transform="matrix(1.2539063,0.72394314,0,1.4199219,281.64062,79.492188)" id="Tete2">
        <g id="TriPales2">
          <animateTransform additive="replace" repeatCount="indefinite" dur="3s" to="360" type="rotate" from="0" attributType="XML" attributeName="transform" fill="freeze"/>
          <use x="0" y="0" xlink:href="#zone-Pales" id="use15868" width="1012.6361" height="584.64569"/>
          <use x="0" y="0" xlink:href="#Pale" id="use15870" width="1012.6361" height="584.64569"/>
          <use x="0" y="0" xlink:href="#Pale" id="use15838" transform="matrix(-0.5,-0.8660254,0.8660254,-0.5,-0.17779472,0.11429944)" width="1012.6361" height="584.64569"/>
          <use x="0" y="0" xlink:href="#Pale" id="use15840" transform="matrix(-0.5,0.8660254,-0.8660254,-0.5,0.01008886,0.21112446)" width="1012.6361" height="584.64569"/>
        </g>
        <use x="0" y="0" xlink:href="#circle" id="use15872" width="1012.6361" height="584.64569"/>
      </g>
      <path style="fill:url(#linearGradient15854);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:202.00000763" d="m 283.11276,83.106864 c -1.4466,0.52243 -3.00122,0.685263 -4.53104,0.729899 -0.87448,-0.01588 -1.82953,0.0045 -2.59162,-0.483806 -0.53581,-0.428817 -0.26269,-1.203333 -0.10923,-1.75285 0.57168,-1.610649 1.47286,-3.108271 2.6055,-4.386518 0.42917,-0.523687 1.03909,-0.856575 1.71162,-0.93696 0.93997,-0.22748 1.93512,0.188538 2.51117,0.945492 1.04202,1.33272 1.69776,3.150648 1.21892,4.831479 -0.13924,0.41906 -0.37118,0.893456 -0.81532,1.053264 z" id="path15844"/>
    </g>
    <use x="0" y="0" xlink:href="#eolienne" id="use15874" transform="translate(-85.626212,49.718446)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne" id="use15876" transform="translate(9.391262,101.09417)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne2" id="use15878" transform="translate(-271.79417,45.299029)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne" id="use15805" transform="translate(-73.556435,156.58034)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne" id="use15880" transform="translate(83.416503,150.81262)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne2" id="use15882" transform="translate(92.807765,51.928154)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne" id="use15884" transform="translate(-242.96875,137.5)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15884" id="use15886" transform="translate(517.96875,11.71875)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15876" id="use15888" transform="translate(-167.96875,95.3125)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15888" id="use15890" transform="translate(-94.53125,59.375)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15890" id="use15892" transform="translate(91.40625,60.9375)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne2" id="use15894" transform="translate(-100.78125,141.40625)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15894" id="use15896" transform="translate(-341.40625,7.03125)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15876" id="use15898" transform="translate(167.96875,94.53125)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15886" id="use15900" transform="translate(-186.71875,94.53125)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne2" id="use15902" transform="translate(163.28125,194.53125)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15886" id="use15904" transform="translate(87.5,44.53125)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15904" id="use15906" transform="translate(79.549513,53.033009)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15900" id="use15910" transform="translate(-13.258252,99.436891)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne" id="use15908" transform="translate(-59.662135,363.49708)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#eolienne2" id="use15912" transform="translate(35,250)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15912" id="use15914" transform="translate(92.807765,53.033009)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15888" id="use15916" transform="translate(-176.7767,102.75145)" width="1012.6361" height="584.64569"/>
    <use x="0" y="0" xlink:href="#use15916" id="use15918" transform="translate(202.18835,116.00971)" width="1012.6361" height="584.64569"/>
  </g>
</svg>
            
          
!
999px
Loading ..................

Console