Old school D3 from simpler times

All examples By author By category About

jupegarnica

Full window Github gist

valencia.io logo Art version

<div id="box">
  <div class="♥">
    <div class="logo-inner">
      <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="190px" viewBox="0 0 300 190" enable-background="new 0 0 300 190" xml:space="preserve">
      <defs>
        <pattern id="pattern2" patternUnits="userSpaceOnUse"
                      width="700" height="700"> <image xlink:href="https://media.giphy.com/media/3o7TKw5ncnYMCRGNwY/source.gif" x="0" y="-190"> </image> </pattern> 
        <pattern id="pattern" patternUnits="userSpaceOnUse"
                      width="200" height="200"> <image xlink:href="https://media.giphy.com/media/26uf5ygTM3xXcMDEk/source.gif" x="0" y="0" width="200" height="220"> </image> </pattern> </defs>
      <g>
        <g>
          <g>
            <path fill="#414042" d="M2.405,149.056c0.248-0.432,0.724-0.659,1.434-0.691h8.238c0.802,0,1.37,0.343,1.712,1.015l7.681,17.632h0.184l8.146-17.632c0.336-0.672,1.094-1.015,2.264-1.015h7.404c0.71,0.032,1.188,0.26,1.437,0.691c0.123,0.19,0.184,0.388,0.184,0.603c0,0.311-0.092,0.634-0.279,0.977l-17.351,35.622c-0.368,0.622-0.911,0.927-1.618,0.927h-0.463c-0.71,0-1.249-0.305-1.62-0.927L2.498,150.635c-0.184-0.343-0.276-0.666-0.276-0.977C2.222,149.444,2.282,149.247,2.405,149.056z"
                  />
            <path fill="#414042" d="M38.592,174.227c0-3.45,1.431-6.305,4.291-8.556c2.859-2.25,6.761-3.38,11.7-3.38c1.107,0,2.236,0.084,3.387,0.254c1.154,0.171,2.039,0.336,2.651,0.487l0.875,0.274c0-0.09,0-0.185,0-0.274c0-1.907-0.353-3.271-1.056-4.096c-0.736-0.851-1.957-1.274-3.66-1.274c-1.588,0-3.39,0.158-5.402,0.463c-2.014,0.311-3.577,0.634-4.693,0.977c-0.206,0.057-0.412,0.088-0.618,0.088c-0.825,0-1.31-0.603-1.455-1.8l-0.837-4.954c-0.032-0.215-0.045-0.418-0.045-0.602c0-0.863,0.463-1.446,1.389-1.757c0.371-0.229,1.126-0.526,2.268-0.895c1.138-0.368,2.736-0.755,4.787-1.173c2.053-0.412,3.986-0.615,5.807-0.615c2.901,0,5.32,0.361,7.265,1.084c1.943,0.724,3.45,1.834,4.512,3.336c1.065,1.49,1.805,3.197,2.224,5.112c0.415,1.915,0.621,4.236,0.621,6.982v20.547c0,0.463-0.199,0.881-0.6,1.25c-0.402,0.367-0.853,0.551-1.356,0.551h-3.713c-0.736,0-1.323-0.443-1.754-1.338l-1.205-2.543c-3.57,3.209-7.483,4.808-11.739,4.808c-4.071,0-7.362-1.161-9.874-3.495C39.848,181.362,38.592,178.209,38.592,174.227zM49.884,174.227c0,1.42,0.45,2.594,1.357,3.52c0.907,0.927,2.084,1.39,3.525,1.39c1.384,0,2.737-0.432,4.057-1.301c1.322-0.862,2.149-1.648,2.488-2.353v-5.232c-1.722-0.767-3.487-1.153-5.298-1.153c-1.846,0-3.326,0.469-4.448,1.407C50.445,171.45,49.884,172.686,49.884,174.227z"
                  />
            <path fill="#414042" d="M76.028,184.457v-62.747c0-0.463,0.188-0.875,0.562-1.249c0.371-0.367,0.793-0.552,1.259-0.552h8.022c0.466,0,0.885,0.185,1.259,0.552c0.374,0.374,0.562,0.786,0.562,1.249v62.747c0,0.463-0.188,0.881-0.562,1.25c-0.374,0.367-0.793,0.551-1.259,0.551h-8.022c-0.466,0-0.888-0.184-1.259-0.551C76.216,185.337,76.028,184.919,76.028,184.457z"
                  />
            <path fill="#414042" d="M90.285,167.289c0-3.545,0.814-6.829,2.45-9.854c1.637-3.026,3.942-5.455,6.92-7.288c2.974-1.833,6.3-2.752,9.969-2.752c4.938,0,9.123,1.675,12.563,5.022c3.44,3.343,5.159,7.547,5.159,12.601c0,0.869-0.061,1.731-0.185,2.594c-0.031,0.464-0.23,0.845-0.602,1.137c-0.371,0.29-0.771,0.437-1.202,0.437H101.11c0.155,1.985,1.065,3.773,2.729,5.353c1.669,1.585,3.796,2.379,6.387,2.379c2.715,0,5.166-0.749,7.356-2.252c1.082-0.602,1.913-0.57,2.499,0.096l3.84,4.598c0.34,0.349,0.517,0.755,0.533,1.212c0.015,0.456-0.193,0.893-0.625,1.306c-3.732,3.539-8.438,5.309-14.111,5.309c-5.614,0-10.257-1.928-13.93-5.785C92.121,177.543,90.285,172.838,90.285,167.289zM101.944,162.571h14.346c-0.156-1.763-0.904-3.272-2.245-4.534c-1.342-1.27-2.908-1.896-4.696-1.896c-1.884,0-3.526,0.615-4.928,1.852C103.017,159.223,102.191,160.75,101.944,162.571z"
                  />
            <path fill="#414042" d="M129.525,184.457v-34.29c0-0.52,0.178-0.951,0.535-1.295c0.358-0.335,0.787-0.507,1.284-0.507h3.641c0.746,0,1.271,0.368,1.586,1.109l1.351,3.521c0.494-0.526,1.071-1.053,1.737-1.573c0.66-0.526,1.554-1.123,2.68-1.782c1.126-0.665,2.473-1.205,4.049-1.623c1.573-0.418,3.206-0.621,4.899-0.621c2.893,0,5.438,0.514,7.654,1.548c2.215,1.033,3.964,2.447,5.258,4.235c1.288,1.789,2.256,3.779,2.901,5.969c0.644,2.188,0.968,4.565,0.968,7.121v18.188c0,0.463-0.178,0.881-0.53,1.25c-0.352,0.367-0.761,0.551-1.221,0.551h-7.74c-0.522,0-0.954-0.177-1.294-0.526c-0.335-0.354-0.504-0.779-0.504-1.274v-18.74c0-2.467-0.622-4.427-1.867-5.878c-1.247-1.447-2.993-2.176-5.239-2.176c-2.213,0-4.105,0.621-5.673,1.851c-1.569,1.237-2.632,2.614-3.184,4.123v20.82c0,0.679-0.181,1.148-0.535,1.408c-0.358,0.267-0.99,0.393-1.894,0.393h-7.043c-0.466,0-0.888-0.184-1.259-0.551C129.712,185.337,129.525,184.919,129.525,184.457z"
                  />
            <path fill="#414042" d="M169.924,167.264c0-3.635,0.953-6.983,2.865-10.047c1.916-3.068,4.421-5.472,7.522-7.209c3.102-1.744,6.407-2.613,9.921-2.613c5.619,0,10.289,2.244,14.022,6.748c0.308,0.431,0.415,0.894,0.323,1.388c-0.092,0.489-0.371,0.908-0.83,1.25l-4.349,4.16c-0.682,0.584-1.467,0.495-2.362-0.279c-1.788-1.997-3.964-2.999-6.521-2.999c-2.562,0-4.753,0.945-6.574,2.815c-1.82,1.877-2.73,4.142-2.73,6.786c0,2.715,0.896,4.998,2.687,6.855c1.788,1.864,3.964,2.797,6.522,2.797c1.173,0,2.25-0.19,3.24-0.559c0.986-0.367,1.735-0.755,2.243-1.154c0.51-0.398,1.103-0.92,1.782-1.565c0.154-0.153,0.263-0.26,0.322-0.324c0.771-0.768,1.558-0.862,2.358-0.279l4.075,3.514c0.68,0.559,1.018,1.097,1.018,1.624c0,0.336-0.123,0.678-0.371,1.021c-3.394,5.326-8.373,7.99-14.943,7.99c-5.433,0-10.161-1.922-14.182-5.766C171.937,177.577,169.924,172.857,169.924,167.264z"
                  />
            <path fill="#414042" d="M208.349,133.113c-1.186-1.187-1.776-2.639-1.776-4.345c0-1.712,0.591-3.171,1.776-4.369c1.182-1.205,2.612-1.808,4.289-1.808c1.809,0,3.34,0.603,4.597,1.808c1.248,1.198,1.876,2.657,1.876,4.369c0,1.706-0.628,3.158-1.876,4.345c-1.257,1.192-2.788,1.788-4.597,1.788C210.961,134.901,209.53,134.305,208.349,133.113zM207.127,184.457v-34.29c0-0.52,0.175-0.951,0.523-1.295c0.349-0.335,0.767-0.507,1.253-0.507h7.737c0.487,0,0.907,0.172,1.255,0.507c0.349,0.344,0.521,0.775,0.521,1.295v34.29c0,0.463-0.184,0.881-0.546,1.25c-0.364,0.367-0.773,0.551-1.229,0.551h-7.737c-0.453,0-0.866-0.184-1.23-0.551C207.309,185.337,207.127,184.919,207.127,184.457z"
                  />
            <path fill="#414042" d="M221.707,174.227c0-3.45,1.43-6.305,4.291-8.556c2.86-2.25,6.757-3.38,11.696-3.38c1.11,0,2.236,0.084,3.391,0.254c1.15,0.171,2.035,0.336,2.65,0.487l0.875,0.274c0-0.09,0-0.185,0-0.274c0-1.907-0.352-3.271-1.062-4.096c-0.731-0.851-1.952-1.274-3.655-1.274c-1.589,0-3.387,0.158-5.403,0.463c-2.011,0.311-3.577,0.634-4.693,0.977c-0.203,0.057-0.412,0.088-0.614,0.088c-0.825,0-1.311-0.603-1.459-1.8l-0.834-4.954c-0.031-0.215-0.048-0.418-0.048-0.602c0-0.863,0.463-1.446,1.394-1.757c0.366-0.229,1.125-0.526,2.263-0.895c1.142-0.368,2.736-0.755,4.789-1.173c2.054-0.412,3.984-0.615,5.808-0.615c2.898,0,5.322,0.361,7.266,1.084c1.943,0.724,3.446,1.834,4.512,3.336c1.062,1.49,1.805,3.197,2.22,5.112s0.625,4.236,0.625,6.982v20.547c0,0.463-0.203,0.881-0.604,1.25c-0.402,0.367-0.853,0.551-1.356,0.551h-3.71c-0.739,0-1.322-0.443-1.757-1.338l-1.205-2.543c-3.569,3.209-7.48,4.808-11.738,4.808c-4.071,0-7.36-1.161-9.871-3.495C222.96,181.362,221.707,178.209,221.707,174.227zM232.996,174.227c0,1.42,0.45,2.594,1.356,3.52c0.907,0.927,2.087,1.39,3.53,1.39c1.379,0,2.733-0.432,4.053-1.301c1.321-0.862,2.152-1.648,2.49-2.353v-5.232c-1.721-0.767-3.49-1.153-5.301-1.153c-1.842,0-3.329,0.469-4.448,1.407C233.558,171.45,232.996,172.686,232.996,174.227z"
                  />
            <path fill="#414042" d="M256.749,183.511c0-0.938,0.321-1.73,0.974-2.384c0.65-0.647,1.434-0.971,2.35-0.971c0.939,0,1.729,0.317,2.381,0.957c0.65,0.641,0.975,1.44,0.975,2.397c0,0.913-0.324,1.7-0.975,2.347c-0.652,0.646-1.441,0.977-2.381,0.977c-0.897,0-1.674-0.33-2.333-0.989C257.076,185.186,256.749,184.406,256.749,183.511z"
                  />
            <path fill="#414042" d="M266.471,149.158c0-0.78,0.264-1.446,0.803-2.005c0.533-0.551,1.183-0.83,1.946-0.83c0.787,0,1.45,0.279,1.994,0.83c0.543,0.559,0.816,1.225,0.816,2.005c0,0.767-0.273,1.421-0.816,1.953c-0.544,0.533-1.207,0.806-1.994,0.806c-0.764,0-1.413-0.272-1.946-0.806C266.734,150.579,266.471,149.924,266.471,149.158zM267.273,185.142v-21.246c0-0.284,0.114-0.544,0.343-0.773c0.228-0.229,0.487-0.343,0.773-0.343h1.837c0.288,0,0.541,0.114,0.772,0.343c0.229,0.229,0.344,0.489,0.344,0.773v21.246c0,0.284-0.114,0.545-0.344,0.773c-0.231,0.228-0.484,0.342-0.772,0.342h-1.837c-0.286,0-0.546-0.114-0.773-0.342C267.388,185.687,267.273,185.426,267.273,185.142z"
                  />
            <path fill="#414042" d="M274.387,174.417c0-3.316,1.141-6.184,3.427-8.606s5.049-3.633,8.283-3.633c2.123,0,4.087,0.559,5.881,1.675c1.801,1.115,3.216,2.612,4.25,4.489c1.037,1.878,1.551,3.899,1.551,6.075c0,3.412-1.138,6.335-3.418,8.765c-2.277,2.436-5.03,3.652-8.264,3.652c-2.125,0-4.091-0.563-5.901-1.68c-1.809-1.123-3.225-2.632-4.262-4.541C274.899,178.705,274.387,176.643,274.387,174.417z M278.455,174.417c0,2.396,0.738,4.433,2.218,6.101c1.479,1.669,3.287,2.5,5.424,2.5c2.138,0,3.941-0.831,5.409-2.5c1.468-1.668,2.203-3.704,2.203-6.101c0-2.334-0.735-4.325-2.203-5.968c-1.468-1.636-3.271-2.461-5.409-2.461c-2.137,0-3.945,0.825-5.424,2.461C279.193,170.092,278.455,172.083,278.455,174.417z"
                  />
          </g>
        </g>
        <g>
          <g>
            <path fill="#414042" d="M174.002,28.075l23.841,23.896c5.75,5.96,9.296,14.064,9.296,23.001c0,18.3-14.836,33.137-33.137,33.137c-9.447,0-17.966-3.742-24.002-10.085c-6.037,6.343-14.555,10.085-24.001,10.085c-18.301,0-33.137-14.837-33.137-33.137c0-8.937,3.544-17.041,9.295-23l23.842-23.896L150,51.971L174.002,28.075 M150,97.972l7.121-7.123L150,83.729l-7.122,7.121L150,97.972 M174.031,10.797l-8.654,8.615L150,34.722l-15.377-15.31l-8.653-8.615l-8.625,8.644L93.503,43.337l-0.072,0.072l-0.071,0.074c-8.204,8.502-12.723,19.685-12.723,31.488c0,25.012,20.349,45.36,45.361,45.36c8.705,0,16.938-2.328,24.001-6.688c7.064,4.36,15.297,6.688,24.002,6.688c25.012,0,45.36-20.349,45.36-45.36c0-11.801-4.518-22.983-12.722-31.488l-0.071-0.074l-0.073-0.073l-23.841-23.896L174.031,10.797L174.031,10.797z"
                  />
          </g>
          <g>
            <path fill="#414042" d="M126.015,69.846c3.167,0,5.733,2.567,5.733,5.732c0,3.166-2.566,5.732-5.733,5.732c-3.166,0-5.732-2.566-5.732-5.732C120.283,72.413,122.849,69.846,126.015,69.846 M126.015,57.622c-9.901,0-17.957,8.055-17.957,17.957s8.055,17.957,17.957,17.957s17.957-8.055,17.957-17.957S135.917,57.622,126.015,57.622L126.015,57.622z"
                  />
          </g>
          <g>
            <path fill="#414042" d="M174.02,69.846c3.166,0,5.733,2.567,5.733,5.732c0,3.166-2.567,5.732-5.733,5.732s-5.732-2.566-5.732-5.732C168.287,72.413,170.854,69.846,174.02,69.846 M174.02,57.622c-9.901,0-17.956,8.055-17.956,17.957s8.055,17.957,17.956,17.957s17.957-8.055,17.957-17.957S183.921,57.622,174.02,57.622L174.02,57.622z"
                  />
          </g>
        </g>
      </g>
    </svg>
    </div>
  </div>